.div1 i { color: red;}
→ div1 클래스 내 요소의 자식 중 모든 <'i> 태그
.div > 1 { color: red; }
→ div 1의 바로 직속 <'i> 태그
(<'p> 안에 있는 <'i>는 해당X)
.two, .four { color: red; }
.outside.one { color: red; }
→ outside 클래스를 갖고 있으면서 one클래스도 같이 가지고 있는 태그
콜론(:) 을 사용하면 몇 가지 가상 클래스를 선택할 수 있다.
.div1 p:nth-child(3) { color: red; }
→ div1의 자식은 <'p>태그 중 3번째
.div1 p:first-child { color: red; }
→ div1의 자식인 <'p> 태그 중 첫 번째
.div1 p:last-child { color: red; }
→ div1의 자식인 <'p> 태그 중 마지막
.div1 p:not(:last-child) { color: red; }
→ div1의 자식 중 마지막 자식이 아닌 <'p> 태그
.div1 p:not(:first-child) { color: red; }
→ div1의 자식 중 첫 번째 자식이 아닌 <'p> 태그
h1:hover { color: red };
→ 마우스가 <'h1> 태그에 올라갔을 때 색 변환
- color
- font-family
- font-size
- font-weight ..
<'a> 태그의 경우 color가 상속되지 않는데 억지로 상속을 하고 싶다면
.div1 a { color: inherit;}
inherit 값을 쓰면 됩니다!
완전 똑같은 선택자가 나중에 또 나오면, 나중에 나온 선택자가 이전 선택자를 덮어쓰게 됩니다!
같은 요소를 가리키지만 선택자가 다르다면 명시도에 따라 우선 순위가 결정
명시도 계산 방법
1. 인라인 스타일이 가장 우선 순위가 높다
2. 선택자에 id가 많을 수록 우선 순위가 높다
3. 선택자에 class, attribute, pseudo-class가 많을 수록 우선 순위가 높다
4. 그냥 요소(또는 가상 요소)가 많은 순서
ul li:frist-child a
0 / 0 / 1 / 3 → 13점
ul li:first-child #link
0 / 1 / 1 / 2 → 112점
→ 두 선택자에서 겹치는 스타일이 있는 경우, 두 번째(112점)이 적용!
절대적인 값 → 다른 요소의 값에 영향을 받지 않음
상대적인 값 → 오직 <'html>태그의 <'font-size>에만 영향을 받는다
2rem은 html 태그 내 font-size의 2배 크기이다
상대적인 값 → 자기 자신의 font-size를 기준으로 한다
2em은 자기자신의 font-size의 2배 → 자기 자신의 font-size를 따로 정해주지 않을 경우, 상위 요소에서 상속받은 값을 기준으로 한다
상대적인 값
font-size에서 %가 쓰일 경우 → 상위 요소의 font-size에 곱해주는 방식
margin이나 padding 단위로 사용되는 경우 → 상위 요소의 width를 기준으로 계산
margin-top이나 padding-bottom과 같은 세로 속성을 조절할 때에도 상위요소의 width를 기준으로 계산 (height로 계산되지 않는다)
→ 같은 줄에 머무르려고 한다. 필요한 만큼의 가로 길이만 차지
(→ 가로세로 길이 개념 없음 / 가로세로를 지정해둬도 auto로 설정된다)
(→ inline-block은 inline 성향(같은 줄에 머무르려고 한다)을 가지고 있으면서 가로세로가 지정된다.)
→ 다른 요소들과 독단적인 줄에 가려고 하는 성향. 최대한 많은 가로 길이를 차지하는 경향
display: block(or inline);
inline / inline-block → 부모 태그에 text-aling: center;
block → margin-left: auto; margin-right: auto;
HTML/CSS 핵심개념에 대해 공부했다. 특히 기본이 되는 display에 대해서 공부했다. 보다 예쁘고 다양하게 디자인하기 위해서 반드시 숙지해야하는 개념인 것 같다. 점점 헷갈리기 시작하는데 잘 숙지해서 오류가 나지않도록 할 것이다.