1. CSS 추가 규칙
● CSS 추가 규칙
- 스타일시트에서 앞에 @를 붙여서 만든 사용자 지정 규칙
1) @import 규칙
- 다른 CSS 파일을 불러오는 규칙
2) font-face 규칙
- 웹 폰트를 설정하는 규칙
3) @media 규칙
- 미디어 쿼리를 통해 지정된 장치나 조건에 맞는 스타일 블록을 적용하도록 지정하는 규칙
1) @import 규칙
- CSS 파일에서 다른 CSS 파일을 불러오는 규칙
※ 성능이 좋지 않아 link 태그로 대체하는 것이 좋다.
|
common.css : body {...} h1 {...} header {...}
#wrap {...} #gnb {...} |
page.css : @import url('common.css');
#wrap {...} #page {...} #lnb {...}
|
2) @font-face 규칙
● 사용자의 컴퓨터에 설치되지 않은 글꼴을 사용하도록 설정
- 웹 폰트를 사용자의 브라우저에서 다운로드 해 사용하도록 설정
- 용량 등의 문제로 인해 많이 사용하지 않는 규칙
<style>
@font-face {
font-family: 'NanumGothic';
src: local('NanumGothic'), url('NanumGothic.ttf');
}
body {
font-family: 'NanumGothic', sans-serif;
}
</style>
3) @media 규칙
● 다양한 장치에서 HTML 문서가 적절한 형태를 갖도록 하는 규칙
- 하나의 HTML 문서로 다양한 장치에서 사용하기 위해 부각되는 규칙
- @media 규칙은 미디어 타입과 함께 사용
- 미디어 쿼리(Media query)를 통해 장치를 구분하거나 장치의 크기의 비율 등을 구분할 수 있다.
2. 반응형 웹
● 반응형 웹(Responsive Web)이란?
- 가변 그리드, 가변 이미지, 미디어 쿼리를 이용해 하나의 소스(One Code)로 제작된 콘텐트가 다양한 크기의 모바일 기기에 맞춰 해상도와 화면이 동적으로 변하는 기술(One source, Multi-use)
- 이를 통해 사용자는 어떤 크기의 디스플레이에서 사이트를 방문하든 보다 높은 차원의 사용성 경험을 제공 받을 수 있다.
● 반응형 웹 특징
- 하나의 콘텐트에는 오직 하나의 HTML 소스만!
- 특정 장치에 최적화된 여러 벌의 HTML이 있으면 '반응형'DLFKRH GKWL DKSGDMA
- 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있으면 '반응형'이라고 하지 않음
3. 미디어 쿼리(Media Query)
- 미디어 타입과 미디어 속성의 상태를 확인하는 표현식으로 구성
- 미디어 쿼리에서 미디어 속성의 상태를 확인하는 표현식은 생략 가능
- 미디어 쿼리를 사용함으로써, 콘텐츠 자체를 변경하지 않고 출력 기기의 고유 점위에 맞춰 표시하는 게 가능
|
Media Query : @media [ only | not ] media_type [ and | , ] (expression) { css_block }
Expression : (media_feature : expr) |
4. 미디어 타입
- 미디어 타입(Media Type)을 통해 출력하는 기기(Device)를 구분
| 미디어 속성 | 설명 |
| all | 모든 미디어 타입 |
| screen | 화면에 출력 |
| 프린터로 출력 |
5. 미디어 속성
- 미디어 속성(Media Feature)을 사용해 화면 크기, 화면 비율 등을 구분
| 미디어 속성 | 설명 |
| width, height |
화면의 너비와 높이 구분(min, max) |
| device-width, device-height |
기기의 너비와 높이 구분(min, max) |
| orientation | 기기의 방향 |
| device-aspect-ratio | 기기의 화면 비율(min, max) |
| color, color-index | 기기의 색상 비트와 표현 가능한 최대 색상 개수(min, max) |
| resolution | 기기의 해상도(min, max) |
6. 각종 기기 혹은 화면의 최소 너비
| 기기 | 최소 너비 |
| 스마트폰 | 320px |
| 태플릿 PC | 768px |
| 고정 폭 웹 페이지 | 940px, 960px |
| 노트북 컴퓨터 | 1024px |
| 데스크톱 PC | 1024px |
● min-width 속성과 max-width 속성으로 기기의 화면 크기 구분
● 보통 반응형 웹에서는 3단계로 화면 너비 구분
- 모바일 웹 : (max-width : 767px)
- 태플릿 PC : (min-width : 768px) and (max-width : 1023px)
- 일반 웹 페이지 : (min-width : 1024px)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>반응형 웹</title>
<link rel="stylesheet" href="reset.css">
<style>
/* 반응형 웹(responsive web)을 위한 미디어 쿼리 */
/* 중단점: 768px, 1024px */
/* 1. width < 767px */
/* 2. 768px < width < 1023px */
/* 3. 1024px < width */
/* 0. 모든 해상도에서 공통적으로 적용되는 CSS 블록 */
#box {
font-size: 2em;
font-weight: 900;
letter-spacing: -1px;
padding: 1em 2em;
}
/* 1. width < 767px */
/* → (max-width: 767px) */
@media screen and (max-width:767px) {
#box { background-color: darkgreen; }
}
/* 2. 768px < width < 1023px */
/* → (min-width: 768px) and (max-width: 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
#box { background-color: maroon; }
}
/* 3. 1024px < width */
/* → (min-width: 1024px) */
@media screen and (min-width: 1024px) {
#box { background-color: navy; }
}
</style>
</head>
<body>
<div id="box">BOX</div>
</body>
</html>
