TIL 13일차

[CSS] 레이아웃, Selector

Selector

• 셀렉터 : h1{} div{}
• 전체 셀렉터 : *{}
• Tag 셀렉터 : section, h1{}
• ID 셀렉터 : #only{}
• Class 셀렉터 : .widget{} .center{}
• Attribute 셀렉터 : a[href]{} p[id="only"] p[class~="out"]{} p[class|="out"]{} section[id^="sect"]{} div[class$="2"]{} div[class*="w"]{}
• 후손 셀렉터 : header h1{}
• 자식 셀렉터 : headeer > p{}
• 인접 형제 셀렉터 : section + p{}
• 형제 셀렉터 : section ~ p{}
• 가상 클래스 : a:link{} a:visited{} a:hover{} a:active{} a:focus{}
• 요소 상태 셀렉터 : input:checked + a{} input:enabled + a{} input:disabled + a{}
• 구조 가상 클래스 셀렉터 : p:first-child{} ul > li:last-child{} ul > li:nth-child(2n){} ul > li:nth-child(2n+1){} ul > li:first-child{} div > div:nth-child(4){} \n p:first-of-type{} div:last-of-type{} ul:nth-of-type(2){} p:nth-last-of-type(1){}
• 부정 셀렉터 : input:not([type="password"]){} div:not(:nth-of-type(2)){}
• 정합성 확인 셀렉터 : input[type="text"]:valid{} input[type="text"]:invalid{}

Atomic CSS 방법론

클래스에 w10, w20, h20, h40 등으로 지정하고 .w10 { width: 10%; } .h40 { height: 40%; } 같이 클래스 이름과 구현을 1:1 로 일치시켜 아주 작은 단위로 CSS를 작성하는 방법을 말한다.

레이아웃 리셋

때론 HTML 문서가 갖는 기본 스타일이 레이아웃을 구현하는데 방해가 된다. 그럴 땐 기본 스타일링을 제거하여 디자인한대로 구현할 수 있도록 의도하여 기본 스타일을 리셋한다.
예시 : * { box-sizing: border-box; } body { margin: 0; padding: 0; }

Flex Box 로 레이아웃 잡기

flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다.

• 부모 박스 요소에 display:flex;를 적용해 자식 박스의 방향과 크기를 결정
  ㄴ 기본값: 왼쪽부터 차례로 배치(row)
• flex 요소에 방향 지정 : flexbox는 수직분할이 기본값이다. 방향을 지정하면 수평분할도 가능하다.
  ㄴ 부모 박스에 flex-direction 속성으로 변경. row(기본값), column
• 자식 요소 : flex라는 속성에 값을 적용. (flex: 0 1 auto; //기본값)
  ㄴ 자식 요소에 어떠한 속성도 주지 않으면 왼쪽부터 오른쪽으로 컨텐츠 크기만큼 배치된다.
  ㄴ grow(팽창 지수), shrink(수축 지수), basis(기본 크기) grow와 shrink는 비율을 지정하는 속성
• 우선순위 : width와 flex-basis 동시 적용시 flex-basis를 우선한다. 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않는다(flex-basis를 사용하지 않는다면). 콘텐츠가 많아 자식 박스가 넘칠 경우를 대비해 width 대신 max-width를 쓸 수 있다.
• 콘텐츠 수평정렬(justify-content) : 부모 박스에 justify-content 적용시 수평 정렬
  ㄴ flex-start, flex-end, center, space-between
• 콘텐츠 수직정렬(align-items) : 부모 박스에 align-items 적용시 수직 정렬