📍반응형 웹 디자인

PC 뿐만 아니라 스마트폰이나 태블릿, 스마트 TV 등 브라우저 환경이 다양해짐에 따라 기존 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하기 위한 방법이다.

화면 크기에 '반응'하여 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이다.

반응형 웹의 장점
▪️ 모든 스마트 기기에서 접속 가능
▪️ 가로 모드에 맞추어 레이아웃 변경 가능
▪️ 사이트 유지 / 관리 용이

뷰포트

PC 화면과 모바일 화면의 픽셀 표현 방법이 다른데, 뷰포트를 지정하면 접속한 기기 화면에 맞추어 확대하거나 축소하여 표시할 수 있다.

이때 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역이다.

뷰포트는 head 태그 사이에 작성하며, meta 태그를 이용한다.

기본형 <meta name="vieport" content="<속성1=값>,<속성2=값2>,...">

뷰포트의 속성과 속성 값은 content 속성을 이용하여 지정한다.

▪️ 뷰포트 속성

속성	설명	사용 가능한 값	기본 값
width	뷰포트 너비	device-width 또는 크기	브라우저 기본 값
height	뷰포트 높이	device-height 또는 크기	브라우저 기본 값
user-scalable	확대/축소 가능 여부	yes/no	yes
initial-scale	초기 확대/축소 값	1~10	1
minimum-scale	최소 확대/축소 값	0~10	0.25
maximum-scale	최대 확대/축소 값	0~10	1.6

---

📍가변 그리드 레이아웃

사이트의 모든 요소들을 상대적 크기로 지정해 브라우저의 크기에 따라 탄력적으로 보여주는 방법이다.

사이트의 레이아웃을 백분율로 지정하는 것을 가변 그리드 레이아웃이라 한다.

▪️ CSS를 하나만 정의하면 되는 장점이 있다.

grid system

▪️ 화면을 몇 개의 칼럼(column)으로 나누어 요소들을 배치하는 것으로, 필요할 때마다 칼럼들을 묶어 배치할 수 있다.

▪️ 화면을 단순하게 만들면서도 규칙적으로 배열하기 때문에 레이아웃을 일관성있게 유지할 수 있다.

fluid grid layout

▪️ 어떤 기기에서든 동일한 레이아웃을 가지면서 기기의 특성에 맞게 웹 문서가 표현되려면 문서 안의 각 요소의 너비를 픽셀과 같은 고정 값이 아닌 백분율과 같은 가변 값으로 지정해야한다.

▪️ 가변 그리드 레이아웃을 사용할 경우, 너비 값이 줄어들면 실제 콘텐츠를 확인하기 불편하므로 가능하면 간결한 디자인을 사용하는 것이 좋다.

가변 레이아웃과 가변 요소

✔️ 가변 글꼴
▪️ 픽셀(px) 단위로 지정하면 크기가 고정되기 때문에 화면 크기에 따라 글자 크기도 유동적으로 바뀌게 해야한다.

em 단위
: 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 지정한 것으로 1em은 16px이다.
▪️ 글자 크기 (em) = 글자 크기 (px) / 16px

rem 단위
: em 단위는 부모 요소의 글꼴을 기준으로 하기 때문에 중첩된 부모 요소의 글자 크기에 영향을 받아 em 수치가 계속 달라지는 단점이 있다.
▪️ rem은 처음부터 기본 크기를 지정하기 때문에 중간에 기본 값이 바뀌지 않는다.

✔️ 가변 이미지
▪️ 가변 그리드 레이아웃에서 이미지의 너비가 브라우저의 화면 너비보다 클 경우, 브라우저 화면의 너비를 줄이면 이미지의 일부가 가려지는 현상을 막기 위해 사용한다.

CSS 이용하기
▪️ 이미지를 가변 레이아웃에 맞게 표시하기 위해선 이미지를 감싸고 있는 부모 요소만큼만 커지거나 작아지도록 max-width 속성 값을 100%로 지정한다.
▪️ max-width는 고해상도 이미지는 다운로드 시간이 오래걸리고 텍스트가 포함되있는 이미지일 경우, 모바일에선 텍스트의 내용을 알아보기 힘들 수도 있다.

img 태그와 srcset 속성
▪️ img 태그에서 srcset 속성을 이용하면 화면 너비 값이나 픽셀 밀도에 따라 고해상도 이미지 파일을 지정할 수 있다.
▪️ 화면 너비가 달라질 때 표시할 이미지들을 나열하고 이미지 파일 경로와 함께 너비 값이나 픽셀 밀도도 함께 표시해야한다.

picture 태그와 source 태그
▪️ picture 태그와 source 태그를 함께 사용하여 화면 해상도 뿐만 아니라 화면 너비에 따라 다른 이미지 파일을 표시할 수도 있다.

속성	설명
srcset	이미지 파일의 경로
media	srcset에 지정한 이미지를 표시하기 위한 조건
type	파일 유형
sizes	파일의 크기

✔️ 가변 비디오
▪️ HTML5에서 동영상을 삽입할 때는 기본적으로 video 태그를 사용하므로 css를 사용해 max-width 속성을 100%로 지정한다.

---

📍미디어 쿼리

CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해준다.

▪️ 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다.
▪️ 사용자가 어떤 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하는 방법을 말한다.

미디어 쿼리 구문

@media [only | not ] 미디어 유형 [and 조건] * [and 조건]

▪️ 미디어 쿼리는 @media 속성을 사용하여 어떤 CSS를 적용할 것인지 지정해준다.
▪️ style 태그 사이에 사용하며 대/소문자 구별을 하지 않는다.
▪️ 기본적으로 미디어 유형이 지정되어야하고, 필요할 경우 and 연산자로 조건을 적용한다.

연산자	설명
and	조건을 계속해서 추가함
,(쉼표)	동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표를 이용하여 추가함
only	미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식함 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않음
not	not 다음에 지정하는 미디어 유형을 제외함 ex ) 'not TV'라고 지정하면 TV를 제외한 미디어 유형에만 적용

⚠️ 미디어 유형

미디어 유형	사용 가능한 미디어
all	모든 미디어 유형
print	인쇄 장치
screen	컴퓨터 스크린 (스마트폰 스크린 포함)
tv	음성과 영상이 동시 출력되는 TV
aural	음성 합성 장치 (주로 화면을 읽어 소리로 출력해주는 장치)
braille	점자 표시 장치
handheld	패드처럼 손에 들고 다니는 장치
projection	프로젝터
tty	디스플레이 기능이 제한된 장치 (픽셀 단위를 사용할 수 없음)
embossed	점자 프린터

미디어 쿼리의 조건

1. 웹 문서의 가로 너비와 세로 높이

▪️ 뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있는데, 이때 heigth 값은 미디어에 따라 달라지기 때문에 주의해야 한다.

가로, 세로 값 설정하는 속성	설명
width, height	웹 페이지의 가로 너비, 세로 높이
min-width, min-height	최소 너비, 최소 높이
max-width, max-height	최대 너비, 최대 높이

2. 단말기의 가로 너비와 세로 높이

단말기의 가로, 세로 값 설정하는 속성	설명
device-width, device-height	단말기의 가로 너비, 세로 높이
min-device-width, min-device-height	단말기의 최소 너비, 최소 높이
max-device-width, max-device-height	단말기의 최대 너비, 최대 높이

3. 화면 회전

▪️ 기기를 세로로 보거나 가로로 볼 때 웹 사이트의 화면 방향을 확인해야 한다.
▪️ orientatin 속성은 orientation 값과 landscape 값으로 화면 회전을 체크한다.

속성	설명
orientation : orientation	단말기의 세로 방향
orientation : landscape	단말기의 가로 방향

4. 화면 비율, 단말기의 물리적 화면 비율

▪️ 단말기 브라우저 화면의 너비 값을 높이 값으로 나눈 것으로 숫자 값이나 계산식을 사용할 수 있다.

속성	설명
aspect-ratio	화면 비율 (width 값 / height 값 )
min-aspect-ratio	최소 화면 비율
max-aspect-ratio	최대 화면 비율

속성	설명
device- aspect-ratio	단말기의 화면 비율 (width 값 / height 값 )
min-device-aspect-ratio	단말기의 최소 화면 비율
max-device-aspect-ratio	단말기의 최대 화면 비율

5. 색상 당 비트 수

▪️ 단말기에서 사용하는 최대 색상 비트 수를 미디어 쿼리 조건으로 사용할 수 있다.
▪️ 미디어가 컬러 색상을 지원하지 않는다면 color : 0; 으로 지정한다.

미디어 쿼리 중단점

미디어 쿼리를 작성할 때 서로 다른 CSS를 적용할 화면 크기를 중단점(break point)라고 한다.

▪️ 중단점을 어떻게 지정하는가에 따라 CSS가 달라지고 화면 레이아웃이 바뀐다.

▪️ 모바일을 먼저 고려하여 미디어 쿼리를 작성하는 것을 '모바일 퍼스트'라고 한다.

미디어 쿼리 적용 방법
✔️ 외부 CSS 파일 연결
▪️ link 태그 사용

<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일경로">
/*특정 조건에 맞을 경우, 지정한 css파일을 가져와 적용*/

▪️ @import 구문 사용 : css 정의하는 style 태그 사이에 작성

@import url(css 파일경로) 미디어 쿼리 조건

✔️ 웹 문서에 직접 정의

@import url(css 파일경로) 미디어 쿼리 조건

<style>
	@media 미디어 쿼리 조건 {
    	스타일 규칙 ...
    }
</style>