[CS] CSS Day-14

CSS를 통해 콘텐츠를 원하는 위치에 배치하는 것을 넘어, 화면 설계의 기본을 알아보는 시간.

CSS를 잘하기 위해서는 #과 . 의 차이를 이해해야하고, 절대 단위와 상대 단위를 구분할 수 있어야 합니다.

id를 선택할 때는 #을 사용하고

class를 선택할 때는 . 을 사용한다.

Flexbox의 속성 이해

1. flex-direction : 방향
2. flex-grow : 얼마나 늘릴지
3. flex-basis : 얼만큼의 크기를 가지는지
4. justify-content : 수평 정렬
5. align-items : 수직 정렬

기본적인 셀렉터 이해

ex) 셀렉터

h1{}
div{}

ex) 전체 셀렉터

* {}

ex) Tag 셀렉터

section, h1 {}

ex) ID 셀렉터

#only {}

ex) class 셀렉터

.widget {}
.center {}

ex) 후손 셀렉터

header h1 {}

ex) 자식 셀렉터 (후손 셀렉터와의 차이를 반드시 알아야 합니다.)

header > p {}

추가 자료

ex) a element 중, href 속성을 갖는 모든 element

a[href]{...}

ex) p element 중, id가 only인 속성을 갖는 모든 element

p[id='only']{...}

ex) div element 중, class가 center인 속성을 갖는 모든 element

div[class='center']{...}

ex) p:first-child{...}는 p element 중, 첫 번 째 자식 element를 뜻함

p:first-child{...}

ex) ul > li:last-child는 ul 자식 element 중, 마지막 자식 li element를 선택합니다.

ul > li:last-child{...}

ex) ul > li:nth-child(3){...}은 ul 자식 element 중, 세 번째 자식 element li를 선택합니다.

ul > li:nth-child(3)

ex) footer > div:first-child 는 footer의 자식 element 중, 첫 번째 자식 element div를 선택합니다.

footer > div:first-child{...}

ex) div > div:nth-child(4)는 div 자식 element 중, 4번째 자식 element를(div) 선택합니다.

div > div.nth-child(4){...}

ex) p:not(#only){...}은 p element 중, id가 only인 element를 제외하고 모두 선택합니다.

p:not(#only)