플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기
1차원 방식(가로 or 세로 중 한 방향으로 설계하는 방식)으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성
플렉스 박스 레이아웃은 크게 플렉스 컨테이너와 플렉스 아이템으로 구성됩니다.
구성 요소
주축(main axis) : 플렉스 박스의 진행 방향과 수평한 축
교차축(cross axis) : 주축과 수직한 축
플렉스 컨테이너(flex container) : display 속성값으로 flex난 inline-flex가 적용된 요소
플렉스 아이템(flex item) : 플렉스 컨테이너와 자식 관계를 이루는 태그 구성 요소
relative와 absolute의 역할:
- 부모에 relative:
- 부모 요소에 position: relative를 적용하면 자신의 위치를 유지하면서 자식 요소가 그 부모를 기준으로 배치될 수 있게 합니다.
- relative 속성은 요소의 위치를 변하지 않게 하면서, 자식 요소들이 그 부모를 기준으로 배치될 수 있는 기준점을 만들어 줍니다.
- 자식에 absolute:
- 자식 요소에 position: absolute를 적용하면, 해당 자식 요소는 부모 요소를 기준으로 절대적으로 배치됩니다.
- absolute 속성은 자식 요소가 부모 요소 안에서 top, right, bottom, left 값에 따라 배치되도록 해줍니다. 이때, 부모 요소에 relative 속성이 없다면 자식 요소는 **전체 페이지(뷰포트)**를 기준으로 배치됩니다.
왜 부모에 relative를 적용하는가?
- 부모 요소에 relative를 적용하지 않으면, 자식 요소는 가장 가까운 position 속성이 설정된 조상(또는 화면 전체)을 기준으로 배치됩니다. 그러나 부모를 기준으로 정확하게 배치하고 싶을 때는 부모에 relative를 적용해 자식이 그 부모를 기준으로 위치를 잡도록 합니다.
요약:
- 부모에 relative를 적용하면 자식이 부모 내부에서 배치되도록 제한할 수 있음.
- 자식에 absolute를 적용하면 자식은 부모 내부에서 절대적인 위치에 배치됨.
플렉스 박스 레이아웃의 기본 속성
display 속성
모든 플렉스 박스 레이아웃은 display 속성값을 flex나 inline-flex로 지정하는 것에서 시작합니다.
flex는 다음 요소가 항상 줄 바꿈 되고, inline-flex는 다음 요소가 주변에 배치가 됩니다.
display:flex; /* inline-flex */
플렉스 박스 레이아웃의 기본 특징은 플렉스 아이템이 수직(세로)에서 수평(가로) 방향으로 배치된다는 것
이때, 플렉스 아이템이 원래 가지고 있던 성격(인라인/인라인 블록/블록)은 무시됩니다.
flex-direction 속성
플렉스 박스 레이아웃의 주축 방향을 결정합니다.
flex-direction:<속성값>;| 속성값 | 설명 |
| row | 주축 방향을 왼쪽에서 오른쪽으로 지정 |
| row-reverse | 주축 방향을 오른쪽에서 왼쪽으로 지정 |
| column | 주축 밯향을 위쪽에서 아래쪽으로 지정 |
| column-reverse | 주축 방향을 아래쪽에서 위쪽으로 지정 |
※ 플렉스 아이템은 항상 주축 방향의 시작 방향 -> 끝 방향으로 배치됩니다.
따라서, 주축의 방향 설정에 따라 아이템이 배열되는 순서와 위치가 바뀝니다.
flex-wrap 속성
플렉스 아이템이 플렉스 컨테이너 영역을 벗어날 때, 어떻게 처리할지를 결정합니다.
플렉스 박스 레이아웃은 flex-wrap 속성값이 nowrap으로 기본 적용됩니다.
flex-wrap:<속성값>;| 속성값 | 설명 |
| nowrap | 플렉스 아이템이 플렉스 컨테이너를 벗어나도 무시 |
| wrap | 플렉스 아이템이 플렉스 컨테이너를 벗어나면 줄 바꿈 |
| wrap-reverse | 플렉스 아이템이 플렉스 컨테이너를 벗어나면 wrap의 역방향으로 줄 바꿈 |
플렉스 박스 레이아웃은 플렉스 아이템의 개수를 늘려 플렉스 컨테이너를 초과해도 줄 바꿈되지 않습니다.
이때, 플렉스 아이템을 줄바꿈하려면 flex-wrap 속성값을 wrap 또는 wrap-reverse로 지정합니다.
flex-flow 속성
flex-direction 속성과 flex-wrap 속성을 한 번에 사용할 수 있는 단축 속성
flex-flow:<flex-direction> <flex-wrap>;
다음과 같이 flex-flow 속성으로 한 번에 적용할 수 있습니다.
플렉스 박스 레이아웃의 정렬 속성
justify-content 속성
플렉스 아이템을 주축 방향으로 정렬할 때 사용하는 속성
justify-content:<속성값>;| 속성값 | 설명 |
| flex-start | 주축 방향의 시작을 기준으로 정렬 |
| flex-end | 주축 방향의 끝을 기준으로 정렬 |
| center | 주축 방향의 중앙에 정렬 |
| space-between | 플렉스 아이템 사이의 간격이 균일하도록 정렬 |
| space-around | 플렉스 아이템의 둘레가 균일하도록 정렬 |
| space-evenly | 플렉스 아이템 사이와 양끝의 간격이 균일하도록 정렬 |
align-items, align-content, align-self 속성
플렉스 아이템을 교차축 방향으로 정렬할 때 사용합니다. 플렉스 박스 레이아웃은 기본으로 stretch 값이 적용되어 있습니다. 따라서, display 속성에 flex or inline-flex 값만 적용해도 플렉스 아이템이 플렉스 컨테이너의 높이만큼 가득 차게 됩니다.
align-times:<속성값>;| 속성값 | 설명 |
| stretch | 교차축 방향으로 플렉스 아이템의 너비나 높이가 늘어남 |
| flex-start | 교차축 방향의 시작을 기준으로 정렬 |
| flex-end | 교차축 방향의 끝을 기준으로 정렬 |
| center | 교차축 방향의 중앙을 기준으로 정렬 |
| baseline | 플렉스 아이템의 baseline을 기준으로 정렬 |
※ align-content 속성도 플렉스 아이템을 교차축 방향으로 정렬할 때 사용하지만 align-items 속성과 다르게 플렉스 아이템이 flex-wrap 속성 때문에 2줄 이상이 되었을 때만 사용 가능합니다.
그리드 레이아웃으로 2차원 레이아웃 설계하기
그리드 레이아웃 : 웹 페이지에서 2차원 방식으로 레이아웃을 설계하는 스타일 속성
2차원 방식이란? 가로(row)와 세로(column)를 같이 사용하여 레이아웃을 설계하는 방식
그리드 레이아웃 살펴보기
구성요소
행(row) : 그리드 레이아웃에서 가로줄
열(column) : 그리드 레이아웃에서 세로줄
그리드 셀(grid cell) : 행과 열이 만나 이루어지는 하나의 공간
그리드 갭(grid gap) : 그리드 셀과 그리드 셀 사이의 간격
그리드 아이템(grid item) : 그리드 셀 안에서 표현되는 콘텐츠
그리드 라인(grid line) : 그리드 행과 열을 그리는 선
그리드 넘버(gird number) : 그리드 라인에 붙는 번호
그리드 컨테이너(grid container) : 그리드 레이아웃의 전체 내용을 담고 있는 최상위 부모 요소
이때, 그리드와 관련한 내용은 모두 그리드 컨테이너 안에 표현됨
그리드 레이아웃의 기본 속성
display 속성
항상 display 속성값을 grid 또는 inline-grid로 지정하는 것에서 시작
display:grid; /* inline-grid */
grid-template-columns & grid-template-rows 속성
그리드 컨테이너의 기본 구성 요소는 행과 열 / 행과 열을 생성 -> 행과 열을 지정하여 그리드 셀 생성
열 - grid-template-columns
행 - grid-template-rows
속성값은 공백으로 구분하여 차례대로 작성 / 앞에서부터 1행 또는 1열의 값
grid-template-columns:<1열값> <2열값> ...;
grid-template-rows:<1행값> <2행값> ...;
1) 행과 열을 지정하여 그리드 셀 행과 열 생성
2) 속성값에 auto 사용 가능 / auto값을 지정하면 해당하는 행과 열의 크기를 그리드 컨테이너에 맞춰 자동으로 지정
3) 만약, 열이나 행이 같은 크기일 때는 repeat () 함수로 반복하여 지정 가능 / repeat(n(같은 크기의 n 행과 열), 크기값(px))
4) minmax () 함수로 열 또는 ㅠ행 크기의 최솟값과 최댓값을 지정 가능
5) 2개의 함수를 함께 사용 가능
row-gap & column-gap 속성
그리드 갭은 그리드 셀과 그리드 셀 사이의 간격
row-gap : 행과 행 사이의 간격
column-gap : 열과 열 사이의 간격
row-gap:<크기>;
column-gap:<크기>;
그리드 레이아웃의 정렬 속성
align-items & align-self 속성
그리드 셀의 높이가 그리드 아이템보다 클 때, 각각의 그리드 아이템을 각 그리드 셀의 세로 방향으로 정렬할 수 있음
| 속성값 | 설명 |
| stretch | 그리드 아이템이 그리드 셀을 가득 채우도록 크기를 늘림 |
| start | 그리드 아이템을 그리드 셀의 맨 위에 배치 |
| center | 그리드 아이템을 그리드 셀의 세로 방향 중간에 배치 |
| end | 그리드 아이템을 그리드 셀의 맨 아래에 배치 |
이때, align-items 속성으로 한 번에 정렬하지 않고 그리드 아이템을 각각 정렬할 경우, align-self 속성을 사용합니다.
justify-items & justify-self 속성
그리드 아이템을 각 그리드 셀의 가로 방향으로 정렬합니다.
| 속성값 | 설명 |
| stretch | 그리드 아이템을 그리드 셀이 꽉 차도록 늘립니다. |
| start | 그리드 아이템을 그리드 셀의 왼쪽 끝에 배치합니다. |
| center | 그리드 아이템을 그리드 셀의 가로 방향 중간에 배치합니다. |
| end | 그리드 아이템을 그리드 셀의 오른쪽 끝에 배치합니다. |
그리드 레이아웃의 배치 속성
grid-template-areas & grid-area 속성
grid-template-areas 속성으로 그리드 컨테이너에 그리드 레이아웃에 표시된 행 이름을 지정할 수 있습니다.
grid-area:<행과 열 이름>;
grid-template-areas 속성으로 이름을 지정하고 나면 grid-area 속성으로 이름을 그리드 아이템에 배치할 수 있습니다.
grid-column-start, grid-column-end, grid-row-start, grid-row-end 속성
그리드 라인 - 그리드 컨테이너를 구성하는 행과 열을 그리는 선
그리드 넘버 - 그리드 라인에 있는 각각의 고유한 번호
grid-column-start 와 grid-column-end 속성은 각각 그리드 아이템의 열 시작 위치와 종료 위치를 지정합니다.
grid-row-start 와 grid-row-end 속성은 각각 그리드 아이템의 행 시작 위치와 종료 위치를 지정합니다.
위 4가지 속성을 조합하여 그리드 아이템의 배치를 지정할 수 있습니다.
grid-column 과 grid-row 속성
gird-column 속성은 grid-column-start와 grid-column-end 속성을 / grid-row 속성은 grid-row-start와 grid-row-end 속성을 한 번에 사용할 수 있는 단축속성
grid-column:<start> <end>;
grid-row:<start> <end>;반응형 웹을 위한 미디어 쿼리 사용하기
미디어 쿼리란? 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하게 하는 기술
뷰포트 : 웹 페이지가 접속한 기기에서 보이는 실제 영역의 크기 (HTML 문서는 어떤 기기에 접속하더라도 기본 980px)
만약, 스마트폰의 해상도는 360px인 반면 HTML 문서의 해상도는 980px 이어서 글씨가 작게 보입니다. 이러한 현상을 해결하려면 기기의 해상도를 인식할 수 있게 HTML 코드로 뷰포트를 설정해 줘야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width는 HTML 문서의 너비를 기기의 너비로 설정하라는 의미
{meta 태그의 content 속성에 사용하는 속성값}
| 속성값 | 설명 |
| width | 뷰포트의 너비를 설정합니다. 보통 device-width로 설정 |
| height | 뷰포트의 높이를 설정합니다. 잘 사용 x |
| initial-scale | 뷰포트의 초기 배율을 설정합니다. 1이 기본값, 1보다 작으면 축소 / 1보다 크면 확대 |
| minimum-scale | 뷰포트의 최소 축소 비율 설정합니다. 기본 0.25 |
| maximum-scale | 뷰포트의 최대 확대 비율을 설정합니다. 기본 5.0 |
| user-scalable | 뷰포트의 확대 또는 축소 여부를 설정합니다. yes 또는 no로 지정하는데, no로 지정하면 화면을 확대 또는 축소가 불가능 |
미디어 쿼리의 기본 문법
@media <not|only> <mediatype> and (<media future>) <and|or|not> (<media feature>) { css 코드 }
not | only
- not 뒤에 오는 모든 조건을 부정
- only 미디어 쿼리를 지원하는 기기만 미디어 쿼리를 해석하라는 의미
mediatype
- 미디어 쿼리가 적용될 미디어 타입을 명시, 생략 가능하며 생략할 경우 all로 인식합니다.
생략하지 않으면 반드시 다음에 and 연산자가 와야 합니다.
{사용 가능 미디어 타입}
| 타입 | 설명 |
| all | 모든 기기 |
| 인쇄 장치(ex. 프린터) | |
| screen | 컴퓨터 화면 장치 또는 스마트 기기 |
| speech | 스크린 리더기같은 보조 프로그램 / 웹 페이지를 소리 내어 읽어주는 장치 |
media future
미디어 쿼리가 적용될 미디어 조건을 적습니다.
{미디어 조건 종류}
| 조건 | 값 | 설명 |
| min-width | <화면 너비> | 미디어 쿼리가 적용될 최소 너비 |
| max-width | <화면 너비> | 미디어 쿼리가 적용될 최대 너비 |
| orientation | portrait | 세로 모드, 뷰포트의 세로 높이가 가로 너비보다 큰 경우 |
| orientation | landscape | 가로 모드, 뷰포트의 가로 너비가 세로 높이보다 큰 경우 |
다음과 같을 때는 미디어 쿼리를 적용할 수 있는 기기이면서 동시에 컴퓨터 화면 장치 또는 스마트 기기일 때 & 뷰포트의 너비가 최소 420px일 때 css 코드가 실행됩니다.
'프론트엔드(Web) > CSS' 카테고리의 다른 글
| CSS 배경 및 애니메이션 속성 (1) | 2024.07.11 |
|---|---|
| CSS 언어의 특징, 텍스트 속성, 박스 모델 및 인라인 속성 특징 및 성격 (0) | 2024.07.10 |
| CSS - 기본 문법 및 적용 & 선택자 (0) | 2024.07.10 |