학습 목표 (p.278 ~ p. 313)
- 플렉스 박스 레이아웃 이해 및 차원 레이아웃 설계
- 그리드 레이아웃 이해 및 2차원 레이아웃 설계
- 미디어 쿼리 이해 및 실습
플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기
플렉스 박스 레이아웃: 1차원 방식으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성
<플렉스 박스 레이아웃 살펴보기>
● 구성 요소
| 구성 요소 | 설명 |
| 주축(main axis) | 플렉스 박스의 진행 방향과 수평한 축을 말한다 |
| 교차축(cross axis) | 주축과 수직한 축을 말한다 |
| 플렉스 컨테이너(flex container) | display 속성값으로 flex나 inline-flex가 적용된 요소를 말한다 |
| 플렉스 아이템(flex item) | 플렉스 컨테이너와 자식 관계를 이루는 태그 구성 요소를 말한다 |
● 레이아웃 확인 방법
플렉스 박스 레이아웃을 크롬 개발자 도구에서 확인할 수 있다.
● 기본 예제 코드
플렉스 박스 레이아웃은 크게 플렉스 컨테이너와 플렉스 아이템으로 구성된다.
<플렉스 박스 레이아웃의 기본 속성>
● display 속성
모든 플렉스 박스 레이아웃은 display 속성값을 flex나 inline-flex로 지정하는 것에서 시작한다.
display:flex; /* inline-flex */flex는 적용된 요소의 다음 요소가 항상 줄 바꿈이 되고, inline-flex는 다음 요소가 주변에 배치되게 한다. 그리고 display 속성이 지정된 요소는 플렉스 컨테이너가 되고, 자식 요소는 플렉스 아이템이 된다.
플렉스 아이템이 원래 가지고 있던 박스 성격(인라인/인라인 블록/블록)은 무시된다.
● flex-direction 속성
flex-direction 속성은 플렉스 박스 레이아웃의 주축 방향을 결정한다.
flex-direction:<속성값>;| 속성값 | 설명 |
| row | 주축 방향을 왼쪽에서 오른쪽으로 지정한다 |
| row-reverse | 주축 방향을 오른쪽에서 왼쪽으로 지정한다 |
| column | 주축 방향을 위쪽에서 아래쪽으로 지정한다 |
| column-reverse | 주축 방향을 아래쪽에서 위쪽으로 지정한다 |
● flex-wrap 속성
flex-wrap 속성은 플렉스 아이템이 플렉스 컨테이너 영역을 벗어날 때 어떻게 처리할지를 결정한다.
flex-wrap:<속성값>;| 속성값 | 설명 |
| nowrap | 플렉스 아이템이 플렉스 컨테이너를 벗어나도 무시한다 |
| wrap | 플렉스 아이템이 플렉스 컨테이너를 벗어나면 줄 바꿈한다 |
| wrap-reverse | 플렉스 아이템이 플렉스 컨테이너를 벗어나면 wrap의 역방향으로 줄 바꿈한다 |
● flex-flow 속성
flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 한 번에 사용할 수 있는 단축 속성이다.
flex-flow:<flex-direction> <flex-wrap>;예제 코드
flex-flow:column nowrap;
<플렉스 박스 레이아웃의 정렬 속성>
● justify-content 속성
justify-content는 플렉스 아이템을 주축 방향으로 정렬할 때 사용하는 속성이다.
justify-content:<속성값>;| 속성값 | 설명 |
| flex-start | 주축 방향의 시작을 기준으로 정렬한다 |
| flex-end | 주축 방향의 끝을 기준으로 정렬한다 |
| center | 주축 방향의 중앙에 정렬한다 |
| space-between | 플렉스 아이템 사이의 간격이 균일하도록 정렬한다 |
| space-around | 플렉스 아이템의 둘레(around)가 균일하도록 정렬한다 |
| space-evenly | 플렉스 아이템 사이와 양끝의 간격이 균일하도록 정렬한다 |
● align-items, align-content, align-self 속성
align-items 속성은 플렉스 아이템을 교차축 방향으로 정렬할 때 사용한다.
align-items:<속성값>;| 속성값 | 설명 |
| stretch | 교차축 방향으로 플렉스 아이템의 너비나 높이가 늘어난다 |
| flex-start | 교차축 방향의 시작을 기준으로 정렬한다 |
| flex-end | 교차축 방향의 끝을 기준으로 정렬한다 |
| center | 교차축 방향의 중앙을 기준으로 정렬한다 |
| baseline | 플렉스 아이템의 baseline을 기준으로 정렬한다. |
align-content 속성은 플렉스 아이템을 교차축 방향으로 정렬할 때 사용한다. 그리고 플렉스 아이템이 flex-wrap 속성 때문에 두 줄 이상이 됐을 때만 사용한다.
align-items 속성은 플렉스 아이템을 한 번에 정렬하지 않고 각각 정렬하고 싶을 때 align-self 속성을 사용한다.
그리드 레이아웃으로 2차원 레이아웃 설계하기
그리드 레이아웃 속성은 웹 페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성이다. 여기서 2차원 방식이란 가로와 세로를 같이 이용해 레이아웃을 설계하는 방식이다.
<그리드 레이아웃 살펴보기>
● 구성 요소
| 구성 요소 | 설명 |
| 행(row) | 그리드 레이아웃에서 가로줄을 의미한다 |
| 열(column) | 그리드 레이아웃에서 세로줄을 의미한다 |
| 그리드 셀(grid cell) | 행과 열이 만나 이루어지는 하나의 공간을 나타낸다 |
| 그리드 갭(grid gap) | 그리드 셀과 그리드 셀 사이의 간격을 나타낸다 |
| 그리드 아이템(grid item) | 그리드 셀 안에서 표현되는 콘텐츠를 의미한다 |
| 그리드 라인(grid line) | 그리드 행과 열을 그리는 선을 의미한다 |
| 그리드 넘버(grid number) | 그리드 라인에 붙는 번호이다 |
| 그리드 컨테이너(grid container) | 그리드 레이아웃의 전체 내용을 담고 있는 최상위 부모 요소이다. 그리드와 관련한 내용은 모두 그리드 컨테이너 안에 표현된다. |
● 레이아웃 확인 방법
그리드 레이아웃도 크롬 브라우저의 개발자 도구를 이용하여 확인하면 된다.
● 기본 예제 코드
<그리드 레이아웃의 기본 속성>
● display 속성
그리드 레이아웃은 항상 display 속성값을 grid나 inline-grid로 지정한다.
display:grid; /* inline-grid */해당 속성이 지정된 요소는 그리드 컨테이너가 되고, 자식 요소는 그리드 아이템이 된다.
.grid-container{
display:grid;
}
● grid-template-columns와 grid-template-rows 속성
그리드 컨테이너의 기본 구성 요소는 행과 열이다. 따라서 행과 열을 생성하고, 행과 열을 지정해 그리드 셀을 생성해야 한다. 열은 grid-template-columns 속성으로, 행은 grid-template-rows 속성으로 생성한다.
grid-template-columns:<1열값> <2열값> ...;
grid-template-rows:<1열값> <2열값> ...;
두 열이나 행이 같은 크기일 때 repeat() 함수로 반복해서 지정할 수 있다.
grid-template-columns:repeat(2, 100px); /* 100px 100px */
grid-template-rows:repeat(2, 50px); /* 50px 50px */
minmax() 함수로 열 또는 행 크기의 최솟값과 최댓값을 지정할 수 있다.
grid-template-columns:minmax(10px, 100px) 100px; /* (최소 10px~최대 100px) 100px */
grid-template-rows:minmax(10px, 50px) 50px; /* (최소 10px~최대 50px) 50px */
두 함수를 함께 사용할 수도 있다.
grid-template-columns:repeat(2, minmax(50px, 100px)); /* 두 열 최소 50px~최대 100px */
grid-template-columns:repeat(2, minmax(10px, 50px)); /* 두 행 최소 10px~최대 50px */
● row-gap과 column-gap 속성
그리드 갭은 행과 열이 만나 이루어지는 그리드 셀과 그리드 셀 사이의 간격인데, 행과 행 사이의 간격은 row-gap, 열과 열 사이의 간격은 column-gap 속성을 지정할 수 있다.
row-gap:<크기>;
column-gap:<크기>;
<그리드 레이아웃의 정렬 속성>
● align-items와 align-self 속성
align-items 속성을 사용하면 그리드 셀의 높이가 그리드 아이템보다 클 때 각 그리드 아이템을 각 그리드 셀의 세로 방향으로 정렬할 수 있다.
| 속성값 | 설명 |
| stretch | 그리드 아이템이 그리드 셀을 꽉 채우도록 크기를 늘린다 |
| start | 그리드 아이템을 그리드 셀의 맨 위에 배치한다 |
| center | 그리드 아이템을 그리드 셀의 세로 방향 중간에 배치한다 |
| end | 그리드 아이템을 그리드 셀의 맨 아래에 배치한다 |
플렉스 박스 레이아웃 align-self 속성과 같이 그리드 아이템을 각각 정렬하고 싶으면 align-self 속성을 사용하면 된다.
● justify-items와 justify-self 속성
justify-items 속성은 그리드 아이템을 각 그리드 셀의 가로 방향으로 정렬한다.
| 속성값 | 설명 |
| stretch | 그리드 아이템을 그리드 셀이 꽉 차도록 늘린다 |
| start | 그리드 아이템을 그리드 셀의 왼쪽 끝에 배치한다 |
| center | 그리드 아이템을 그리드 셀의 가로 뱡항 중간에 배치한다 |
| end | 그리드 아이템을 그리드 셀의 오른쪽 끝에 배치한다 |
justify-self 속성도 그리드 아이템을 개별로 정렬할 때 사용하는 속성이다.
● place-items와 place-self 속성
place-items 속성은 align-items와 justify-items 속성을, place-self 속성은 align-self와 justify-self 속성을 한 번에 사용할 수 있다.
place-items:<align-items> <justify-items>;
place-self:<align-self> <justify-self>;place-items, place-self 예제 코드
place-items:center end;
place-self:center end;
<그리드 레이아웃의 배치 속성>
● grid-template-areas와 grid-area 속성
grid-template-areas 속성은 그리드 레이아웃의 행과 열을 이름으로 지정할 수 있다.
grid-template-areas 속성으로 이름을 지정하고 나면 grid-area 속성으로 이름을 그리드 아이템에 배치할 수 있다.
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 속성은 그리드 아이템의 행 시작 위치와 종료 위치를 지정한다.
● grid-column과 grid-row 속성
grid-column 속성은 grid-column-start, grid-column-end 속성을, grid-row 속성은 grid-row-start, grid-row-end 속성을 한 번에 사용할 수 있다.
grid-column:<start> <end>;
grid-row:<start> <end>;또는 시작 번호부터 몇 개의 그리드 셀을 차지할지를 적어도 된다.
grid-column:<start>/span <열 개수>;
grid-row:<start>/span <행 개수>;예제 코드
grid-column:1/3; /* or grid-column:1/span 2; */
grid-row:1/3; /* or grid-row:1/span 2; */반응형 웹을 위한 미디어 쿼리 사용하기
<미디어 쿼리란>
미디어 쿼리는 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하게 하는 기술이다.
모바일에서 웹 페이지가 어떻게 보이는지 확인하려면 크롬 브라우저 개발자 도구를 열어서 상단에 Toggle Device toolbar 아이콘을 누르면 된다.
<뷰포트 알아보기>
뷰포트(viewport)는 웹 페이지가 접속한 기기에서 보이는 실제 영역의 크기를 의미한다.
예를 들어 스마트폰의 해상도는 360px인데 HTML 문서에는 해상도를 980px로 잡고 있어서 글씨가 좁쌀처럼 보이게 된다. 이러한 현상을 해결하기 위해 기기의 해상도를 인식할 수 있게 HTML 코드로 뷰포트를 설정해 줘야 한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width는 HTML 문서의 너비(width)를 기기의 너비(device-width)로 설정하라는 의미이다.
content 속성값
| 속성값 | 설명 |
| width | 뷰포트의 너비를 설정한다. 보통 device-width로 설정한다 |
| height | 뷰포트의 높이를 설정한다. 잘 사용하지 않는다 |
| initial-scale | 뷰포트의 초기 배율을 설정한다. 1이 기본값이며 1보다 작으면 축소 값, 1보다 크면 확대값으로 설정된다 |
| minimum-scale | 뷰포트의 최소 축소 비율을 설정한다. 기본으로 0.25가 적용되어 있다 |
| maximum-scale | 뷰포트의 최대 확대 비율을 설정한다. 기본으로 5.0이 적용되어 있다 |
| user-scalabel | 뷰포트의 확대 또는 축소 여부를 설정한다. yes or no로 지정하는데, no로 지정하면 화면을 확대 또는 축소할 수 없다. |
<미디어 쿼리의 기본 문법>
@media <not|only> <mediatype> and (<media feature>) <and|or|not> (<media feature>){
/* CSS 코드; */
}● not/only
not: not 뒤에 오는 모든 조건을 부정
only: only 미디어 쿼리를 지원하는 기기만 미디어 쿼리를 해석하라는 의미
● mediatype
미디어 쿼리가 적용될 미디어 타입을 명시한다. 생략 가능하며, 생략할 경우 all로 인식한다. 생략하지 않으면 반드시 다음에 and 연산자가 와야한다. 사용할 수 있는 미디어 타입도 다양하다.
| 타입 | 설명 |
| all | 모든 기기 |
| 인쇄 장치 | |
| screen | 컴퓨터 화면 장치 또는 스마트 기기 |
| speech | 스크린 리더기 같은 보조 프로그램으로 웹 페이지를 소리 내어 읽어 주는 장치 |
● media feature
미디어 쿼리가 적용될 미디어 조건을 적는다. 미디어 쿼리 조건도 다양하다.
| 조건 | 값 | 설명 |
| min-width | <화면 너비> | 미디어 쿼리가 적용될 최소 너비 |
| max-width | <화면 너비> | 미디어 쿼리가 적용될 최대 너비 |
| orientation | portrait | 세로 모드, 뷰포트의 세로 높이가 가로 너비보다 큰 경우 |
| orientation | landscape | 가로 모드, 뷰포트의 가로 너비가 세로 높이보다 큰 경우 |
@media only screen and (min-width:360px) and (max-width:720px){
/* CSS 코드 */
}위 코드를 보면 미디어 쿼리를 적용할 수 있는 기기(only)이면서 컴퓨터 화면 장치 또는 스마트 기기(screen)일 때 그리고 뷰포트의 너비가 최소 360px(min-width)이고 최대 720px(max-width)이면 CSS 코드가 실행한다.
