CSS / 개요, 선택자, 상속
기본문법 - 선택자 {
속성: 속성값;
속성: 속성값;
}
선언 방식 - 인라인 방식
속성: 속성값;
속성: 속성값;
}
선언 방식 - 인라인 방식
<div style='color: red; font-size: 20px; font-weight: bold;'>HELLO</div>
내장 방식
<style> div{ color: red; font-size: 20px; font-weight: bold; } </style>
링크 방식 - html<link>를 이용해서 외부 문서로 css를 불러와 적용
<link rel='stylesheet' href='css/common.css'>
@(at)import 방식 - css에서 외부의 css를 가져오는 방식(직렬 방식이므로 시간 지연이 생김, 대신 순서적으로 호출이 되야할때는 좋음)
@import url('./common2.css');
기본 선택자 - 전체 선택자 - 요소 내부의 모든 요소를 선택
*{ color: red;
}
태그 선택자 - 태그 이름으로 요소 선택
li{ color: red; }
클래스 선택자 - HTML class속성의 값으로 선택
.orange{ color: red; }
아이디 선택자 - HTML id속성의 값으로 선택
#orange{ color: red; }
복합 선택자 - 일치 선택자 - 두가지 선택자를 동시에 만족하는 요소 선택
span.orange{ color: red; }
자식 선택자 - 부모 선택자의 자식 요소를 선택(> 자식)
ul > .orange{ color: red; }
후손(하위) 선택자 - 앞선 선택자의 후손(하위) 요소를 선택(띄어쓰기가 선택 자의 기호)
div .orange{ color: red; }
인접 형제 선택자 - 앞선 선택자의 다음 형제요소를 하나만 선택(+ 인접한 다 음의 형제요소)
.orange + li{ color: red; }
일반 형제 선택자 - 앞선 선택자의 다음 형제요소 모두를 선택(~ 일반 형제)
.orange ~ li{ color: red; }
상속 - 상위 요소에 적용된 색상같은 속성이 하위요소에 똑같이 적용이 된다. (대부분 글자를 다루는 속성)
강제 상속 - 하위요소는 inherit으로 강제 상속이 가능하다. '자식'를 제외한 '후손'에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아니다.
우선 순위 - 1. 명시도, 2. 선언 순서(가장 마지막 해석) 3. 중요도(상속은 우선 순위가 떨어짐), 4. !important가 젤 중요(중요도)
인라인 선언방식은 1000점, 아이디 선택자는 100점, 클래스 선택자는 10점, 태그 선택자는 1점, 전체 선택자는 0점, 상속은 아예 점수가 없음
가상 클래스 선택자 - :(가상 클래스 선택자), ::(가상 요소 선택자)
hover - 마우스가 올라가 있는 동안에만 선택
active - 마우스로 클릭하는 동안에만 선택
focus - 포커스 된 동안에만 선택(input, img, tabindex)
first-child - 형제 요소 중 첫번째 요소라면 선택
last-child - 형제 요소 중 마지막 요소라면 선택
nth-child - 형제 요소중 n번재 요소라면 선택(n 키워드 사용시 0부터 해석)
강제 상속 - 하위요소는 inherit으로 강제 상속이 가능하다. '자식'를 제외한 '후손'에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아니다.
우선 순위 - 1. 명시도, 2. 선언 순서(가장 마지막 해석) 3. 중요도(상속은 우선 순위가 떨어짐), 4. !important가 젤 중요(중요도)
인라인 선언방식은 1000점, 아이디 선택자는 100점, 클래스 선택자는 10점, 태그 선택자는 1점, 전체 선택자는 0점, 상속은 아예 점수가 없음
가상 클래스 선택자 - :(가상 클래스 선택자), ::(가상 요소 선택자)
hover - 마우스가 올라가 있는 동안에만 선택
active - 마우스로 클릭하는 동안에만 선택
focus - 포커스 된 동안에만 선택(input, img, tabindex)
first-child - 형제 요소 중 첫번째 요소라면 선택
last-child - 형제 요소 중 마지막 요소라면 선택
nth-child - 형제 요소중 n번재 요소라면 선택(n 키워드 사용시 0부터 해석)
.fruits li:nth-child(2n){
color: red; }
nth-of-type - 타입과 동일한 타입인 형제 요소 중 앞선 선택자가 n번째 요소라면 선택(n키워드 사용시 0부터 해석)
.fruits p:nth-of-type(1){ color: red; }
부정 선택자 - 뒤의 조건이 아닌 앞선 선택자 선택
가상 요소 선택자 - before - 요소 내부의 앞에, 내용을 가상 요소 삽입(::), content는 필수(없으면 아무 효과가 없음)
after - 요소 내부의 뒤에 내용을 삽입(::)
속성 선택자 - attr - 속성을 포함한 요소 선택 [attr]
attr=value - 속성을 포함하며 속성값이 value인 요소 선택 [attr=value]
attr^=value - 속성을 포함하며 속성 값이 value로 시작하는 요소 선택 [attr^=value]
attr$=value - 속성을 포함하며 속성 값이 value로 끝나는 요소 선택[attrr$=value]
가상 요소 선택자 - before - 요소 내부의 앞에, 내용을 가상 요소 삽입(::), content는 필수(없으면 아무 효과가 없음)
after - 요소 내부의 뒤에 내용을 삽입(::)
속성 선택자 - attr - 속성을 포함한 요소 선택 [attr]
attr=value - 속성을 포함하며 속성값이 value인 요소 선택 [attr=value]
attr^=value - 속성을 포함하며 속성 값이 value로 시작하는 요소 선택 [attr^=value]
attr$=value - 속성을 포함하며 속성 값이 value로 끝나는 요소 선택[attrr$=value]
CSS / 실습 환경
CSS Reset - reset.css cdn검색후(https://www.jsdelivr.com/package/npm/reset-css) 정보를 걸어주며 된다. reset이 먼저 호출되고 그다음에 내가 작성한 css가 적용되도록 해야한다.
Emmet - list{list$}*8 $는 엑셀처럼 증가하는 변수
Emmet - list{list$}*8 $는 엑셀처럼 증가하는 변수
CSS / 단위
px, % - %는 부모요소의 영향을 받음
em, rem - em은 자기 자신의 폰트 사이즈에 영향을 받음, 폰트 사이즈가 10px이고 em이 60em이면 600px와 같음, 폰트사이즈가 명시되지 않았을 경우 부모의 폰트사이즈를 상속함
vw - ViewportWidth Viewport=흰색 화면으로 나오는 화면 전체 100이 최대값(%를 따짐)
vh - ViewportHeight 최대값(%를 따짐)
vmin - vw 나 vh중 제일 짧은 길이 쪽으로 설정이 됨
vmax - vw 나 vh중 제일 긴길이 쪽으로 설정이 됨
em, rem - em은 자기 자신의 폰트 사이즈에 영향을 받음, 폰트 사이즈가 10px이고 em이 60em이면 600px와 같음, 폰트사이즈가 명시되지 않았을 경우 부모의 폰트사이즈를 상속함
vw - ViewportWidth Viewport=흰색 화면으로 나오는 화면 전체 100이 최대값(%를 따짐)
vh - ViewportHeight 최대값(%를 따짐)
vmin - vw 나 vh중 제일 짧은 길이 쪽으로 설정이 됨
vmax - vw 나 vh중 제일 긴길이 쪽으로 설정이 됨
CSSS / 속성 - 박스 모델
width - 가로 넓이 기본값(auto)이 있음, 단위는 px, em, cm등이 있음
height - 세로 넓이 기본값(auto)이 있음, 단위는 px, em, cm등이 있음
max-width - 요소의 최대 가로 너비를 지정, 기본값은 none
min-width - 요소의 최소 가로 너비를 지정, 기본값은 0
max-height - 요소의 최대 세로 너비를 지정, 기본값은 none
min-height - 요소의 최소 세로 너비를 지정, 기본값은 0
height - 세로 넓이 기본값(auto)이 있음, 단위는 px, em, cm등이 있음
max-width - 요소의 최대 가로 너비를 지정, 기본값은 none
min-width - 요소의 최소 가로 너비를 지정, 기본값은 0
max-height - 요소의 최대 세로 너비를 지정, 기본값은 none
min-height - 요소의 최소 세로 너비를 지정, 기본값은 0
margin - 요소의 '외부(바깥) 여백'을 지정, 음수 값을 사용할 수 있다, 기본값은 0, 단위는 px, em, cm등 사용, auto, %(부모 요소의 가로 너비에 대한 비율)사용, 단축속성
.box{ margin: 10px 20px 30px 40px;/*위 우 아래 좌*/ margin: 10px 20px 40px;/*위 [좌,우] 아래*/ margin: 10px 40px;/*[위,아래] [좌,우]*/ margin: 10px ;/*[위,아래,좌,우]*/ }
margin-top - 요소의 '외부(바깥) 위쪽 여백'을 지정, 개별 속성
margin-bottom - 요소의 '외부(바깥) 아래쪽 여백'을 지정
margin-right - 요소의 '외부(바깥) 오른쪽 여백'을 지정
margin-left - 요소의 '외부(바깥) 왼쪽 여백'을 지정
마진 중복(병합, Collapse) - 마진의 특정 값들이 '중복'되어 합쳐지는 현상, 1. 형제 요소들의 margin-top이 만날때 2. 부모요소와 자식요소의 margin-top이 만날때 3. 부모 요소와 자식요소의 margin-bottom이 만날때
마진 중복 계산법 - 마진 중복 현상이 발생시, 중복 값을 계산하는 방법
조건 요소A 마진 요소B 마진 계산법 중복 값
둘 다 양수 30px 10px 더 큰 값으로 중복 30px
둘 다 음수 -30px -10px 더 작은 값으로 중복 -30px
각각 양수와 음수 -30px 10px -30 + 10 = -20 -20px
padding - 요소의 '내부(안) 여백'을 지정, 기본값은 0 단위는 px, em, cm등 단위로 지정 %는 부모 요소의 너비에 대한 비율로 지정, 마진처럼 단축 속성 개별 속성이 있음, 사용기 추가된 padding 값마큼 요소의 크기가 커짐, box-sizing: border-box; 옵션을 추가하면 크기가 커지지 않도록 작성이 됨(content-box)
.box{ padding: 10px 20px 30px 40px;/*위 우 아래 좌*/ padding: 10px 20px 40px;/*위 [좌,우] 아래*/
padding: 10px 40px;/*[위,아래] [좌,우]*/
padding: 10px ;/*[위,아래,좌,우]*/
}
border - 요소의 '테두리 선'을 지정, 단축속성
.box{ border: 1px solid red; /*두께 종류 색상*/ }
border-width - 선의 두께or너비이고 기본값은 medium, 개별 속성인데 단축속성이기도 하다
medium 중간 두께
thin 얇은 두께
thick 두꺼운 구께
단위 px, em, cm등 단위로 지정
.box{ border-width: 10px 20px 30px 40px;/*위 우 아래 좌*/ border-width: 10px 20px 40px;/*위 [좌,우] 아래*/
border-width: 10px 40px;/*[위,아래] [좌,우]*/
border-width: 10px ;/*[위,아래,좌,우]*/
}
border-style - 선의 종류이고 기본값은 none, 개별 속성인데 단축속성이기도 하다
none 선없음
hidden 선없음과 동일(table 요소에서 사용)
solid 실선(일반선)
dotted 점선
dashed 파선
double 두줄선
groove 홈이 파여있는 모양(선)
ridge 솟은 모양(선, groove의 반대)
inset 요소 전체가 들어간 모양(선)
outset 요소 전체가 나온 모양(선)
.box{ border-style: solid dotted double inset;/*위 우 아래 좌*/ border-style: solid dotted inset;/*위 [좌,우] 아래*/ border-style: solid inset;/*[위,아래] [좌,우]*/ border-style: solid;/*[위,아래,좌,우]*/ }
border-color - 선의 색상이고 기본값은 black, transparent는 투명한 선(요소의 배경색이 보임), 개별 속성인데 단축속성이기도 하다
border는 이런식으로 개별 속성이 쓰임
border-top 위쪽 선 두께 종류 새상
border-top-width 위쪽 선의 두께 두께
border-top-style 위쪽 선의 종류 종류
border-top-color 위쪽 선의 색상 색상
box-sizing - 요소의 크기 계산 기준을 지정
content-box - 너비(width, height)만으로 요소의 크기를 계산, 기본값이 content-box이다
border-box - 너비(width, height)에 안쪽 여백(padding)과 테두리선(border)를 포함하여 요소의 크기를 계산
display - 요소의 박스 타입(유형)을 설정
block 블록요소
inline 인라인요소
inline-block 인라인-블록 요소(가로 세로 마진 패딩의 위아래 값 사용가능)
기타 table, table-cell, flex
none 요소의 박스 타입이 없음
overflow - 요소의 크기 이상으로 내용이 넘쳤을때, 내용의 보여짐을 제어
visible 넘친 부분을 자르지 않고 그대로 보여줌
hidden 넘친 부분을 잘라내고, 보이지 않도록 함
scroll 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함(무조건 나옴)
auto 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함(넘치면 나옴)
opacity - 요소의 투명도를 지정, 기본값은 1이고 0부터 1사이의 소수점 숫자를 넣는다. 0.5 = .5로도 표현이 가능하다
CSS / 속성 - 글꼴, 문자
font - 글자 관련 속성들을 지정, 기울기 두께 크기 / 줄높이 글꼴; 크기 줄높이의 순서가 굉장히 중요하다. 단축 속성을 사용하려면 font-size와 font-family를 필수로 입력해야 한다.
.box{ font: italic bold 20px / 1.5 "arial" }
font-style 글자 기울기 지정 normal
font-weight 글자 두께 지정 normal
font-size 글자 크기 지정 medium(16px)
line-height 줄 높이(줄 간격)지정 normal(reset.css 적용시 1)
font-family 글꼴(서체)지정 운영체제(브라우저)에 따라 달라짐
font-style - 글자 스타일(기울기)을 지정
normal 스타일없음 기본값
italic 이텔릭체
oblique 기울어진 글자
font-weight - 글자의 두께(가중치)를 지정
normal 기본 글자 두께, 400과 동일
bold 두껍게, 700과 동일
bolder 부모(상위) 요소보다 더 두껍게(bold보다 두껍다는 개념이 아님)
lighter 부모(상위) 요소보다 더 얇게
숫자 100부터 900까지의 100단위의 숫자 9개, normal과 bold이외의 두께를 제공하는 글꼴(서체)을 위한 설정
두께의 이름 100 Thin(Hariline)
200 Extra Light(Ultra Light)
300 Light
400 Normal
500 Medium
600 Semi Bold(Demi Bold)
700 Bold
800 Extra Bold(Ultra Bold)
900 Black(Heavy)
상대적 두께 상속값 bolder lighter
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700
숫자 값과 두께의 불일치 - 글꼴(서체)의 정확한 두께를 숫자로 표현할 수 없는 경우
1. 400이 주어지면 500을 사용하고, 500이 불가하면 500미만의 다른 두께 사용
2. 500이 주어지면 400을 사용하고, 400이 불가하면 400미만의 다른 두께 사용
3. 400미만 값이 주어지면, 가장 가까운 숫자의 얇은 두께 사용
4. 500초과 값이 주어지면, 가장 가까운 숫자의 두꺼운 두께 사용
font-size - 글자의 크기를 지정
단위 px, em, cm등 단위로 지정 16px
% 부모(상위)요소의 비율로 지정
xx-small 가장 작은 크기
x-small 더 작은 크기
small 작은 크기
medium 중간 크기
large 큰 크기
x-large 더 큰 크기
xx-large 가장 큰 크기
smaller 부모(상위) 요소보다 작은 크기
larger 부모(상위) 요소보다 큰 크기
line-height - 줄 높이(줄 간격) 지정
값 의미
normal 브라우저의 기본 정의를 사용(1~1.4)
숫자 요소 자체 글꼴 크기의 배수로 지정
단위 px, em, cm등 단위로 지정
% 요소 자체 글꼴 크기의 비율로 지정
font-family - 글꼴(서체) 지정
글꼴 이름 글꼴(서체)후보 목록을 지정
serif 글꼴 계열 이름을 지정
sans-serif
monospace
cursive
fantasy
font-family: [글꼴후보1, 글꼴후보2.....], 글꼴계열;
.box{ font-family: Arial, "Open Sans", "돋움", dotum, sans-serif; }
color - 문자의 색상을 지정
색상 문자의 색상을 지정 rgb(0, 0, 0)
색상 표현
표현 의미 예시
색상이름 브라우저에서 제공하는 색상의 이름 red, blue
Hex 색상코드 16 진수 색상 #000000
RGB 빛의 삼원색 rgb(255, 255, 255)
RGBA 빛의 삼원색, 투명도 rgba(255, 0, 0, .5)
HSL 색상, 채도, 명도 hsl(120, 100%, 50%)
HSLA 색상, 채도, 명도, 투명도 hsla(120, 100%, 50%, .3)
text-align - 문자 정렬 방식을 지정
left 왼쪽 정렬
right 오른쪽 정렬
center 가운데 정렬
justify 양쪽 맞춤(2줄 이상)
text-indent - 들여쓰기를 지정(-로 반대 방향을 지정)
text-decoration - 문자의 장식(line)을 설정
none 선없음 none
underline 밑줄을 지정
overline 윗줄을 지정
line-through 중앙 선을 지정
letter-spacing - 문자의 자간(글자 사이간격)을 설정
normal 단어 사이의 일반 간격 normal
단위 px, em, cm등 단위로 지정
word-spacing - 단어사이(띄어쓰기)의 간격을 설정
normal 단어 사이의 일반 간격 normal
단위 px, em, cm등 단위로 지정
CSS / 속성 - 띄움(정렬), 위치
float - 요소를 좌우 방향으로 띄움(수평 정렬)
none 요소 띄움 없음 none
left 왼쪽으로 띄움
right 오른쪽으로 띄움(오른쪽 부터 쌓기 시작하는 개념 순서가 바뀔거임)
float 해제 - float속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 '해제'해야함
1. 형제요소에 clear: (left, right, both)추가하여 해제 단점은 다음 요소가 있어야만 적용이 가능함
<div class="float-left"></div> <div class="float-left"></div> <div class="next"></div>
.float-left { width: 100px; height: 100px; background: red; float: left; } .next{ clear: both; }
2. 부모요소에 overflow: (hidden, auto) 추가하여 해제 단점은 overflow는 float랑 상관없는 속성이므로 편법임
<div class="parent"> <div class="child"></div> <div class="child"></div> </div>
.parent{ overflow: hidden; /* or `auto` */ } .child{ clear: both; }
3. 부모요소에 clearfix 클래스 추가하여 해제(추천)
<div class="parent clearfix"> <div class="child"></div> <div class="child"></div> </div>
.clearfix::after{ content: ""; clear: both; display: block; } .child{ float: left; }
display 수정 - float속성이 추가된 요소는 display속성의 값이 대부분 block으로 수정됨(flex빼고 )
clear - float속성이 적용되지 않도록 지정(해제)
none 요소 띄움 허용
left 왼쪽 띄움 해제
right 오른쪽 띄움 해제
both 양쪽(왼쪽, 오른쪽) 모두 띄움 해제
position - 요소의 위치 지정 방법의 유형(기준)을 설정
static 유형(기준)없음 / 배치 불가능 static
relative 요소 자신을 기준으로 배치
absolute 위치 상 부모 요소를 기준으로 배치(position:~~~가 위치상 부모요소임)
fixed 브라우저(뷰포트)를 기준으로 배치
sticky 스크롤 영역 기준으로 배치 top, bottom, left, right가 한개는 있어야 하고 IE지원 불가이다
top - 요소의 position기준에 맞는 위쪽에서의 거리(위치)를 설정
auto 브라우저가 계산 auto
단위 px, em, cm등 단위로 지정 0
% 부모(위치 상의 부모(조상)) 요소의 세로너비의 비율로 지정, 음수 값 허용
bottom - 요소의 position기준에 맞는 아래쪽에서의 거리(위치)를 설정
auto 브라우저가 계산 auto
단위 px, em, cm등 단위로 지정 0
% 부모(위치 상의 부모(조상)) 요소의 세로너비의 비율로 지정, 음수 값 허용
left - 요소의 position기준에 맞는 왼쪽에서의 거리(위치)를 설정
auto 브라우저가 계산 auto
단위 px, em, cm등 단위로 지정 0
% 부모(위치 상의 부모(조상)) 요소의 세로너비의 비율로 지정, 음수 값 허용
right - 요소의 position기준에 맞는 오른쪽에서의 거리(위치)를 설정
auto 브라우저가 계산 auto
단위 px, em, cm등 단위로 지정 0
% 부모(위치 상의 부모(조상)) 요소의 세로너비의 비율로 지정, 음수 값 허용
요소 쌓임 순서(Stack order) - 요소가 쌓ㅇ여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정(Z축)
1. static을 제외한 position속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)
2. position이 모두 존재한다면 z-index속성의 숫자 값이 높을 수록 위에 쌓임
3. position속성의 값이 있고, z-index속성의 숫자 값이 같다면, 'HTML'의 마지막 코드일 수록 위에 쌓임(나중에 작성한 코드(요소))
display 수정 - absolute, fixed속성 값이 적용된 요소는 display속성의 값이 대부분 block으로 수정됨
댓글
댓글 쓰기