[HTML, CSS] - CSS 레이아웃

Language - [Front]/HTML & CSS

[HTML, CSS] - CSS 레이아웃

구구르밍 2023. 11. 23. 17:51

레이아웃

다중 칼럼(multi-column) 레이아웃

다중 칼럼 속성

columns

모든 columns 속성을 이용한 스타일을 한 줄에 설정 가능

column-count

해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정

<style>
    #origin { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
</style>

column-gap

칼럼(column) 사이의 간격을 설정

<style>
    #gap { -webkit-column-gap: 70px; -moz-column-gap: 70px; column-gap: 70px; }
</style>

column-width

칼럼의 너비를 설정

웹 브라우저는 설정한 너비의 칼럼을 만든 후, 나머지 영역을 동일하게 나누어 칼럼 사이의 간격으로 자동 설정

<style>
    #gap { -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; }
</style>

column-span

해당 요소가 몇 개의 칼럼을 병합하여 표현할지를 설정

<style>
    #merge { -webkit-column-span: all; column-span: all; }
</style>

column-fill

칼럼을 어떻게 채울지 설정

column-rule

모든 columns-rule 속성을 이용한 스타일을 한 줄에 설정

<style>
    #line {
        -webkit-column-rule: 5px solid #6495ED;
        -moz-column-rule: 5px solid #6495ED;
        column-rule: 5px solid #6495ED;
    }
</style>

column-rule-style

칼럼 사이에 들어갈 라인의 스타일을 설정

<style>
    #line { -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; }
</style>

column-rule-width

칼럼 사이에 들어갈 라인의 두께를 설정

<style>
    #line {
        -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid;
        -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px;
    }
</style>

column-rule-color

칼럼 사이에 들어갈 라인의 색상을 설정

<style>
    #line {
        -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid;
        -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px;
        -webkit-column-rule-color: #6495ED; -moz-column-rule-color: #6495ED; column-rule-color: #6495ED;
    }
</style>

플렉서블 박스(flexible box) 레이아웃

= 플렉스 박스(flex box)

플렉스 박스(flex box)는 플렉스 컨테이너(flex container)와 플렉스 요소(flex item)로 구성

서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬

웹 페이지의 레이아웃을 언제나 똑같이 유지

플렉스 컨테이너의 외부와 플렉스 요소의 내부의 모든 것들은 평소처럼 동작

플렉스 박스(flex box)는 오직 플렉스 요소가 플렉스 컨테이너의 내부에서 어떻게 위치하는가만을 정의

플렉스 컨테이너

해당 HTML 요소의 display 속성을 설정

해당 요소를 블록 타입으로 정의하려면 display 속성값을 flex로, 인라인 타입으로 정의하려면 inline-flex로 설정

플렉스 컨테이너는 언제나 하나 이상의 플렉스 요소를 포함

플렉스 요소

플렉스 컨테이너 안에서 플렉스 라인(flex line)이라는 가상의 선을 따라 위치

기본적으로 하나의 플렉스 컨테이너는 오직 단 하나의 플렉스 라인만을 가짐

direction 속성

플렉스 라인(flex line)의 방향 전환

ex) direction 속성값 rtl(right-to-left)

페이지 내의 모든 텍스트 요소는 오른쪽에서 왼쪽 방향으로 작성

그와 동시에 플렉스 라인(flex line)의 방향도 바뀌게 되어, 플렉스 요소의 정렬도 오른쪽에서 왼쪽

플렉스 박스 속성

display

HTML 요소에 대한 박스의 타입을 명시

flex-direction

플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향을 설정

속성 값

row : 기본 설정, 플렉스 요소는 왼쪽에서 오른쪽으로, 그리고 위쪽에서 아래쪽으로 배치

row-reverse : 만약 direction 속성값이 ltr(left-to-right)이면, 플렉스 요소는 반대로 오른쪽에서 왼쪽으로 배치

column : 만약 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 위쪽에서 아래쪽으로 배치

column-reverse : 만약 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 아래쪽에서 위쪽으로 배치

justify-content

플렉스 요소의 수평 방향 정렬 방식을 설정

속성 값

flex-start : 기본 설정, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치

flex-end : 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치

center : 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치

space-between : 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치

space-around : 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치

align-items

플렉스 요소의 수직 방향 정렬 방식을 설정

두 줄 이상을 가지는 플렉스 박스에서만 효과 있음

속성 값

stretch : 기본 설정, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치

flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치

flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치

center : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치

baseline : 플렉스 요소는 플렉스 컨테이너의 기준선(baseline)에 배치

flex-wrap

플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지를 설정

속성 값

nowrap : 기본 설정, 플렉스 요소가 다음 줄로 넘어가지 않고 플렉스 요소의 너비를 줄여서 한 줄에 모두 배치

wrap : 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치

wrap-reverse : 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치됩니다. 단, 아래쪽이 아닌 위쪽으로 넘어감

flex-flow

flex-direction 속성과 flex-wrap 속성을 이용한 스타일을 한 줄에 설정

align-content

flex-wrap 속성의 동작을 변경할 수 있음

align-items 속성과 비슷한 동작을 하지만, 플렉스 요소를 정렬하는 대신에 플렉스 라인을 정렬

속성 값

stretch : 기본 설정, 플렉스 라인의 높이가 남는 공간을 전부 차지

flex-start : 플렉스 라인은 플렉스 컨테이너의 앞쪽에 뭉침

flex-end : 플렉스 라인은 플렉스 컨테이너의 뒤쪽에 뭉침

center : 플렉스 라인은 플렉스 컨테이너의 가운데에 뭉침

space-between : 플렉스 라인은 플렉스 컨테이너에 고르게 분포

space-around : 플렉스 라인은 플렉스 컨테이너에 고르게 분포. 단, 양쪽 끝에 약간의 공간을 남겨둠

플렉스 요소 속성

order

플렉스 컨테이너 안에 있는 플렉스 요소들의 순서를 설정

margin

속성값을 auto로 설정시 수평 방향의 여유 공간을 없앨 수 있음

렉스 요소들을 서로 반대 방향으로 밀어내거나 수직과 수평 방향의 가운데 정렬을 손쉽게 설정 가능

align-self

플렉스 요소마다 서로 다른 align 속성값을 설정

align-self 속성은 플렉스 컨테이너의 align-items 속성보다 우선 적용

flex

같은 플렉스 컨테이너 안에 있는 플렉스 요소의 너비를 상대적으로 설정

https://www.tcpschool.com/css/css3_expand_flexbox

https://www.tcpschool.com/css/css3_expand_multicolumn