[프론트엔드] CSS 4

CSS Position
요소의 위치를 결정하는 방식을 설정

1. 정적(static) 위치 지정방식
기본값
- HTML 요소의 위치를 결정하는 기본적인 방식
- top, left, right, bottom 속성값을 사용할 수 없음
- 단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식

2. 상대(relative) 위치 지정방식
- HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식
- 기본 위치는 정적위치 지정방식일 때 결정되는 위치를 의미

3. 고정(fixed) 위치 지정방식
- 뷰포트를 기준으로 위치를 설정하는 방식
- 웹 페이지가 스크롤되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치

*뷰포트
가상의 화면
- 화면 디스플레이 상의 표시 영역을 뜻한다. 
- 모바일 뷰포트는 상하 좌우로 스크롤을 움직이거나 줌인, 줌아웃을 통해 뷰포트를 변경하며 사용

4. 절대(absolute) 위치 지정방식
- 뷰포트를 기준으로 위치를 설정하는 방식
- 조상요소를 기준으로 위치를 지정할 수 있음(위치가 설정된 조상요소)
- 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 결정한다. 

위치가 설정된 조상요소
정적 위치 지정방식을 제외한 방식(상대, 고정, 절대)로 위치가 설정된 조상요소를 의미

z-index
- HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 겹칠 수 있음
- 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 사용
- 순서는 음수, 양수 모두 사용할 수 있음

float
- HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만들어줌 
- float를 적용받은 요소의 다음 요소들이 끌어올려짐
- float를 적용받은 요소의 방향을 결정(left, right)
- 컨텐츠 크기만큼만 영역을 설정
- float를 적용받은 요소는 다른 요소보다 위쪽에 위치

clear
- float  속성이 적용된 이후 나타나는 요소들의 동작을 조절
- float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 어려움
- clear 속성을 사용하여 이후에 등장하는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정(left, right, both)

다단 레이아웃
- 텍스트 단을 column 속성으로 다단을 생성
- 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미

column-count : 단의 개수를 설정
column-rule : 단과 단 사이의 구분선, 구분의 모양, 두께, 색상을 설정
column-gap : 단과 단 사이의 여백을 설정
column-span : 단과 안의 포함된 요소를 다단편집에서 해제

 

* 플렉서블 레이아웃(flex)
- 대부분의 웹사이트는 수직 구성
- 레이아웃 구성할 때 가장 많이 사용하는 요소들이 대부분 블록개념으로 표기
- 수직구성은 쉽게 구성할 수 있으나, 수평 구성은 구현하기 쉽지 않음 - 정렬
- 과거에는 수평구성을 <table>, float, inline-block으로 구성
- 좀 더 쉽게 수평구성을 구현하기 위해서 flex를 사용한다. 
display:flex;

* justify-content
플렉스 요소의 수평방향 정렬방식을 설정

- flex-start : 기본설정, 앞쪽에서부터 배치됨
- flex-end : 뒤쪽에서부터 배치됨
- center : 가운데에 배치됨
- space-between : 요소들 사이에 여유 공간을 두고 배치됨
- space-around : 앞, 뒤 그리고 요소들 사이에 모두 여유 공간을 두고 배치됨
- space-evenly : 앞, 뒤 그리고 요소들 사이의 공간으 모두 일정하게 두고 배치됨

flex-wrap
플렉스 라인에 더이상 여유가 없을 때 플렉스 요소의 위치를 다음줄로 넘길지 여부를 설정

- nowrap : 기본설정, 플렉스 요소가 다음줄로 넘어가지 않음, 요소의 너비를 줄여 한 줄에 모두 배치
- wrap : 플렉스 요소가 여유 공간이 없으면 다음줄로 넘김
- wrap-reverse : 플렉스 요소가 여유 공간이 없으면 다음줄로 넘김, 단 위쪽으로 넘김