반응형 웹디자인
-웹 사이트의 내용을 그대로 유지하면서
다양한 화면크기에 맞게 웹 사이트를 표시하는 방법
-다양한 화면 크기의 모바일 기기들이 많은데
그 기기에 맞춘 사이트를 각각 별도로 제작을하는것은
비 효율적이니 화면크기에 맞게 반응형으로
요소들을 자동으로 바꾸어 사이트를 구현하는것이
반응형 웹 디자인임
장점>
-모든 스마트 기기에서 접속가능
-가로모드에 맞춘 레이아웃 변경가능
-사이트 유지, 관리 가 용이함
단점>
반응형 웹 기술이 최신 웹 표준인 css3의 일부임
즉, 최신 모던 웹 브라우저에서만 지원된다.
뷰포트>
-웹 브라우져에서 실제 내용이 표시되는 영역!
- pc화면과 모바일 화면의 픽셀 표시 방법이 다르기 떄문에
모바일 화면에서 의도한대로 표시되지않음
그래서 뷰포트로 지정하면 기기 화면에 맞춰 확대/축소해서 내용표시함
*뷰포트로 지정하기
-일반적인 사용법 : 뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정함
*기본적인 뷰포트 설정법
예)
width 뷰포트 너비 / device-width
height 뷰포트 높이 / device-height
user-scalable 확대/축소 가능 여부 yes(기본값) or no
initial-scale 초기 확대/초기 축소 값 1(기본값)~10
minimum-scale 최소확대/축소 값 0~10
(기본값은 0.25)
maximum-scale 최대확대/축소값 0~10
(기본값은 1.6)
<그리드 시스템>
-
화면을 여러 개의 칼럼으로 나누어 ,
필요할때마다 칼럼들을 묶어서 배치하는 방법 -
화면 너비 값에 따라 960 그리드 시스템 ,
1200 그리드 시스템 등으로 나뉨 -
칼럼 갯수에 따라 12 칼럼 그리드 시스템 , 16칼럼 그리드 시스템 , 24 카럼 그리드 시스템으로 나뉨
-
주로 960픽셀 , 12 칼럼의 그리드 시스템을 사용 합니다.
-
고정 그리드 : 화면 너비를 일정하게 고정하고, 레이아웃으로 만듬
-
가변 그리드 : 화면 너비를 % 같은 가변 값으로 지정함
-
가변 그리드 레이아웃을 사용할 경우,
너비값이 줄어들면 ,
실제 콘텐츠를 확인하기 불편하므로
가능하면 간결한 디자인을 사용하는것이 좋습니다.
예)
문서 좌우에 10px 씩 패딩이 있다고 가정한 레이아웃
12 칼럼 그리드
940
60 / 860
140 / 780
220 / 700
고정 그리드 레이아웃일 경우>
고정 그리드 레이아웃이란?
-픽셀 값을 이용해서 크기를 고정을 하는 방법이다.
-예를들면 문서의 맨 바깥부분을 #wrapper 요소로 묶고
너비를 960px로 지정함(고정시킴)
-헤더와 본문 , 사이드바 , 푸터를 배치하고 이때 너비는 px값으로 준다
- 화면의 너비가 좁아질 경우 내용의 일부가 가려질수 있음
예)
#wrapper{
width:960px;
margin:0 auto;
}
header{
width:960px;
height:120px;
}
.content{
float:left;
width:600px;
}
.right-side{
float:right;
width:300px;
}
footer{
clear:both;
width:960px;
}
가변 그리드 레이아웃>>>>
가변그리드 레이아웃 만들기>
- 전체를 감싸는 요소의 너비를 %로 변환(화면에 꽉 차게 하고 싶다면 100% 아니면 여유를 두고 싶으면 적당히)
-전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비를 계산
본문(content) 이나 nav 등등 각 너비값(width)
계산하는법 :
(요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100
이 결과값을 % 퍼센테이지로 쓰면된다.
예)
#wrapper{
width:96%;
margin:0 auto;
}
header{
width: 100%;
height:120px;
}
.content{
float:left;
width:62.5%;
height:400px;
padding:1.5625%;
background-color:#ffd800;
}
.right-side{
float:right;
width:31.25%;
height:400px;
padding:1.5625%;
background-color:#00ff9;
}
footer{
clear:both;
width:100%;
height:120px;
background-color:#c3590a;
}
가변 요소
(글자크기(폰트 사이즈) 이미지 와 동영상 크기)
-모바일용으로 글짜크기를 설정할때
em 단위로 설정을 해야된다
가변 글꼴>
em단위
-부모 요소 폰트의 대문자 M너비를 1em 으로 지정.
1em = 16px
예)
.header-text{ font-size:2em;}
.content{font-size:1.5em;}
.right-side{font-size:1.5em;}
footer{font-size:1.5em;}
rem 단위
-
em 단위는 부모 요소가 중첩될 경우 글자크기가 계속 달라진다
-
rem은 처음부터 기본 크기를 지정하고
그것을 기준으로 글자 크기 지정한다.
예)
body{ font-size:16px;}
.header-text{ font-size:2rem;}
.fluid-text{ font-size:1.5rem;}
가변 이미지>
-
브라우저 창의 너비가 변하더라도
이미지 너비값은 변하지않음 -> 브라우저 화면 너비를 줄일경우 이미지 일부가 가려짐 -
가변 이미지(fluid image)로 만들면 창의 너비에 따라 이미지 너비도 조절됨
1) css를 이용하는 방법
- 이미지를 감싸고 있는 부모 요소만큼 커지거나 작아지도록 max-width 속성 값을 100% 로 지정
예)
.content img{
max-width:100%;
height:auto;
}
근데 문제점은 웹에서는 이미지의 크기(용량)이
2메가바이트인데
모바일 화면에서도 2메가바이트를 다 다운받아야하므로
성능면에서 효율적이지 못함
그래서 해결방법은 아래....
2) 태그와 srcset 속성
- 화면의 너비 값이나 픽셀 밀도에 따라서
고해상도의 이미지 파일을 지정가능함
-이미지가 화질이 떨어지고 이러면 각 각 이미지 별로 설정 하는 방법임
예)
3) 태그와 태그
-화면의 해상도 뿐만 아니라 화면 너비에 따라
다른 이미지 파일 표시할수있음
- 화면 너비값에 따라서 이미지를 따로 보여주고 싶을때!
속성)
srcset 이미지 파일의 경로
media srcset에 지정한 이미지를 표시하기 위한 조건(속성값은 미디어 쿼리 참고)
type 파일 유형
sizes 파일의 크기
예)
가변 비디오>
-화면의 크기에따라 비디오도 같이 줄어들고 늘어나게 할때
css를 사용해 max-width 속성을 100% 로 지정
예)
video{max-width:100%;}
