CSS Selector

CSS 박스모델이란?

• margin: 바깥 여백
• border: 테두리
• padding: 안쪽 여백
• width: 박스의 가로크기
• height: 박스의 세로 크기
• background: 박스의 배경
• box-sizing: 박스의 크기 기준

절대단위 & 상대단위

• 절대단위(absolute): px, pt
• 상대단위(relative): em, rem, %, vw,vh
em과 rem은 CSS의 font-size속성값에 비례해서 결정되는 단위이다.
  ex) font-size: 16px;인 경우

• 0.5em = 16px * 0.5 = 8px
• 1em = 16px * 1 = 16px
  font-size를 20px로 늘릴 경우, 상대 단위도 비례해서 증가한다.
• 0.5em = 20 px * 0.5 = 10px

em과 rem의 차이점

정확히 어디에 있는 font-size 속성값인지에 따라 차이가 발생한다.
em: 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준

• em을 사용할 때 해당 단위의 font-size 속성값이 삭제될 경우
  부모의 font-size 값을 상속받게 된다.

rem: root(최상위 요소)의 font-size 속성 값이 기준이 된다. html요소의 font-size 속성 값이 기준이 된다.

Flexbox를 이용한 레이아웃 만들기

flex: 부모 박스에 display: flex를 적용해주면 자식 박스의 방향과 크기를 결정한다.

• 방향: flex-direction (column/row)
• 크기: flex-basis flex: <grow> <shrink> <basis>
default: 0 1 auto;
  각 자식 박스가 갖는 grow의 값의 총 합이 n일 때
  shrink의 1은 1/n

.box{
flex: 1 1 auto;
}
.target{
flex: 2 1 auto;
}

• width와 flex-basis를 동시에 적용하면, flex=basis가 우선된다.
• 안쪽 박스의 콘텐츠가 넘치는 경우를 대비해 width 대신 max-width를 쓸 수 있다. (flex-basis를 사용하지 않을 경우)

정렬 (justify-content / align-items)

(1) 컨텐츠 수평 정렬(justify-content)

바깥 박스에 justify-content 속성을 이용하면, 안쪽 박스의 수평정렬을 지정할 수 있다.

• flex-start: 기본 설정, 요소는 앞쪽에서부터 배치
• flex-end: 뒤쪽에서부터 배치
• center: 가운데에서부터 배치
• space-between: 요소들 사이에만 여유 공간을 두고 배치
• space-around: 앞 뒤 요소들 사이 모두 여유공간을 두고 배치

(2) 컨텐츠 수직 정렬(align-items)
두 줄 이상을 갖는 플렉스 박스에서만 적용된다.

• stretch: 기본 설정, 요소의 높이가 바깥 박스의 높이와 같게 변경된 뒤 연이어 배치
• flex-start: 바깥 박스 위쪽에 배치
• flex-end: 바깥 박스 아래쪽에 배치
• center: 가운데에 배치
• baseline