[CSS] 배치(position), Flex 박스(flex) + @

배치

position

static

; 기준 없음, 기본값

relative

; 요소 자신의 원래 위치를 기준으로 배치. 배치 전 자리는 비게 됨

- 배치를 위한 용도보다는, 보통 position:absolute의 구조상의 부모요소에 위치 상의 부모요소가 될 수 있도록 부여

 

absolute

; 위치 상 부모 요소(상위 요소 中relative인 요소)를 기준으로 배치

- 상위 요소로 쭉 올라가서, position:relative인 요소를 기준으로 배치함. 없다면 루트 요소인 viewport를 기준으로 배치

- 보통, 부모 요소에 position:relative를 두고, 자식요소에 position:absolute를 둬 배치

- display:block으로 변경됨

 

fixed

; 뷰포트(브라우저)를 기준으로 배치

- display:block으로 변경됨

 

top, bottom, left, right, z-index

; position과 같이 사용하는 CSS 속성들! 모두 음수 사용 가능

 

요소 쌓임 순서

; 어떤 요소가 위에 쌓이는지 결정

1순위) 요소에 position속성의 값이 있는 경우(relative, absolute, fixed)

2순위) z-index속성(기본값=0)의 숫자 값이 높을 수록 위에 쌓임

3순위) HTML의 다음 구조일 수록 위에 쌓임

 

 

Flex 박스

; 1차원 레이아웃. 좌->우 / 상->하로 배치할 때 사용

Flex Container

display ; display : flex라는 속성을 부여함으로써 Flex Container 지정 

flex-direction ; 주 축을 설정. row (행 축 ; 좌->우, 기본값), row-reverse (행 축 ; 우->좌), column (열 축 ; 상->하), column-reverse (열 축 ; 하->상)

flex-wrap ; Flex Items 묶음(줄 바꿈) 여부. nowrap(묶음 없음, 기본값), wrap(여러 줄로 묶음)

justify-content ; 주(수평) 축의 정렬 방법. flex-start(Flex Items를 시작점으로 정렬, 기본값), flex-end(Flex Items를 끝점으로 정렬), center(Flex Items를 가운데 정렬)

align-content ; 교차(수직) 축의 여러 줄 정렬 방법. stretch(Flex Items를 시작점으로 정렬, 최대한 늘림, 기본값), flex-start(Flex Items를 시작점으로 정렬, 기본값), flex-end(Flex Items를 끝점으로 정렬), center(Flex Items를 가운데 정렬)

- align-content의 경우, 줄 바꿈 상태여야 하고(flex-wrap:wrap 있어야함), 2줄 이상일 때만 동작

align-items ; 교차(수직) 축의 한 줄 정렬 방법. stretch(Flex Items를 시작점으로 정렬, 최대한 늘림, 기본값), flex-start(Flex Items를 시작점으로 정렬, 기본값), flex-end(Flex Items를 끝점으로 정렬), center(Flex Items를 가운데 정렬)

 

 

Flex Items

; Flex Container의 자식 요소

order ; Flex Item의 순서. 0(순서 없음), 숫자(숫자가 작을수록 먼저 정렬)

flex-grow ; Flex Item의 증가 너비 비율. 0(증가 비율 없음), 숫자(증가 비율)

ex) flex-grow ; 1,0,0일 경우 빈 공간을 1인 것이 다 채움 / 0,2,1 ; 빈 공간을 2:1비율로 2,1이 나누어 채움

flex-shrink ; Flex Item의 감소 너비 비율. 1(Flex container 너비에 따라 감소 비율 적용), 숫자(감소 비율)

ex) flex-shrink : 0 ; 부모의 요소의 너비가 줄어듬에 따라 너비가 안줄어들고 실제 크기 유지

flex-basis ; Flex Item의 공간 배분 전 기본(content) 너비. auto(요소의 content 너비), 단위

ex) flex-basis : auto일 경우, content제외 한 부분의 비율로 flex-grow를 따짐. flex-basis: : 0일경우 전체 크기로 비율을 따짐

 

---

 

overflow

; 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

visible ; 넘친 내용을 그대로 보여줌

hidden ; 넘친 내용을 잘라냄

auto ; 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

- overflow-x, overflow-y로 x축, y축만 각각 설정 가능

 

 

display

; 요소의 화면 출력 특성

block ; 상자(레이아웃) 요소

inline ; 글자 요소

inline-block ; 글자 + 상자 요소

flex ; 플렉스 박스 (1차원 레이아웃)

grid ; 그리드 (2차원 레이아웃)

none ; 보여짐 특성 없음, 화면에서 사라짐

기타 ; table, table-row, table-cell 등

 

 

opacity

; 요소 투명도

1 ; 불투명

0~1 ; 0부터 1사이의 소수점 숫자