9. CSS 레이아웃

CSS 포지셔닝과 주요 속성들

1. CSS 포지셔닝
   • 브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할지를 결정하는 것
2. box-sizing
   • content-box : 기본값, 내용물 기준, 내부 여백, 경계선 → 전체 크기가 증가
   • border-box : 경계선 기준, 내부 여백, 경계선 → 크기 X → 내용물의 크기가 감소
3. float
   • left : 왼쪽 배치
   • right : 오른쪽 배치
   • none
   참고) 작업할 땐 float 안 쓰고 flexbox 많이 쓴다.
4. clear
   • float : 적용 속성을 제거
   • left : float:left 적용 제거
   • right : float:right 적용 제거
   • both : float:left, float:right 모두 제거
   • 공간이 있는 요소(block, inline-block)에서만 적용 가능
   • 가상 클래스 선택자 ::after
5. position
   • static : 기본값
   • 상대적인 배치
   • relative : 현재 요소의 위치(왼쪽 상단)
   • absolute
     • 문서 왼쪽 상단
     • 상위 요소에 상대 배치 속성(relative, absolute, fixed)이 적용된 경우, 상위 요소의 왼쪽 상단이 배치 기준
   • fixed : 뷰포트가 배치의 기준 / 뷰포트(viewport) : 화면에서 보이는 부분
     • left : 왼쪽 → 오른쪽 배치
     • right : 오른쪽 → 왼쪽 배치
     • top : 위 → 아래 배치
     • bottom : 아래 → 위로 배치
6. visibilityhidden - 감추기(영역을 유지)display: none; → 감추기(영역 X = 영역 사라짐)
7. 참고)
8. visible - 기본값 : 보임
9. z-index
   • 상대 배치에서 적용 가능(position - relative, absolute, fixed)
   • 층위
   • 숫자가 높을수록 앞쪽에 배치, 숫자가 낮을 수록 뒤에 배치

다단으로 편집하기

1. column-width
   • 컬럼 너비
2. column-count
   • 나눠질 단수
3. column-gap
   • 컬럼 사이 여백