접속 환경에 따라 사이트의 레이아웃을 자연스럽게 바꾸는 것
12-1 반응형 웹 알아보기
12-2 미디어 쿼리 알아보기
12-3 그리드 레이아웃 알아보기
12-4 플렉스 박스 레이아웃 알아보기
12-5 CSS 그리드 레이아웃 사용하기
화면 크기에 '반응'하는 화면 요소를 자동으로 바꾸어 사이트를 구현하는 것을 `반응형 웹 디자인`라고 한다.
`반응형 웹 디자인`responsive web design : 기존 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 표시하는 방법
반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해준다.
그렇다면 웹을 크기별로 여러개 만든다는 것인가? 그런것은 아니라고 생각한다. 앞으로 배울 내용이 이러한 방법을 알려줄것이다.
뷰포트viewport : 스마트폰 화면에서 실제 내용이 표시되는 영역
뷰포트를 고려해야 하는 이유는 PC와 스마트폰의 경우 화면에 표시되는 `픽셀의 차이`가 나기에 이를 조정해 주는 과정이 필요하기 때문이다.
PC -> 모바일 : PC 화면 크기만큼 표시하기에 오히려 모바일에서 글자가 작게 나타난다.
모바일 -> 스마트폰 : 모바일에 맞춰서 구현했다 하더라도 실제 스마트폰 화면에서 내용을 확인하면 원래 의도한 대로 표시되지 않기도 한다. 이는 웹키트webkit를 기반으로 한 모바일 브라우저의 기본 뷰포트 너비가 980px이기 때문이다.
개념: <meta> 태그를 이용해 <head>와 </head> 태그 사이에 작성합니다.
기본형 <meta name="viewport" content="속성1=값1, 속성2=값2, .....">
표12-1 뷰포트의 속성
| 종류 | 설명 | 사용 가능한 값 | 기본값 |
|---|---|---|---|
| width | 뷰포트 너비 | device-width 또는 크기 | 브라우저 기본값 |
| height | 뷰포트 높이 | device-height 또는 크기 | 브라우저 기본값 |
| user-scalable | 확대•축소 가능 여부 | yes 또는 no (yes는 1로, device-width와 device-height값은 10으로 간주) |
yes |
| initial-scale | 초기 확대•축소 값 | 1~10 | 1 |
예시
<meta name="viewport" content="width=device-width, initial-scale=1">뷰포트 개념 등장 이전에는 px, %의 단위를 사용했지만 등장 이후 뷰포트를 기준으로 하는 단위가 생겼다. 이에 대해 알아보자
- vw(viewport width) : 1vw는 뷰포트 너비의 1%와 같습니다.
- vh(viewport height) : 1vh는 뷰포트 높이의 1%와 같습니다.
- vmin(viewport minimum) : 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같습니다.
- vmax(viewport maximum) : 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같습니다.
사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일 시트를 적용해 주는 것이 미디어 쿼리이다.
미디어 쿼리media queries : 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 CSS 모듈
크기별로 CSS 스타일을 별개로 적용할 수 있도록 하는 방법
개념: @media 속성을 사용하여 특정 미디어에서 어떤 CSS를 적용할 것인지 지정
기본형 @media [only | not] 미디어 유형 [and 조건] * [and 조건]
- only: 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다.
- not : not 다음에 지정하는 미디어 유형을 제외합니다. 예를 들어 not tv라고 지정하면 TV를 제외한 미디어 유형에만 적용합니다.
- and : 조건을 여러 개 연결해서 추가할 수 있습니다.
특징 : 미디어 쿼리 구문의 경우 대소문자를 구별하지 않습니다.
| 종류 | 설명 |
|---|---|
| all | 모든 미디어 유형에서 사용할 CSS를 정의합니다. |
| 인쇄 장치에서 사용할 CSS를 정의합니다. | |
| screen | 컴퓨터 스크린에서 사용할 CSS를 정의합니다. 스마트폰의 스크린도 포함됩니다. |
| tv | 음성과 영상이 동시에 출력되는 TV에서 사용할 CSS를 정의합니다. |
| aural | 음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치)에서 사용할 CSS를 정의합니다. |
| braille | 점자 표시 장치에서 사용할 CSS를 정의합니다. |
| handheld | 패드(pad)처럼 손에 들고 다니는 장치를 위한 CSS를 정의합니다. |
| projection | 프로젝터를 위한 CSS를 정의합니다. |
| tty | 디스플레이 기능이 제한된 장치에 맞는 CSS를 정의합니다. 이런 장치에서는 픽셀(px) 단위를 사용할 수 없습ㄴ디ㅏ. |
| embossed | 점자 프린터에서 사용할 CSS를 정의합니다. |
뷰포트의 너비와 높이를 미디어의 쿼리의 조건으로 사용할 수 있다.
스크린이 아닌 미디어에서는 스크롤을 포함한 전체 문서를 height로 지정해야 하며, print에서는 한 페이지 높이를 기준으로 한다.
표 12-3 웹 문서의 가로 세소 속성
| 종류 | 설명 |
|---|---|
| width, height | 웹 페이지의 가로 너비, 세로 높이를 지정합니다. |
| min-width, min-height | 웹 페이지의 최소 너비, 최소 높이를 지정합니다. |
| max-width, max-height | 웹 페이지의 최대 너비, 최대 높이를 지정합니다. |
단말기의 너비와 높이는 단말기 브라우저 창의 너비와 높이를 말한다. 이때 주의해야 할 점은 단말기 해상도와 실제 브라우저의 너비가 다르다는 것입니다.
표 12-4 단말기의 가로 세로 속성
| 종류 | 설명 |
|---|---|
| device-width, device-height | 단말기의 가로 너비, 세로 높이를 지정합니다. |
| min-device-width, min-device-height | 단말기의 최소 너비, 최소 높이를 지정합니다. |
| max-device-width, max-device-height | 단말기의 최대 너비, 최대 높이를 지정합니다. |
미디어 쿼리에서 orientation 속성을 사용하면 기기의 방향을 확인할 수 있고, 그에 따라서 웹 사이트의 레이아웃을 바꿀 수 있다.
| 종류 | 설명 |
|---|---|
| orientation: portrait | 단말기의 세로 모드를 지정합니다. |
| orientation: landscape | 단말기의 가로 모드를 지정합니다. |
이 외에도 화면 비율이나 단말기 화면 비율, 색상당 비트 수 같은 여러 가지 미디어 쿼리 조건들이 있다. 이곳을 통해 다양한 쿼리 조건들을 확인할 수 있다.
중단점break point : 미디어 쿼리를 작성할 떄 화면 크기에 따라 서로 다른 CSS를 적용할 분기점을 의미
대부분 기기의 화면 크기를 기준으로 하나 모든 기기를 반영할 수 없기에 모바일과 태블릿, 데스크톱 정도로만 구분하는 것이 좋다.
이렇듯 모바일을 먼저 고려하여 미디어 쿼리를 작성하는 것을 `모바일 퍼스트 기법`이라고 한다.
미디어 쿼리를 적용하는 방법으로는 크게 외부 CSS 파일로 연결하는 방법과 웹 문서에 직접 정의하는 방법이 있습니다.
개념 : 각 조건별로 CSS 파일을 따로 저장한 뒤 <link> 태그나 @import문을 사용해서 연결한다.
- 첫번째 방법
기본형<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로"> - 두번째 방법
기본형@import url(css 파일 경로) 미디어 쿼리 조건
문득 든 생각이 CSS 외부 파일을 여러개 적용할 수 있을에 대해 궁금해졌다. 단순하게 "#include" 하는 것 같은 방식으로 먼저 호출된 css 스타일이 적용될 지 알았으나, 뒤에 따라오는 CSS 스타일이 우선순위가 더 높다고 한다. 이는 앞에서부터 적용되는 내용이 덮어 씌워져서 생기는 문제(?)인것 같다.
웹 문서에 미디어 쿼리를 직접 정의하는 방법은 2가지가 있다.
첫 번쨰
기본형 <style media="<조건>"> {
<스타일 규칙>
}
</style>두 번쨰
기본형 <style>
@media <조건> {
<스타일 규칙>
}
</style>웹 사이트의 레이아웃을 정할 때 사이트 전체 디자인이나 일관성을 유지하기 위해 그리드 레이아웃을 사용해야 한다.
그리드 레이아웃을 만드는 플렉서블 박스 레이아웃과 CSS 그리드 레이아웃에 대해 알아보자
그리드 레이아웃grid layout : 반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 하는데, 재배치 하기 위해 기준이 되는 레이아웃을 의미한다.
그리드 레이아웃이란 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말한다.
- 가변 그리드를 CSS의 float 속성으로 사용
- 플렉서블 박스 레이아웃
- CSS 그리드 레이아웃
https://yamoo9.gitbook.io/css-grid
개념: 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것
플렉스 박스는 수평 방향이나 수직 방향 중에서 한쪽을 주축으로 정하고 박스를 배치합니다.
개념: 수평과 수직 어느 방향이든 배치할 수 있다. 마치 레고 블록을 끼워 맞추는 요소를 배치
CSS 그리드 레이아웃은 대부분 모던 브라우저에서 사용할 수 있습니다.
그리드 레이아웃
플렉스 박스 레이아웃
플레스 박스에는 플렉스 항목이 여러 개 있는데 일괄적으로 한꺼번에 배치할 수도 있고, 주축이나 교착축 기준으로 다양하게 배치할 수도 있습니다.
표 12-6 플렉스 박스 항목을 배치하는 속성
| 종류 | 설명 |
|---|---|
| justify-content | 주축 방향의 정렬 방법입니다. |
| align-items | 교차축 방향의 정렬 방법입니다. |
| align-self | 교차축에 있는 개별 항목의 정렬 방법입니다. |
| align-content | 교차축에서 여러 줄로 표시된 항목의 정렬 방법입니다. |
플렉스 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어 주어야 한다. -> 배치할 웹 요소가 있다면 그 요소를 감싸는 부모 요소를 만들고, 그 부모 요소를 플렉스 컨테이너로 만들어야 한다.
특정 요소를 플렉스 컨테이너로 동작하게 하기 위해 display 속성을 이용해야한다.
표 12-7 display의 속성값
| 종류 | 설명 |
|---|---|
| flex | 컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치합니다. |
| inline-flex | 컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치합니다. |
플렉스 컨테이너 안에서 플렉스 항목을 배치하는 주축 방향을 지정하는 속성
표 12-8 flex-direction의 속성값
| 종류 | 설명 |
|---|---|
| row | 주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치합니다. 기본값입니다. |
| row-reverse | 주축을 가로로 지정하고 반대로 오른쪽에서 왼쪽으로 배치합니다. |
| column | 주축을 세로로 지정하고 위쪽에서 아래쪽으로 배치합니다. |
| column-reverse | 주축을 세로로 지정하고 아래쪽에서 위쪽으로 배치합니다. |
flex-wrap: 플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정
표 12-9 flex-wrap의 속성값
| 종류 | 설명 |
|---|---|
| nowrap | 플렉스 항목을 한 줄에 표시합니다. 기본값입니다. |
| wrap | 플렉스 항목을 여러 줄에 표시합니다. |
| wrap-reverse | 플렉스 항목을 여러 줄에 표시하되, 시작점과 끝점이 바뀝니다. |
flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정하여 플렉스 항목의 배치 방향을 결정하거나 줄을 바꿉니다.
개념: 주축에서 플렉스 항목 간의 정렬 방법을 지정합니다.
표 12-10 justify-content 속성
| 종류 | 설명 |
|---|---|
| flex-start | 주축의 시작점에 맞춰 배치합니다. |
| flex-end | 주축의 끝점에 맞춰 배치합니다. |
| center | 주축의 중앙에 맞춰 배치합니다. |
| space-between | 첫 번째 항목과 끝 항목을 주축의 시작점과 끝점에 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치합니다. |
| space-around | 모든 항목을 주축에 같은 간격으로 배치합니다. |
개념 : 교차축을 기준으로 플렉스 항목을 정렬
표 12-11 align-items의 속성값
| 종류 | 설명 |
|---|---|
| flex-start | 교차축의 시작점에 맞춰 배치합니다. |
| flex-end | 교차축의 끝점에 맞춰 배치합니다. |
| center | 교차축의 중앙에 배치합니다. |
| baseline | 교차축의 문자 기준선에 맞춰 배치합니다. |
| stretch | 플렉스 항목을 늘려 교차축에 가득 차에 배치합니다. |
align-item의 경우 교차축을 기준으로 플렉스 항목의 정렬 방법을 결정하지만 그 중에서 특정 항목만 지정하고 싶을 때 align-self 속성을 사용한다.
주축에서 줄 바꿈이 생겨 플렉스 항목을 여러 줄로 표시해야 할 때 align-content 속성을 사용하면 교차축에서 플렉스 항목 간의 간격을 지정할 수 있습니다.
표 12-12 align-content의 속성값
| 종류 | 설명 |
|---|---|
| flex-start | 교차축의 시작점에 맞춰 배치합니다. |
| flex-end | 교차축의 끝점에 맞춰 배치합니다. |
| center | 교차축의 중앙에 맞춰 배치합니다. |
| space-between | 첫 번째 항목과 끝 항목을 교차축의 시작점과 끝점에 맞추고 나머지 항목은 그 사이에 같은 간격으로 배치합니다. |
| space-around | 모든 항목을 교차축에 같은 간격으로 배치합니다. |
| stretch | 플렉스 항목을 늘려서 교차축에 가득 차게 배치합니다. |
CSS를 사용해서 화면 요소를 세로 방향으로 중앙에 배치하기 힘들었는데 이를 플렉스 박스 레이아웃을 사용하면 간단하게 할 수 있다.
소스를 최대한 간단하게 유지함녀서 대부분의 기기에 대응할 수 있는 그리드 레이아웃 기법이다.
CSS 그리드 레이아웃을 만들 때 사용하는 속성을 알아보자.
그리드 레이아웃을 지정하기 위해 먼저 그리드 컨테이너를 만들어야 한다.
표 12-13 display의 속성값
| 종류 | 설명 |
|---|---|
| grid | 컨테이너 안의 항목을 블록 레벨 요소로 배치합니다. |
| inline-grid | 컨테이너 안의 항목을 인라인 레벨 요소로 배치합니다. |
grid-template-columns: 컨테이너 안에 항목을 배치할 때 칼럼의 크기와 개수를 지정
grid-template-rows: 컨테이너 안에 항목을 배치할 때 줄의 크기와 개수를 지정
그리드 레이아웃의 경우 픽셀(px)을 이용하면 항상 크기가 고정되기에 반응형 웹 디자인으로 적합하지 않다. 그렇기에 그리드 레이아웃에서는 상대적인 크기를 지정할 수 있도록 frfraction 단위를 사용한다.
항목과 항목 사이의 간격을 조절하기 위한 속성
표 12-14 그리드 항목의 간격을 조절하는 속성
| 종류 | 설명 |
|---|---|
| grid-column-gap | 칼럼과 칼럼 사이의 간격을 지정합니다. |
| grid-row-gap | 줄과 줄 사이의 간격을 지정합니다. |
| grid-gap | 칼럼과 줄 사이의 간격을 한꺼번에 지정합니다. |
그리드 라인을 이용해서 그리드 항목을 배치할 수 있다.
표 12-15 그리드 라인을 이용해 그리드 항목을 배치하는 속성
| 종류 | 설명 | 예시 |
|---|---|---|
| grid-column-start | 칼럼 시작의 라인 번호를 지정합니다. | grid-column-start: 1 |
| grid-column-end | 칼럼 마지막의 라인 번호를 지정합니다. | grid-column-end: 4 |
| grid-column | 칼럼 시작 번호와 칼럼 끝 번호 사이에 슬래시(/)를 넣어 사용합니다. | grid-column: 1/4 |
| grid-row-start | 줄 시작의 라인 번호를 지정합니다. | grid-row-start: 2 |
| grid-row-end | 줄 마지막의 라인 번호입니다. | grid-row-end 4 |
| grid-row | 줄 시작 번호와 줄 끝 번호 사이에 슬래시(/)를 넣어 사용합니다. | grid-row: 2/4 |