7/15 - 모각소 2주차

하현수·2022년 7월 15일
0

1. 선택자 정리

1-1. 자식

.div1 i { color: red;}
→ div1 클래스 내 요소의 자식 중 모든 <'i> 태그


1-2. 직속 자식

.div > 1 { color: red; }
→ div 1의 바로 직속 <'i> 태그

(<'p> 안에 있는 <'i>는 해당X)


1-3. 복수 선택

.two, .four { color: red; }


1-4. 여러 조건

.outside.one { color: red; }
→ outside 클래스를 갖고 있으면서 one클래스도 같이 가지고 있는 태그


1-5. 가상 클래스 (Pseudo-class)

콜론(:) 을 사용하면 몇 가지 가상 클래스를 선택할 수 있다.

.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> 태그


1-6. 마우스오버

h1:hover { color: red };
→ 마우스가 <'h1> 태그에 올라갔을 때 색 변환


2. CSS 상속

2-1. 상속되는 속성

  1. color
  2. font-family
  3. font-size
  4. font-weight ..

<'a> 태그의 경우 color가 상속되지 않는데 억지로 상속을 하고 싶다면

.div1 a { color: inherit;}

inherit 값을 쓰면 됩니다!


3. 순서

완전 똑같은 선택자가 나중에 또 나오면, 나중에 나온 선택자가 이전 선택자를 덮어쓰게 됩니다!

3-1. 명시도

같은 요소를 가리키지만 선택자가 다르다면 명시도에 따라 우선 순위가 결정

명시도 계산 방법
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점)이 적용!

4. CSS의 다양한 단위들

4-1. px

절대적인 값 → 다른 요소의 값에 영향을 받지 않음

4-2. rem

상대적인 값 → 오직 <'html>태그의 <'font-size>에만 영향을 받는다
2rem은 html 태그 내 font-size의 2배 크기이다

4-3. em

상대적인 값 → 자기 자신의 font-size를 기준으로 한다
2em은 자기자신의 font-size의 2배 → 자기 자신의 font-size를 따로 정해주지 않을 경우, 상위 요소에서 상속받은 값을 기준으로 한다

4-4. %

상대적인 값
font-size에서 %가 쓰일 경우 → 상위 요소의 font-size에 곱해주는 방식
margin이나 padding 단위로 사용되는 경우 → 상위 요소의 width를 기준으로 계산

margin-top이나 padding-bottom과 같은 세로 속성을 조절할 때에도 상위요소의 width를 기준으로 계산 (height로 계산되지 않는다)


5. display

1. inline display

→ 같은 줄에 머무르려고 한다. 필요한 만큼의 가로 길이만 차지
(→ 가로세로 길이 개념 없음 / 가로세로를 지정해둬도 auto로 설정된다)
(→ inline-block은 inline 성향(같은 줄에 머무르려고 한다)을 가지고 있으면서 가로세로가 지정된다.)

2. block display

→ 다른 요소들과 독단적인 줄에 가려고 하는 성향. 최대한 많은 가로 길이를 차지하는 경향

3. display 바꾸기

display: block(or inline);


6. 가운데 정렬

6-1. 가로 가운데 정렬

inline / inline-block → 부모 태그에 text-aling: center;
block → margin-left: auto; margin-right: auto;


7. 소감

HTML/CSS 핵심개념에 대해 공부했다. 특히 기본이 되는 display에 대해서 공부했다. 보다 예쁘고 다양하게 디자인하기 위해서 반드시 숙지해야하는 개념인 것 같다. 점점 헷갈리기 시작하는데 잘 숙지해서 오류가 나지않도록 할 것이다.

profile
현수의 웹 TIL입니다!

0개의 댓글