CSS[TIL-13]

1. css의 접근 방법

노드 접근에 대해 고민해 보기!

* {} -> 전체 셀렉터

h1, p, span ...{} -> 태그 셀렉터

#아이디명 {} -> id 셀렉터

.클래스명 {} -> class 셀렉터

header h1 {} -> 자손 셀렉터(첫번재 요소의 자손인 노드를 모두 선택)
예)header은 안에 위치하는 모든 h1 요소와 일치

ul > li {} -> 자식 셀렉터(첫 번째 요소의 바로 아래 자식인 노드를 선택)
예)ul 요소 바로 아래에 위치하는 모든 li 요소와 일치
        
p ~ span {} -> 일반 형제 결합자(같은 부모를 공유하는 두 번째 요소를 선택)
예)p 요소를 뒤따르는 모든 span 요소와 일치

p + span {} -> 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택
예)p 요소 바로 뒤에 위치하는 span 요소와 일치
        
p:first-child{} -> 형제 요소 중 제일 첫 요소를 나타냄
예)
<div>
  <p>This text is selected!</p> -> **해당 줄 선택!
  <p>This text isn't selected.</p>
</div>

p:first-of-type -> 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소
예)
<h2>Heading</h2>
<p>Paragraph 1</p> -> **해당 줄 선택!
<p>Paragraph 2</p>

p:last-child{} -> 형제 요소 중 제일 마지막 요소를 나타냄
예)
<div>
  <p>This text is selected!</p> 
  <p>This text isn't selected.</p> -> **해당 줄 선택!
</div>

p:last-of-type -> 형제 요소 중 자신의 유형과 일치하는 제일 마지막 요소
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p> -> **해당 줄 선택!

li:nth-child(2n) -> 형제의 목록에서 선택하려는 요소의 인덱스 패턴을 나타내는 하나의 매개변수를 사용해 지정
예)
<ul>
  <li>This text is selected!</li> 
  <li>This text isn't selected.</li> -> **해당 줄 선택!
</ul>

2. flexbox로 레이아웃 잡기

부모 박스요소에 display:flex를 적용해
자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법

flex-direction : row(기본값) -> 수직으로 분할
flex-direction : colunm -> 수평으로 분할
* 부모 박스요소에 설정하기!

flex : <grow : 팽창 지수> <shrink : 수축 지수> <basis : 기본 크기>
flex: 0 1 auto;(기본값)
세가지의 기본 크기를 바탕으로 필요에 따라 늘리거나 줄일 수 있음

3. 정리

css를 조금 쉽게 생각했던게 오산이었다. 크기조정이나 배치가 쉽지 않았고 색상의 조화를 찾기가 어려웠다. 노드를 통한 접근의 이론이 확립이 되지 않아 체크포인트의 문제를 많이도 틀렸다. 접근방법에 대해 더 많은 시간이 필요할 것 같다. 이후 기본적인 이론학습 이후 Twittler 목업 구현을 페어와 함께 진행하였다. 다른 사람들처럼 완성도가 높거나 하진 않지만 조금씩 나아질 거라 생각하고 협업을 통해 기본적인 틀을 만들어 나가는 부분이 꽤나 재미있었다.