1. 반응형 웹
1) 반응형 웹 디자인
-
웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해준다.
-
pc나 노트북, 스마트폰과 같이 화면 크기가 모두 다른 웹 사이트에 접속하는 경우가 많으므로 기존 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 표시하여야 한다.
2) 뷰포트 : 모바일 기기를 위한 반응형 웹 디자인
-
pc에 맞게 제작된 웹 사이트는 픽셀의 차이로 인해 모바일 기기에서 모든 내용이 작게 표시되는데 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있다.
-
뷰포트는 스마트폰 화면에서 실제 내용이 표시되는 영역이라고 한다.
-
뷰포트는 meta 태그를 이용해 head 태그 사이에 작성한다.
<meta name="viewport" content="속성1=값1', "속성2=값2", ...>3) 뷰포트의 속성
| 종류 | 설명 |
|---|---|
| width | 뷰포트 너비: device-width 또는 크기 (기본값: 브라우저 기본값) |
| height | 뷰포트 높이: device-height 또는 크기 (기본값: 브라우저 기본값) |
| user-scalable | 확대, 축소 가능 여부: yes 또는 no (기본값: yes) |
| initial-scale | 초기 확대, 축소 값: 1~10 (기본값: 1) |
< 뷰포트의 단위 >
- vw (viewport width): 1vw = 너비의 1%
- vh (viewport height): 1vh = 높이의 1%
- vmin (viewport minimum): 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같다.
- vmax (viewport maximum): 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같다.
2. 미디어 쿼리
1) 미디어 쿼리 : 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법이다.
-
미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다.
-> 웹 브라우저의 화면 크기에 따라 사이트 레이아웃이 바뀐다.
@media [only | not] 미디어 유형 [and 조건] * [and 조건]
1) only: 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않는다.
2) not: not 다음에 지정하는 미디어 유형을 제외한다.
3) and: 조건을 여러 개 연결해서 추가할 수 있다.2) 미디어 쿼리의 속성
| 종류 | 설명 |
|---|---|
| width, height | 웹 페이지의 가로 너비, 세로 높이 |
| min-width, min-height | 웹 페이지의 최소 너비, 최소 높이 |
| max-width, max-height | 웹 페이지의 최대 너비, 최대 높이 |
| device-width, device-height | 단말기의 가로 너비, 세로 높이 |
| min-device-width, min-device-height | 단말기의 최소 너비, 최소 높이 |
| max-device-width, max-device-height | 단말기의 최대 너비, 최대 높이 |
| orientation: portrait | 단말기의 세로 모드 |
| orientation: landscape | 단말기의 가로 모드 |
3) 미디어 쿼리의 중단점
- 모바일 퍼스트 기법 : 모바일을 먼저 고려하여 미디어 쿼리를 작성하는 것
4) 미디어 쿼리 적용
- 외부 CSS 파일로 연결하는 방법
<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">@import url (css 파일 경로) 미디어 쿼리 조건- 웹 문서에 직접 정의하는 방법
<style media="<조건>"> {
<스타일 규칙>
}
</style><style>
@media <조건> {
<스타일 규칙>
}
</style>3. 그리드 레이아웃
1) 그리드 레이아웃 : 화면 너비에 따라 웹 문서의 요소를 재배치해야 하는데 이때 기준이 되는 레이아웃을 말한다.
-
웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것이다.
-
화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있다.
< 그리드 레이아웃의 3가지 특징 >
1) 시각적으로 안저된 디자인을 만들 수 있다.
2) 업데이트가 편한 웹 디자인을 구성할 수 있다.
3) 요소를 자유롭게 배치할 수 있다.
2) 그리드 레이아웃을 만드는 방법
-
플렉서블 박스 레이아웃 : 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것이다.
-> 여유 공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수 있다.
-
CSS 그리드 레이아웃 : 수평과 수직 어느 방향이든 배치할 수 있다.
-> 대부분 모던 브라우저에서 사용할 수 있다.
3) 플렉스 박스 레이아웃
① 플렉스 컨테이너 (부모 박스)
- 플레스 박스 레이아웃을 적용할 대상을 묶는 요소이다.
② 플렉스 항목 (자식 박스)
- 플렉스 박스 레이아웃을 적용할 대상으로 ①~⑥까지 작은 박스들이 모두 해당된다.
③ 주축
-
플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본방향이다.
-
기본적으로 왼쪽에서 오른쪽이며 수평 방향으로 배치한다.
-
플렉스 항목의 배치가 시작되는 위치를 '주축 시작점', 끝나는 위치를 '주축 끝점'이라고 한다.
④ 교차축
-
주축과 교차하는 방향을 말하며 기본적으로 위에서 아래로 배치한다.
-
플렉스 항목의 배치가 시작되는 위치를 '교차축 시작점', 끝나는 위치를 '교차축 끝점'이라고 한다.
4) 플렉스 박스 레이아웃 속성
| 종류 | 설명 | 속성값 |
|---|---|---|
| display | 플렉스 컨테이너를 지정한다. | flex, inline-flex |
| flext-direction | 플렉스 항목에서 주축과 방향을 지정한다. | row, row-reverse, column, column-reverse |
| flex-wrap | 컨테이너 너비보다 항목이 많을 경우 줄 바꿈 여부를 지정한다. | nowrap, wrap, wrap-reverse |
| flex-flow | 배치 방향과 줄 바꿈을 한번에 지정한다. | flex-direction 속성값과 flex-wrap 속성값을 사용한다. |
| justify-content | 주축에서 플렉스 항목 정렬 방법을 지정한다. | flex-start, flex-end, center, space-between, space-around |
| align-items | 교차축에서 플렉스 항목 정렬 방법을 지정한다. | flex-start, flex-end, center, baseline, stretch |
| aligen-self | 특정 플렉스 항목의 정렬 방법을 지정한다. | flex-start, flex-end, center, baseline, stretch |
| aligen-content | 여러 줄일 때 교차축 정렬 방법을 지정한다. | flex-start, flex-end, center, baseline, stretch |
| flex | 플렉스 항목의 너비를 줄이거나 늘린다. | 1개에서 3개까지의 값, auto, initial |
5) CSS 그리드 레이아웃
- 그리드 항목을 배치할 때 가로와 세로를 모두 사용하여 2차원이라고도 말한다.
6) CSS 그리드 레이아웃 속성
| 종류 | 설명 | 속성값 |
|---|---|---|
| display | 그리드 컨테이너를 지정한다. | grid, inline-grid |
| grid-template-columns | 칼럼을 지정한다. | 크깃값 |
| grid-template-rows | 줄 높이를 지정한다. | 크깃값 |
| grid-column-gap | 칼럼과 칼럼 사이의 간격을 지정한다. | 크깃값 |
| grid-row-gap | 줄과 줄 사이의 간격을 지정한다. | 크깃값 |
| grid-gap | 칼럼과 줄 사이의 간격을 한꺼번에 지정한다. | 크깃값 |
| grid-column-start | 칼럼 시작의 라인 번호를 지정한다. | 숫자 |
| grid-column-end | 칼럼 마지막의 라인 번호를 지정한다. | 숫자 |
| grid-column | 칼럼 시작 번호와 끝 번호 사이에 / 를 넣어 사숫자용한다. | 숫자 |
| grid-row-start | 줄 시작의 라인 번호를 지정한다. | 숫자 |
| grid-row-end | 줄 마지막의 라인 번호를 지정한다. | 숫자 |
| grid-row | 줄 시작 번호와 줄 끝 번호 사이에 / 를 넣어숫자 사용한다. | 숫자 |
| grid-area | 템플릿 이름을 지정한다. | |
| grid-template-areas | grid-area를 사용해 템플릿 그리드를 만든다. | |
| minmax( ) | 최솟값과 최댓값을 지정하는 함수이다. | 크깃값, auto |
| repeat( ) | 같은 값을 여러 번 반복할 떄 사용하는 함수이다. | 크깃값, auto-fill, auto-fit |
