[책] 반응형 웹 디자인

[책] 반응형 웹 디자인

Do it! 반응형 웹 디자인
김운아 저

다양한 반응형 웹사이트를 만날 수 있는 곳: 미디어 쿼리(http://mediaqueri.es)

검색 엔진 최적화(SEO: Search Engine Optimize)

inline-block 은 diplay 속성의 값 중 inline 속성값처럼 요소들이 한 줄로 보이고, 태그에도 사용할 수 있는 속성값입니다.

함수명	파라미터	적용 요소
calc	width 속성에서 사용할 수 있는 모든 값, 연산 기호	모든 대상

#wrap div {
  width: calc(100%-100px);
}

브라우저 기술 지원 현황을 확인할 수 있는 사이트 : Can I Use…(https://caniuse.com/)

em, rem

em 단위는 자신의 부모 박스에 글자 크기가 지정되어 있을 경우 자식 박스에게 글자 크기가 상속됩니다.

rem 단위는 , 태그를 기준으로 하기 때문에 상속 문제가 발생하지 않습니다.

vw, vh, vmin, vmax

vw(viewport width) : vw 단위는 웹 브라우저의 너비를 100 을 기준으로 하여 크기를 결정하는 단위

vh(viewport height) : vh 단위는 웹 브라우저의 높이를 100 을 기준으로 하여 크기를 결정하는 단위

vmin(viewport minimum) : vmin 단위는 웹 브라우저의 너비와 높이 중 짧은 쪽을 기준으로 하여 크기를 결정하는 단위

vmaz(viewport maximum) : vmax 단위는 웹 브라우저의 너비와 높이 중 큰 쪽을 기준으로 하여 크기를 결정하는 단위

미디어 쿼리

@media [only 또는 not] [미디어 유형] [and 또는 ,(comma)] (조건문) {실행문}

미디어 유형

기기명	설명
all	모든 장치
print	인쇄 장치
screen	컴퓨터 화면 장치 또는 스마트 기기의 화면
tv	영상과 음성이 동시에 출력되는 장치
projection	프로젝터 장치
handheld	손에 들고 다니는 소형 장치
speech	음성 출력 장치
aural	음성 합성 장치(화면을 읽어 소리로 출력해 주는 장치)
embossed	점자 인쇄 장치(화면을 읽어 종이에 점자를 찍어내느 장치)
tty	디스플레이 기능이 제한된 장치
braille	점자 표시 장치

hanheld 는 소형 기기라는 의미가 있지만 실제로 미디어 유형에서 스마트 기기는 screen 을 사용합니다.

조건문

@media (min-width:320px) {실행문}
@media (min-width:320px) and (max-width:768px) {실행문}

min/max(접두사 구문): min 은 최소, 즉 이상이라는 의미가 있고, max 는 최대, 즉 이하라는 의미가 있습니다.

조건문	설명	조건값	min/max 사용 여부
width	웹페이지의 가로 너비값	width 속성에서 사용할 수 있는 모든 속성값	사용함
height	웹페이지의 세로 높이값	//	//
device-width	기기의 가로 너비값	//	//
device-height	기기의 세로 높이값	//	//
orientation	기기의 화면 방향	portrait(세로)landscape(가로)	사용 안 함
aspect-ratio	화면 비율	브라우저 화면 비율(1)브라우저 종횡비(16/9)브라우저 해상도(1280/720)	사용함
device-aspect-ratio	단말기의 화면 비율	기기 화면 비율(1)기기 종횡비(16/9)기기 해상도(640/320)	//
color	기기의 비트 수	8(bit 단위)	//
color-index	기기의 색상 수	128(색상 수 단위)	//
monochrome	기기가 흑백일 때 픽셀당 비트 수	1(bit 단위)	//
resolution	기기의 해상력	300dpi/dpcm	//
scan	TV 의 스캔 방식	progressive/interlace	사용 안 함
grid	기기의 그리드/비트맵	0(비트맵 방식)/1(그리드 방식)	사용 안 함

뷰포트

뷰포트(Viewport)는 화면에 보이는 영역을 제어하는 기술로, 미디어 쿼리로 수많은 기기의 화면 크기를 감지해야 할 때 필요합니다.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

뷰포트 속성

속성명	속성값	속성 설명
width	device-width, 양수	뷰포트의 너비를 지정
height	device-height, 양수	뷰포트의 높이를 지정
initial-scale	양수	뷰포트의 초기 배율 지정기본값은 11 보다 작은 값을 사용하면 축소된 페이지를 표시하고, 1 보다 큰 값을 사용하면 확대된 페이지를 표시
user-scalabel	yes, no	뷰포트의 확대/축소 여부를 지정기본값은 yesno 로 설정하면 사용자가 페이지를 확대/축소 할 수 없음
minimum-scale	양수	뷰포트의 최소 축소 비율을 지정기본값은 0.25
maximum-scale	양수	뷰포트의 최대 확대 비율을 지정기본값은 5.0

minimum-scale 과 maximum-scale 속성값을 각각 1.0 으로 지정할 경우 user-scalable 을 ‘yes’로 지정하더라도 사용자가 화면을 확대하거나 축소할 수 없습니다.

표준 방식의 뷰포트 기술내용 : http://goo.gl/FSTGbn

<style>

@viewport {
  width: device-width; /* width 속성과 동일 */
  zoom: 1; /* initial-scale 속성과 동일 */
  min-zoom: 1; /* minimum-scale 속성과 동일 */
  max-zoom: 1; /* maximum-scale 속성과 동일 */
  user-zoom: zoom; /* user-scalable 속성과 동일 */
}
</style>

플렉서블 박스

display 속성값

속성값	설명
flex	박스를 블록 수준의 플렉서블 박스로 작동
inline-flex	박스를 인라인 수준의 플렉서블 박스로 작동

flex-direction 속성값

속성값	설명
row	박스를 왼쪽에서 오른쪽으로 배치주축은 가로, 교차축은 세로
row-reverse
column	박스를 위에서 아래로 배치주축은 세로, 교차축은 가로
column-reverse

flex-wrap 속성값

속성값	설명
npwrap	박스를 한 줄로 배치, 기본값
wrap	박스를 여러 줄로 배치
wrap-reverse

flex-flow 속성값

속성값	설명
[flex-direction][flex-wrap]	기본값은 row nowrap 첫 번째 속성값은 박스의 배치 방향을 설정두 번째 속성값은 박스를 여러 줄로 배치하는 속성을 설정

justify-content 속성값

속성값	설명
flex-start	박스를 주축의 시작점으로 배치기본값입니다.
flex-end	박스를 주축의 끝점으로 배치
center	박스를 중앙으로 배치
space-between	플렉서블 박스에 빈 공간이 있을 때 사용첫 번째 박스와 마지막 박스를 양쪽 끝으로 붙이고, 나머지 박스는 동일한 간격으로 정렬
space-around	플렉서블 박스에 빈 공간이 있을 때 사용양쪽 끝에 있는 박스의 양 옆에도 공간을 둔 채 자동 정렬

align-items 속성값

속성값	설명
stretch	박스를 확장해서 배치하며, 기본값입니다.
flex-start	박스를 교차축의 시작점에 배치
flex-end	박스를 교차축의 끝점에 배치
center	박스를 교차축의 중앙에 배치
baseline	박스를 시작점에 배치되는 박스의 글자 배이스라인에 맞춰 배치시작점에 배치되는 박스는 교차축의 시작점과 글자 베이스라인의 거리가 가장 먼 박스가 교차축의 시작점에 배치

align-self 속성값

align-items 속성값 설명과 동일

auto : 플렉서블 박스(플렉스 아이템의 부모 박스)의 align-items 속성값을 상속. 부모 박스에 적용된 속성값이 없는 경우 stretch 속성값이 적용됨.

order, flex

속성	속성값
order	0(기본값)정수
flex	[flex-grow][flex-shrink] [flex-basis]0 1 auto (기본값)0 auto (0 1 auto 와 같음)initail(0 1 auto)auto(1 1 auto)none(0 0 auto)
flex-grow	플렉서블 박스에 여백이 있을 때 플렉스 아이템의 크기를 늘릴 수 있는 속성
flex-shrink	플렉서블 박스 안의 플렉스 아이템의 크기가 넘칠 경우 크기를 줄일 수 있는 속성
flex-basis	플렉스 아이템의 기본 크기를 설정하기 위한 속성. width 속성에서 사용할 수 있는 모든 값을 사용할 수 있습니다. 단, 정수속성값을 0 으로 설정한 경우 플렉스 아이템에 flex-grow, flex-shrink 속성값에서 설정한 비율이 그대로 적용됩니다.속성값을 auto 로 설정할 경우 플렉스 아이템이 기본적으로 가지고 있는 크기를 기준으로 flex-grow, flex-shrink 속성값에서 설정한 비율이 적용됩니다.
filter	blur, brightness, saturate, grayscale, contrast, sepia, invert, opacity, hue-rotate