position
- position은 문서 상에 요소를 배치하는 방법을 정의한다
- position이 요소의 배치 방법을 결정하면, top, bottom, right, left가 최종 위치를 결정하는 방식이다
position: 나는 이렇게 배치할 거다; top: 윗면에서부터 얼만큼 떨어뜨릴 거다; right: 오른쪽면에서부터 얼만큼 떨어뜨릴 거다; bottom: 아랫면에서부터 얼만큼 떨어뜨릴 거다; left: 왼쪽면에서부터 얼만큼 떨어뜨릴 거다;=> 상하좌우 위치 지정은 필요에 따라 선택적으로 사용
position 속성값
| 속성값 | 의미 |
|---|---|
| static | 기본값, 요소를 일반적인 문서 흐름에 따라 배치한다 |
| relative | 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋을 적용한다 |
| absolute | 일반적인 문서 흐름에서 제거하고, 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용한다 |
| fixed | 일반적인 문서 흐름에서 제거하고, 지정한 위치에 고정된다 |
| sticky | 일반적인 문서 흐름에서 제거하고, 스크롤 동작이 존재하는 가장 가까운 요소에 대해 오프셋을 적용한다 |
flexbox
- flexbox란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다
- flexbox를 1차원 모델이라고 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 특성 때문이다
- flexbox에는 '주축(main-axus)'과 '교차축(cross-axis)'이 있다
flex-direction
- flex-direction 속성은 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다
| 속성값 | 의미 |
|---|---|
| row | 기본값, 주축은 행이고 방향은 콘텐츠의 방향과 동일 |
| row-reverse | 주축은 행이고 방향은 콘텐츠의 방향과 반대 |
| column | 주축은 열이고 방향은 콘텐츠의 방향과 동일 |
| column-reverse | 주축은 열이고 방향은 콘텐츠의 방향과 반대 |
flexbox 다루기
flexbox를 다루기 위해 다음과 같은 속성들을 사용할 수 있다
- 주축 배치 방법: justify-content
- 교차축 배치 방법: align-items
- 교차축 개별요소 배치 방법: align-self
- 줄 바꿈 여부: flex-wrap
