728x90
01 반응형 웹 소개
- 반응형 웹
- 웹 페이지 하나로도 데스크톱, 태블릿PC, 스마트폰에 맞게 디자인이 자동으로 반응해서 변경되는 웹 페이지
○ 개발 효율성, 유지 보수 용이
- 미디어 쿼리(media query)를 사용해 개발
- 뷰포트 설정
- meta 태그 : 추가적인 웹 페이지 정보를 제공
<meta name="title" content="HTML5 프로그래밍을 위한 페이지">
<meta name="description" content="meta 태그의 title 속성과 description 속성입니다.">
- 뷰포트와 관련한 meta 관련 설정
- viewport meta 태그 - name 속성에 viewport가 입력된 meta 태그
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
- viewport meta 태그의 content 속성에 입력할 수 있는 값
| width | 화면 너비 | width=240 |
| height | 화면 높이 | height=800 |
| initail-scale | 초기 확대 비율 | initial-scale=2.0 |
| user-scalable | 확대 및 축소 가능 여부 | user-scalable=no |
| minimum-scale | 최소 축소 비율 | minimum-scale=1.0 |
| maximum-scale | 최대 확대 비율 | maximum-scale=2.0 |
| target-densitydpi | DPI 지정 | target-densitydpi=medium-dpi |
02 반응형 웹을 위한 설정
- 미디어 쿼리 설정
- @-규칙@-rule
- 스타일시트 내부에서 특정한 규칙을 표현하는 데 사용
- @import 규칙 - 외부스타일을 가져옴
- @font-face규칙 - 글꼴을 추가로 정의
@media (<미디어 쿼리>){
<CSS 코드>
}
- media 속성
- link 태그에 입력해서 해당 미디어 쿼리 조건에 맞는 장치에서만 CSS 파일을 불러올 때 사용
<link rel="stylesheet" href="<파일 이름>" media="<미디어 쿼리>">
<!DOCTYPE html>
<head>
<title>Media Type</title>
<style>
@media screen {
body{background-color: rebeccapurple;}
}
@media print {
body{background-color: bisque;}
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet consectetur</h1>
<p>lorReprehenderit laboris mollit labore sit consequat adipisicing irure tempor non eiusmod proident culpa. Consectetur tempor sint magna aliquip ad exercitation magna voluptate duis adipisicing fugiat consectetur sunt. Laborum dolor culpa minim cupidatat in Lorem et quis culpa incididunt id cupidatat non. Sunt in veniam eu nisi fugiat officia ea est minim ex excepteur nisi. Mollit commodo cupidatat ex aliquip tempor excepteur. Ex ipsum nulla pariatur ipsum ad quis deserunt amet.
Lorem consequat aliquip adipisicing et minim esse do cillum sunt magna consequat. Veniam consectetur incididunt proident labore ipsum. Incididunt occaecat est cillum culpa sint pariatur. Labore eiusmod in sit irure proident irure minim nulla.</p>
</body>
</html>
화면에서 볼 때는 블루베리 색이 나오지만, ctrl+p로 'pdf로 저장', '배경그래픽' 으로 설정해주면 프린트 화면에서는 다른 색상이 보임을 확인할 수 있다.
8-4.html
<!DOCTYPE html>
<head>
<title>Media Type</title>
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
</head>
<body>
<h1>Lorem ipsum dolor sit amet consectetur</h1>
<p>lorReprehenderit laboris mollit labore sit consequat adipisicing irure tempor non eiusmod proident culpa. Consectetur tempor sint magna aliquip ad exercitation magna voluptate duis adipisicing fugiat consectetur sunt. Laborum dolor culpa minim cupidatat in Lorem et quis culpa incididunt id cupidatat non. Sunt in veniam eu nisi fugiat officia ea est minim ex excepteur nisi. Mollit commodo cupidatat ex aliquip tempor excepteur. Ex ipsum nulla pariatur ipsum ad quis deserunt amet.
Lorem consequat aliquip adipisicing et minim esse do cillum sunt magna consequat. Veniam consectetur incididunt proident labore ipsum. Incididunt occaecat est cillum culpa sint pariatur. Labore eiusmod in sit irure proident irure minim nulla.</p>
</body>
</html>
print.css
@media print {
body{background-color: orchid;}
}
screen.css
@media screen {
body{background-color: olive;}
}
- 미디어 타입과 특징
- 지원하는 미디어 타입
| all | 모든 장치 |
| aural | 음성 장치 |
| braille | 표시 전용 점차 장치 |
| handheld | 손으로 들고 다니는 작은 장치 |
| 프린터 | |
| projection | 프로젝터 |
| screen | 화면 |
| tty | 터미널 등 그림을 띄울 수 없는 장치 |
| tv | 텔레비전 |
| embossed | 인쇄 전용 점자 장치 |
- 미디어 타입 연산자
| only | '해당 장치에서만'을 나타냄 |
| not | '해당 장치를 제외한'을 나타냄 |
- orientation을 제외한 모든 속성은 min 접두사와 max 접두사를 붙일 수 있다
- and 연산자를 사용해 조건을 합칠 수도 있다
- 미디어 특징
| width | 화면 너비 |
| height | 화면 높이 |
| device-width | 장치 너비 |
| device-height | 장치 높이 |
| orientation | 장치 방향 |
| device-aspect-ratio | 화면 비율 |
| color | 장치 색상 비트 |
| color-index | 장치에서 표현 가능한 최대 색상 개수 |
| monochrome | 흑백 장치의 픽셀당 비트 개수 |
| resolution | 장치 해상도 |
<!DOCTYPE html>
<head>
<title>Media Type</title>
<style>
/*스마트폰*/
@media screen and (max-width:767px){
body{background-color: rebeccapurple;}
}
/*테블릿pc 세로*/
@media screen and (min-width:768px) and (max-width: 959px){
body{background-color: bisque;}
}
/*테블릿pc 가로와 데스크톱 */
@media screen and (min-width:960px) {
body { background-color: brown;}
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet consectetur</h1>
<p>lorReprehenderit laboris mollit labore sit consequat adipisicing irure tempor non eiusmod proident culpa. Consectetur tempor sint magna aliquip ad exercitation magna voluptate duis adipisicing fugiat consectetur sunt. Laborum dolor culpa minim cupidatat in Lorem et quis culpa incididunt id cupidatat non. Sunt in veniam eu nisi fugiat officia ea est minim ex excepteur nisi. Mollit commodo cupidatat ex aliquip tempor excepteur. Ex ipsum nulla pariatur ipsum ad quis deserunt amet.
Lorem consequat aliquip adipisicing et minim esse do cillum sunt magna consequat. Veniam consectetur incididunt proident labore ipsum. Incididunt occaecat est cillum culpa sint pariatur. Labore eiusmod in sit irure proident irure minim nulla.</p>
</body>
</html>
<!DOCTYPE html>
<head>
<title>Media Type</title>
<style>
@media screen and (orientation:portrait) {
body {background-color: aquamarine;}
}
@media screen and (orientation:landscape) {
body {background-color: rgb(141, 112, 245);}
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet consectetur</h1>
<p>lorReprehenderit laboris mollit labore sit consequat adipisicing irure tempor non eiusmod proident culpa. Consectetur tempor sint magna aliquip ad exercitation magna voluptate duis adipisicing fugiat consectetur sunt. Laborum dolor culpa minim cupidatat in Lorem et quis culpa incididunt id cupidatat non. Sunt in veniam eu nisi fugiat officia ea est minim ex excepteur nisi. Mollit commodo cupidatat ex aliquip tempor excepteur. Ex ipsum nulla pariatur ipsum ad quis deserunt amet.
Lorem consequat aliquip adipisicing et minim esse do cillum sunt magna consequat. Veniam consectetur incididunt proident labore ipsum. Incididunt occaecat est cillum culpa sint pariatur. Labore eiusmod in sit irure proident irure minim nulla.</p>
</body>
</html>
03 반응형 웹 패턴
- 반응형 웹 패턴
- 규칙
- HTML 태그 구성은 모바일 장치를 기준으로 함
- float 태그의 left와 right를 활용해 적당한 위치에 놓음
1. 데스크톱에서는 메뉴가 왼쪽에 있고, 모바일 장치에서는 메뉴가 위쪽에 있는 패턴
<!DOCTYPE html>
<head>
<title>패턴1</title>
<style>
* {
margin: 0;
padding: 0;
} /*전체선택자로 여백없애기*/
body{
width: 960px;
margin: 0 auto; /*가운데 정렬*/
overflow: hidden;
}
#menu{
width: 260px;
float: left;
}
#section{
width: 700px;
float: right;
}
@media screen and (max-width:767px){
body {width: auto;}
#menu { width: auto; float: none;}
#section { width: auto; float: none;}
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</div>
<div id="section">
<h1>lorem ipsum</h1>
<p>loDuis cupidatat Lorem mollit ut consequat tempor. Aute commodo mollit laboris adipisicing adipisicing eu. Et cillum irure sit dolor proident fugiat voluptate nisi incididunt. Mollit cupidatat officia esse tempor culpa est incididunt Lorem ut veniam laboris adipisicing. Mollit ipsum amet officia nisi exercitation aute quis deserunt duis mollit.
Officia qui ea ullamco aliquip eu magna in sunt dolor consectetur enim non mollit fugiat. Veniam aliquip eiusmod laboris do mollit nulla tempor cupidatat. Ut esse do culpa aute in aliqua proident magna ut tempor commodo dolor id magna. Culpa velit et labore ad nisi ea velit. Do minim sit aliqua proident irure.
Eiusmod id id sint veniam dolor sint esse adipisicing velit laboris culpa sint sunt. Culpa dolor cupidatat ea enim pariatur proident Lorem nisi eu do nisi aliqua adipisicing. Eu tempor fugiat Lorem magna irure ullamco ullamco aliquip occaecat quis deserunt nisi veniam. Magna proident culpa laboris incididunt pariatur sit deserunt laboris ullamco incididunt ullamco. Occaecat nulla eu adipisicing culpa. Non eiusmod non qui ullamco enim dolore sit culpa velit. Consectetur veniam sit occaecat excepteur.</p>
</div>
</body>
</html>
2. 데스크톱에서는 메뉴가 오른쪽에 있고, 모바일 장치에서는 메뉴가 위쪽에 있는 패턴
<!DOCTYPE html>
<head>
<title>패턴1</title>
<style>
* {
margin: 0;
padding: 0;
} /*전체선택자로 여백없애기*/
body{
width: 960px;
margin: 0 auto; /*가운데 정렬*/
overflow: hidden;
}
#menu{
width: 260px;
float: right; /*여기*/
}
#section{
width: 700px;
float: left; /*여기*/
}
li {list-style: none;}
@media screen and (max-width:767px){
body {width: auto;}
#menu { width: auto; float: none;}
#section { width: auto; float: none;}
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</div>
<div id="section">
<h1>lorem ipsum</h1>
<p>loDuis cupidatat Lorem mollit ut consequat tempor. Aute commodo mollit laboris adipisicing adipisicing eu. Et cillum irure sit dolor proident fugiat voluptate nisi incididunt. Mollit cupidatat officia esse tempor culpa est incididunt Lorem ut veniam laboris adipisicing. Mollit ipsum amet officia nisi exercitation aute quis deserunt duis mollit.
Eiusmod id id sint veniam dolor sint esse adipisicing velit laboris culpa sint sunt. Culpa dolor cupidatat ea enim pariatur proident Lorem nisi eu do nisi aliqua adipisicing. Eu tempor fugiat Lorem magna irure ullamco ullamco aliquip occaecat quis deserunt nisi veniam. Magna proident culpa laboris incididunt pariatur sit deserunt laboris ullamco incididunt ullamco. Occaecat nulla eu adipisicing culpa. Non eiusmod non qui ullamco enim dolore sit culpa velit. Consectetur veniam sit occaecat excepteur.</p>
</div>
</body>
</html>
3. 데스크톱에서는 메뉴가 왼쪽에 있고, 모바일 장치에서는 메뉴가 아래쪽에 있는 패턴
<!DOCTYPE html>
<head>
<title>패턴1</title>
<style>
* {
margin: 0;
padding: 0;
} /*전체선택자로 여백없애기*/
body{
width: 960px;
margin: 0 auto; /*가운데 정렬*/
overflow: hidden;
}
#menu{
width: 260px;
float: left;
}
#section{
width: 700px;
float: right;
}
li {list-style: none;}
@media screen and (max-width:767px){
body {width: auto;}
#menu { width: auto; float: none;}
#section { width: auto; float: none;}
}
</style>
</head>
<body>
<div id="section">
<h1>lorem ipsum</h1>
<p>loDuis cupidatat Lorem mollit ut consequat tempor. Aute commodo mollit laboris adipisicing adipisicing eu. Et cillum irure sit dolor proident fugiat voluptate nisi incididunt. Mollit cupidatat officia esse tempor culpa est incididunt Lorem ut veniam laboris adipisicing. Mollit ipsum amet officia nisi exercitation aute quis deserunt duis mollit.
gna aute eiusmod est nisi exercitation ullamco. Laboris pariatur excepteur sunt sunt commodo quis aute deserunt elit. Est aliqua nostrud consequat eiusmod nostrud veniam nisi elit velit elit nisi velit. Enim tempor commodo magna ullamco qui id fugiat culpa reprehenderit amet aute cillum ex cupidatat. Commodo adipisicing culpa veniam eiusmod proident aliquip sunt laborum ullamco incididunt sunt.
Eiusmod id id sint veniam dolor sint esse adipisicing velit laboris culpa sint sunt. Culpa dolor cupidatat ea enim pariatur proident Lorem nisi eu do nisi aliqua adipisicing. Eu tempor fugiat Lorem magna irure ullamco ullamco aliquip occaecat quis deserunt nisi veniam. Magna proident culpa laboris incididunt pariatur sit deserunt laboris ullamco incididunt ullamco. Occaecat nulla eu adipisicing culpa. Non eiusmod non qui ullamco enim dolore sit culpa velit. Consectetur veniam sit occaecat excepteur.</p>
</div>
<div id="menu">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</div>
</body>
</html>p태그와 li태그 순서를 바꾼다!
4. 데스크톱에서는 메뉴가 오른쪽에 있고 모바일 장치에서는 메뉴가 아래쪽에 있는 패턴
<!DOCTYPE html>
<head>
<title>패턴1</title>
<style>
* {
margin: 0;
padding: 0;
} /*전체선택자로 여백없애기*/
body{
width: 960px;
margin: 0 auto; /*가운데 정렬*/
overflow: hidden;
}
#menu{
width: 260px;
float: right;
}
#section{
width: 700px;
float: left;
}
li {list-style: none;}
@media screen and (max-width:767px){
body {width: auto;}
#menu { width: auto; float: none;}
#section { width: auto; float: none;}
}
</style>
</head>
<body>
<div id="section">
<h1>lorem ipsum</h1>
<p>loDuis cupidatat Lorem mollit ut consequat tempor. Aute commodo mollit laboris adipisicing adipisicing eu. Et cillum irure sit dolor proident fugiat voluptate nisi incididunt. Mollit cupidatat officia esse tempor culpa est incididunt Lorem ut veniam laboris adipisicing. Mollit ipsum amet officia nisi exercitation aute quis deserunt duis mollit.
Eiusmod id id sint veniam dolor sint esse adipisicing velit laboris culpa sint sunt. Culpa dolor cupidatat ea enim pariatur proident Lorem nisi eu do nisi aliqua adipisicing. Eu tempor fugiat Lorem magna irure ullamco ullamco aliquip occaecat quis deserunt nisi veniam. Magna proident culpa laboris incididunt pariatur sit deserunt laboris ullamco incididunt ullamco. Occaecat nulla eu adipisicing culpa. Non eiusmod non qui ullamco enim dolore sit culpa velit. Consectetur veniam sit occaecat excepteur.</p>
</div>
<div id="menu">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</div>
</body>
</html>
728x90
'HTML' 카테고리의 다른 글
| [JavaScript] 문서 객체 모델 (0) | 2021.11.24 |
|---|---|
| [JavaScript] 자바스크립트 기본 문법 (0) | 2021.11.14 |
| [CSS] 레이아웃 구성 (0) | 2021.10.28 |
| [CSS] CSS3 속성 (0) | 2021.10.11 |
| [CSS] CSS3 기초 : 선택자와 단위 (0) | 2021.10.10 |
