Preface
이번 장에선 반응형 웹을 만드는 방법을 공부했다.
내용이 워낙 많아 공부할 때도, 블로그를 작성할 때도 시간이 오래 걸렸지만, 내용 자체는 한 번 읽어보면 충분히 이해할 수 있는 내용들이라 어렵지 않게 진도를 나갈 수 있었다.
이번 장을 마지막으로 책에 있는 CSS의 모든 내용을 끝냈는데, 후반부의 내용들은 아직 익숙치 않아 CSS를 사용하여 막힘 없이 원하는 웹 페이지를 제작하려면 시간이 조금 걸릴 것 같다.
주변에서 웹 공부가 프로그래밍 언어나 DB 공부보다 훨씬 재밌다는 이야기를 많이 들었는데, 나는 잘 모르겠다.
확실히 난이도 자체가 쉽긴 하지만, 난 아무래도 백엔드 영역 공부가 훨씬 흥미롭고 재미있는 것 같다.
1. 반응형 웹 알아보기
- 반응형 웹 디자인: 웹 요소를 화면 크기에 맞춰 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현하는 방법
- 뷰포트(viewport): 스마트폰 화면에서 실제 내용이 표시되는 영역
→ <meta> 태그를 이용해 <head> 태그 사이에 작성한다.
<meta nema="viewport" content="속성1=값1, 속성2=값2, ...">
- 뷰포트의 속성
| 종류 | 설명 | 사용 가능한 값 | 기본값 |
| 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">
- 뷰포트를 기준으로 하는 단위
1) vw: 1vw는 뷰포트 너비의 1%이다.
2) vh: 1vh는 뷰포트 높이의 1%이다.
3) vmin: 뷰포트 너비와 높이 중에서 가장 작은 값의 1%이다.
4) vmax: 뷰포트의 너비와 높이 중에서 큰 값의 1%이다.
- 크롬 개발자 도구의 디바이스 모드: 반응형 웹 사이트를 제작하는 동안이나 제작이 끝난 사이트를 살펴보며 여러 기기에서 제대로 보이는지 테스트 할 수 있게 해준다.
→ 단축키: 'option' + 'command' + 'i'
2. 미디어 쿼리 알아보기
- 미디어 쿼리: 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법
→ 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다.
- 미디어 쿼리는 @media 속성을 사용해 지정한다.
→ <style> 태그 사이에 사용하며 대소문자를 구별하지 않는다.
1) only: 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않는다.
2) not: not 다음에 지정하는 미디어 유형을 제외한다.
3) and: 조건을 여러 개 연결해서 추가할 수 있다.
@media [only | not] 미디어 유형 [and 조건]@media screen and (min-width: 768px) and (max-width: 1439px) {
...
}
- 미디어 유형의 종류
→ screen이 아닌 미디어에서는 스크롤을 포함한 전체 문서를 height로 지정해야 한다.
1) all: 모든 미디어 유형에서 사용할 CSS를 정의한다.
2) print: 인쇄 장치에서 사용할 CSS를 정의한다.
3) screen: 컴퓨터 스크린에서 사용할 CSS를 정의한다. (스마트폰의 스크린도 포함된다.)
4) tv: 음성과 영상이 동시에 출력되는 TV에서 사용할 CSS를 정의한다.
5) aural: 음성 합성 장치(화면을 읽어 소리로 출력해주는 장치)에서 사용할 CSS를 정의한다.
6) braille: 점자 표시 장치에서 사용할 CSS를 정의한다.
7) handheld: 패드처럼 손에 들고 다니는 장치를 위한 CSS를 정의한다.
8) projection: 프로젝터를 위한 CSS를 정의한다.
9) tty: 디스플레이 기능이 제한된 장치에 맞는 CSS를 정의한다. (픽셀 단위 사용 불가)
10) embossed: 점자 프린터에서 사용할 CSS를 정의한다.
- 웹 문서의 가로 세로 속성
1) width, height: 웹 페이지의 가로 너비, 세로 높이를 지정한다.
2) min-width, min-height: 웹 페이지의 최소 너비, 최소 높이를 지정한다.
3) max-width, max-height: 웹 페이지의 최대 너비, 최대 높이를 지정한다.
- 단말기의 가로 세로 속성
1) device-width, device-height: 단말기의 가로 너비, 세로 높이를 지정한다.
2) min-device-width, min-device-height: 단말기의 최소 너비, 최소 높이를 지정한다.
3) max-device-width, max-device-height: 단말기의 최대 너비, 최대 높이를 지정한다.
- orientation 속성: 기기의 방향을 확인할 수 있고, 그에 따라 웹 사이트의 레이아웃을 바꾼다.
1) orientation: portrait: 단말기의 세로 모드를 지정한다.
2) orientation: landscape: 단말기의 가로 모드를 지정한다.
- 중단점(break point): 화면 크기에 따라 서로 다른 CSS를 적용할 분기점
1) 모바일과 태블릿, 데스크톱 정도로만 구분하는 것이 좋다.
2) 모바일의 레이아웃을 기본으로 하여 CSS를 만든다.
3) 모바일 퍼스트 기법: 모바일을 먼저 고려하여 미디어 쿼리를 작성하는 것
- 기기에 따른 픽셀 구분
1) 스마트폰: 모바일 페이지는 미디어 쿼리를 사용하지 않고 기본 CSS로 작성한다.
→ 방향까지 고려해서 제작한다면 min-width의 세로와 가로를 각각 portrait 320px, landscape 480px로 지정한다.
2) 태블릿: 세로 크기가 768px 이상이면 태블릿으로 지정한다.
→ 가로 크기는 데스크톱과 똑같이 1024px 이상으로 지정한다.
3) 데스크톱: 화면 크기가 1024px 이상이면 데스크톱으로 설정한다.
- 미디어 쿼리 적용 방법
1. 외부 CSS 파일로 연결하는 방법
- <link> 태그를 사용해서 연결하는 방법: <head> 태그 사이에 넣는다.
<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">
<link rel="stylesheet" media="print" href="css/print.css">
- @import 문을 사용해서 연결하는 방법: <style> 태그 사이에 넣는다.
@import url(css 파일 경로) 미디어 쿼리 조건
@import url("css/tablet.css") only screen and (min-width: 321px);
2. 웹 문서에 직접 정의하는 방법
- <style> 태그 안에서 media 속성을 사용하여 조건을 지정하고, 그 조건에 맞는 스타일 규칙을 정의하는 방법
<style media="screen and (max-width: 320px)">
body {
background-color: orange;
}
</style>
- 스타일을 선언할 때 @media 문을 사용해 각 조건별로 스타일을 지정해 놓고 스타일을 선택해서 적용하는 방법
<style>
@media screen and (max-width: 320px) {
body {
background-color: orange;
}
}
</style>
3. 그리드 레이아웃 알아보기
- 그리드 레이아웃: 웹 사이트를 여러 개의 컬럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것
1) 시각적으로 안정된 디자인을 만들 수 있다.
2) 업데이트가 편한 웹 디자인을 구성할 수 있다.
3) 요소를 자유롭게 배치할 수 있다.
- 그리드 레이아웃을 만드는 방법
1) 기존에 알고 있던 가변 그리드를 CSS의 float 속성으로 사용
2) 플렉서블 박스 레이아웃을 사용
3) CSS 그리드 레이아웃을 사용
- 플렉서블 박스 레이아웃: 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것
→ 수평 방향이나 수직 방향 중에서 한쪽을 주축으로 정하고 박스를 배치한다.
- CSS 그리드 레이아웃: 수평과 수직 어느 방향이든 배치할 수 있다.
4. 플렉스 박스 레이아웃 알아보기
- 플렉스 박스 레이아웃의 용어
1) 플렉스 컨테이너(부모 박스): 플렉스 박스 레이아웃을 적용할 대상을 무끈ㄴ 요소
2) 플렉스 항목(자식 박스): 플렉스 박스 레이아웃을 적용할 대상
3) 주축: 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향으로, 기본적으로 왼쪽에서 오른쪽이며 수평 망향으로 배치한다.
→ 플렉스 항목의 배치가 시작되는 위치를 '주축 시작점', 끝나는 위치를 '주축 끝점'이라고 한다.
4) 교차축: 주축과 교차하는 방향을 말하며 기본적으로 위에서 아래로 배치한다.
→플렉스 항목의 배치가 시작되는 위치를 '교차축 시작점', 끝나는 위치를 '교차축 끝점'이라고 한다.
- 플렉스 박스 항목을 배치하는 속성
1) justify-content: 주축 방향의 정렬 방법
2) align-items: 교차축 방향의 정렬 방법
3) align-self: 교차축에 있는 개별 항목의 정렬 방법
4) align-content: 교차축에서 여러 줄로 표시된 항목의 정렬 방법
- 특정 요소가 플렉스 컨테이너로 동작하려면 display 속성을 이용해 값을 지정해야 한다.
1) flex: 컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치한다.
2) inline-flex: 컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치한다.
- flex-direction 속성: 플렉스 항목을 배치하는 주축과 방향을 지정한다.
1) row: 주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치한다. (기본값)
2) row-reverse: 주축을 가로로 지정하고 반대로 오른쪽에서 왼쪽으로 배치한다.
3) column: 주축을 세로로 지정하고 위쪽에서 아래쪽으로 배치한다.
4) column-reverse: 주축을 세로로 지정하고 아래쪽에서 위쪽으로 배치한다.
- flex-wrap 속성: 플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정한다.
1) nowrap: 플렉스 항목을 한 줄에 표시한다. (기본값)
2) wrap: 플렉스 항목을 여러 줄에 표시한다.
3) wrap-reverse: 플렉스 항목을 여러 줄에 표시하되, 시작점과 끝점이 바뀐다.
- flex-flow: flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정한다. (기본값: row nowrap)
- justify-content 속성: 주축에서 플렉스 항목 간의 정렬 방법을 지정한다.
1) flex-start: 주축의 시작점에 맞춰 배치한다.
2) flex-end: 주축의 끝점에 맞춰 배치한다.
3) center: 주축의 중앙에 맞춰 배치한다.
4) space-between: 첫 번째 항목과 끝 항목을 주축의 시작점과 끝점에 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치한다.
5) space-around: 모든 항목을 주축에 같은 간격으로 배치한다.
- align-items 속성: 교차축을 기준으로 플렉스 항목을 정렬한다.
1) flex-start: 교차축의 시작점에 맞춰 배치한다.
2) flex-end: 교차축의 끝점에 맞춰 배치한다.
3) center: 교차축의 중앙에 맞춰 배치한다.
4) baseline: 교차축의 문자 기준선에 맞춰 배치한다.
5) stretch: 플렉스 항목을 늘려 교차축에 가득 차게 배치한다.
- align-self 속성: 교차축을 기준으로 특정 항목만 지정한다.
※ align-item 속성은 플렉스 컨테이너를 지정하는 선택자에서 사용하지만, align-self 속성은 플렉스 항목 선택자에서 사용한다.
- align-content 속성: 여러 줄일 때 교차축 정렬 방법을 지정한다.
1) flex-start: 교차축의 시작점에 맞춰 배치한다.
2) flex-end: 교차축의 끝점에 맞춰 배치한다.
3) center: 교차축의 중앙에 맞춰 배치한다.
4) space-between: 첫 번째 항목과 끝 항목을 교차축의 시작점과 끝점에 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치한다.
5) space-around: 모든 항목을 교차축에 같은 간격으로 배치한다.
6) stretch: 플렉스 항목을 늘려서 교차축에 가득 차게 배치한다.
5. CSS 그리드 레이아웃 사용하기
- CSS 그리드 레이아웃: 그리드 항목을 배치할 때 가로와 세로를 모두 사용한다.
→ 가로 방향을 가리키는 줄과 세로 방향을 가리키는 컬럼으로 웹 화면을 구성한다.
- 특정 요소가 그리드 컨테이너로 동작하려면 display 속성을 이용해 값을 지정해야 한다.
1) grid: 컨테이너 안의 항목을 블록 레벨 요소로 배치한다.
2) inline-grid: 컨테이너 안의 항목을 인라인 레벨 요소로 배치한다.
- grid-template-columns(rows) 속성: 그리드 컨테이너 안에 항목을 배치할 때 컬럼과 줄의 크기와 개수를 지정한다.
- 그리드 레이아웃에서는 상대적인 크기를 지정할 수 있도록 fr(fraction) 단위를 사용한다.
grid-template-columns: 1fr, 1fr, 1fr
/* 1대 1대 1 비율로 지정 */
- repeat( ) 함수: 값이 반복될 때 줄여서 표현한다.
grid-template-columns: repeat(3, 1fr);
/* 3개 항목을 1:1:1 비율로 지정 */
- minmax( ) 함수: 최솟값과 최댓값을 지정한다.
→ 줄 높이를 고정하지 않고 유연하게 지정할 수 있다.
#wrapper{
width:600px;
display:grid; /* 그리드 컨테이너 지정 */
grid-template-columns:repeat(3, 1fr); /* 너비가 같은 칼럼 3개 */
grid-template-rows: minmax(100px, auto); /* 줄 높이 최소 100px */
}
- 화면 너비에 따라 자동으로 컬럼 개수를 조절하는 속성
1) auto-fit: 화면이 넓을 때는 남는 공간 없이 꽉 채워서 컬럼을 표시한다.
2) auto-fill: 컬럼의 최소 너비만 표시하고 남는 공간은 그대로 둔다.
#wrapper1{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); /* 화면을 꽉 채울만큼 칼럼 너비를 늘려서 표시 */
margin-bottom:20px;
}
#wrapper2{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); /* 칼럼 최소 너비만큼 채워서 표시 */
}
- 그리드 항목의 간격을 조절하는 속성
1) grid-column-gap: 컬럼과 컬럼 사이의 간격을 지정한다.
2) grid-row-gap: 줄과 줄 사이의 간격을 지정한다.
3) grid-gap: 컬럼과 줄 사이의 간격을 한꺼번에 지정한다. (첫 번째 값이 row)
- 그리드 라인을 이용해 그리드 항목을 배치하는 속성
1) grid-column-start: 컬럼 시작의 라인 번호를 지정한다.
2) grid-column-end: 컬럼 마지막의 라인 번호를 지정한다.
3) grid-column: 컬럼 시작 번호와 끝 번호 사이에 슬래시(/)를 넣어 사용한다.
4) grid-row-start: 줄 시작의 라인 번호를 지정한다.
5) grid-row-end: 줄 마지막의 라인 번호를 지정한다.
6) grid-row: 줄 시작 번호와 끝 번호 사이에 슬래시(/)를 넣어 사용한다.
※ 줄을 하나만 차지할 경우엔 시작 번호만 지정하고 끝 번호는 지정하지 않아도 된다.
#wrapper{
width:700px;
display:grid;
grid-template-columns:repeat(3, 1fr);
grid-template-rows:repeat(3, 100px);
}
.box{
padding:15px;
color:#fff;
font-weight:bold;
text-align:center;
}
.box1 {
background-color:#3689ff;
grid-column:1/4;
}
.box2 {
background-color:#00cf12;
grid-row:2/4;
/* grid-column:1/2; */
grid-column-start:1;
}
.box3 {
background-color:#ff9019;
grid-column:2/4;
/* grid-row:2/3; */
grid-row-start:2;
}
.box4 {
background-color:#ffd000;
grid-column-start:3;
grid-row-start:3;
}
- 템플릿 영역을 만들어 그리드 항목 배치하기
1) grid-area 속성을 사용해 각 영역에 템플릿 이름을 지정한다.
2) 컨테이너 요소에서 grid-template-areas 속성을 사용해 템플릿 영역을 어떻게 배치할 것인지 지정한다.
→ 한 줄에 들어갈 템플릿 영역은 큰따옴표로 묶고, 빈 영역으로 표시할 부분엔 마침표를 넣는다.
#wrapper{
width:700px;
display:grid;
grid-template-columns:repeat(3, 1fr);
grid-template-rows:repeat(3, 100px);
grid-template-areas:
"box1 box1 box1"
"box2 box3 box3"
"box2 . box4";
}
.box{
padding:15px;
color:#fff;
font-weight:bold;
text-align:center;
}
.box1 {
background-color:#3689ff;
grid-area:box1;
}
.box2 {
background-color:#00cf12;
grid-area:box2;
}
.box3 {
background-color:#ff9019;
grid-area:box3;
}
.box4 {
background-color:#ffd000;
grid-area:box4;
}
'Web Front > HTML + CSS + 자바스크립트' 카테고리의 다른 글
| [JS] 자바스크립트 기본 문법 (0) | 2022.08.04 |
|---|---|
| [JS] 자바스크립트와 첫 만남 (0) | 2022.08.03 |
| [CSS] 트랜지션과 애니메이션 (0) | 2022.08.01 |
| [CSS] CSS 고급 선택자 (0) | 2022.07.30 |
| [CSS] 이미지와 그라데이션 효과로 배경 꾸미기 (0) | 2022.07.28 |
댓글