반응형 웹이란?
Last updated
Last updated
반응형 웹 디자인은 화면 요소들을 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해준다.
사이트 하나만 만들면 데스크톱 PC , 모바일 모두 사용할 수 있다.
모든 스마트 기기에서 접속 가능하다
가로 모드에 맞춰 레이아웃 변경 가능하다
사이트 유지, 관ㄹ리가 용이하다.
PC와 모바일 화면의 픽셀 표현 방법이 다른데 뷰포트를 지정하면, 기기 화면에 맞춰 확대하거나 축소 할 수 있다. 뷰포트는 실제 내용이 표시되는 영역이다.
모바일 브라우저들의 기본 뷰포트 너비가 980px이다. 그래서 320px로 맞춰 페이지를 제작해도 980px로 표시하려고 하기때문에 글씨와 그림이 작게 표시되는 것ㅇ디ㅏ.
가장 많이 사용하는 형태
크롬 개발자 도구를 이용해서 반응형 웹 디자인을 쉽게 확인할 수 있다.
그리드 시스템을 사용하면 화면을 단순하게 만들면서도 규칙적으로 배열하기 때문에 레이아웃을 일관성 있게 유지할 수 있다는 장점이 있다.
주로 960px의 12칼럼 그리드를 사용한다.
사이트의 레이아웃을 백분율로 지정하는 것을 가변 그리드 레이아웃이라고 한다.
em , rem1em=16px이기 때문에 글자크기(em) = 글자크기(px) / 16px로 구할 수 있다. em은 부모 요소의 글꼴을 기준으로 해서 중첩된 부모 요소의 글자 크기에 영향을 받는다.
rem은 처음부터 기본 크기를 지정하기 때문에 중간에 기본 값이 바뀌지 않는다.
CSS 이용하기
사용자가 어떤 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS 작성하는 방법
단말기의 경우에는 divice-width로 쿼리를 작성.
orientation: portrait : 단말기 세로 방향
orientation: landscape : 단말기 가로 방향
aspect-ratio)화면의 너비 값을 높이 값으로 나눈 것으로 화면비율을 사용할 수 있다.
<link> 사용하기
<head>태그 내에 삽입한다.
화면 너비에 따라 조건을 추가해서 작성할 수 있다.
@import구문 사용하기
<style>태그 내에 사용한다.
실제로 사이트를 만들다 보면 CSS 파일이 많아지는데 이럴 경우에는 <link>태그를 사용하기를 권장한다.
<style>태그 안에서 media속성을 사용해 조건을 지정
@media 구문을 사용해 각 조건별로 스타일 지정
flex box를 이용해서 반응형 웹 디자인을 구현할 수 있다. 플렉서블 박스 레이아웃이란 그리드 레이아웃을 기본으로 해 flex box를 원하는 위치에 배치하는 것이다. 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있다.
display 속성 : 플렉스 컨테이너 지정하기
플렉서블 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어줘야한다. 즉, 배치하려는 웹 요소들이 있다면 그 요소들을 감싼느 부모요소를 만들어 플렉스 컨테이너로 만들어야한다.
브라우저 접두사를 붙여서 브라우저 버전에 따라 설정
flex-direction : 플렉스 방향 지정하기
플렉스 항목의 주축을 가로로 할지, 세로로할지 지정한다. defualt는 가로
flex-wrap : 플렉스 항목을 한 줄 또는 여러 줄로 배치하기
flex-flow : 플렉스 방향과 여러 줄의 배치를 한꺼번에 지정하기
order : 플렉스 항목의 배치 순서 바꾸기
flex : 플렉스 항목 크기 조절하기
순서대로 늘릴 비율, 줄일 비율, 기본 값이다.
initial은 플렉스 컨테이너의 공간이 부족하면 최소크기까지 줄인다.
<flex-grow>, <flex-shrink>, <flex-basis>은 별도의 속성이지만 묶어쓰기를 권한다.
justify-content : 주축 기준의 배치 방법 지정
align-items, align-self : 교차축 기준의 배치 방법 지정하기
align-self로 특정 항목의 배치 방법을 바꿀 수 있다.
align-center : 여러 줄일 때의 배치 방법 지정하기
all
모든 미디어 유형
인쇄 장치
screen
컴퓨터 스크린(스마트폰 포함)
tv
음성과 영상이 동시 출력되는 TV
aural
음성 합성 장치(주로 화면을 읽어 소리로 출력)
braille
점자 표시 장치
handheld
패드처럼 손에 들고 다니는 장치
projection
프로젝터
tty
디스플레이 기능이 제한된 장치
embossed
점자 프린터
width
뷰포트 너비
device-width 또는 크기
브라우저 기본 값
height
뷰포트 높이
device-height 또는 크기
브라우저 기본 값
user-scalable
확대/축소 가능 여부
yes or no
yes
initial-scale
초기 확대/축소 값
1~10
1
minimum-scale
최소 확대/축소 값
0~10
0.25
maximum-scale
최대 확대/축소 값
0~10
1.6
