[CS] CSS Day-14
CSS를 통해 콘텐츠를 원하는 위치에 배치하는 것을 넘어, 화면 설계의 기본을 알아보는 시간.
CSS를 잘하기 위해서는 #과 . 의 차이를 이해해야하고, 절대 단위와 상대 단위를 구분할 수 있어야 합니다.
id를 선택할 때는 #을 사용하고
class를 선택할 때는 . 을 사용한다.
Flexbox의 속성 이해
- flex-direction : 방향
- flex-grow : 얼마나 늘릴지
- flex-basis : 얼만큼의 크기를 가지는지
- justify-content : 수평 정렬
- 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)
Author And Source
이 문제에 관하여([CS] CSS Day-14), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cptkuk91/CS23저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)