반응형 웹이란
하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC등 접속하는 디스플레이 종류에
따라 화면 크기가 자동으로 변하게 만드는 기법이다
개인적으로 애플 공식홈페이지가 멋있는것 같다
요새 사이트에서 반응형웹은 필수이다.
알아보자
반응형 웹 디자인을 체크할 수 있는 가장 쉬운 방법은 크롬 브라우저를 사용하는 것이다
F12를 누르면 다음과 같이 html css 정보 및 모바일 화면을 볼 수 있다
일반인이라면 허겁지겁 꺼야되는 화면이지만 개발자는 유용하게 사용할 수 있다
가장 먼저 해주어야 할 것은
HTML파일 내부의 <head> ...</head> 안에 다음과 같이 설정해 주어야 한다
<meta name="viewport" content="width=device-width, initial-scale=1>
모바일 브라우저의 뷰를 실제 크기인 1로 설정하는것을 의미 한다 써주지 않는다면
모바일 브라우저에서 나오는 글자가 매우 작게 표시되어서 읽을 수 없을 것이다
미디어쿼리(Media Query)
라는 방법으로 CSS만으로 제어 한다
크게 screen과 print로 나뉘는데, screen은 일반적으로 모니터를 의미하며 PC,태블릿,스마트폰까지 의미한다 print는 말그대로 만들어진 웹사이트를 프린트 기기를 이용해 프린트 하는 것이다
각 화면크기에 맞게 CSS속성을 적용해 줄 수 있기 때문에 PC에 맞는 CSS 테블릿 또는 스마트폰에 맞는 CSS를 적용 해 줄 수있다
링크로 미디어 쿼리 적용하기
<link rel="stylesheet" type="text/css" media="screen" href="cssscreen.css">
<link rel="stylesheet" type="text/css" media="print" href="cssprint.css">
@import로 미디어 쿼리 적용하기
@import url(cssscreen.css) screen;
@import url(csspprint.css) print;
@media로 미디어 쿼리 적용하기
@media screen{
CSS 속성
}여기서 스크린과 프린트 모든 속성에 똑같이 적용하고 싶다면 media="all" 또는 media 부분 생략하면
된다
예)
<link rel="stylesheet" media="only screen and (min-width:200px) and (max-width:480px)
href="main.css">
@import url("main.css") only screen and (min-width:200px) and (max-width:480px);
@media only screen and (min-width:200px) and (max-width:480px) {
css속성
}
(min-width:200px) and (max-width:480px) 라는 부분이 있는데 해상도에 따른 CSS파일을 따로 지정해
줄 수 있다
이미지 크기 조절하기
모바일 기기의 가로 사이즈는 최대 768px이다 만약 크기가 1000px이 넘어간다면 잘려서 보일 것이다
.img_responsive{
width: 100%; //주목
height: auto;
}요로면 어떤 모바일 기기라도 정확하게 보일 것이다
이미지를 먼저 반응형으로 처리하면 매우 편리하다
max-width와 min-width를 이용하여 처리를 한다
예를 들어 박스의 크기를 max-width: 500px로 지정하면 최대 크기가 500px이고 min-width: 500px이면 최소 크기가 500px이 된다
==
min같은 경우 브라우저 크기가 작아지면 박스의 크기가 500px밑으로 줄어들지 않고 max는 500px이상으로 늘어나지 않는다
미디어 쿼리로 웹 페이지 처리하기
미디어 쿼리는 실제 적용하는 기기에 맞게끔 CSS 내부에 별도의 처리를 해주는 것이다
스마트폰 , 테블릿, 데스크탑 이렇게 세 종류이고 스마트폰과 테블릿의 경우 가로로 볼 때도 있고 세로로 볼 때도 있다
그래서 스마트폰은 세로 해상도를 기본, 테블릿은 가로를 세로를 기본으로 하고 가로를 추가 한다, 데스크탑은 가로를 기본으로 한다
스마트폰은 가로 ~768px(최대), 테블릿 세로인 경우 (최소)768px~992px(최대) , 가로화면은 (최소) 992px~1200px(최대), 데스크탑은 최소 1200px~ 로 나누자
@media (max-width: 767px){
//모바일
}
@media (min-width: 768px) and (max-width: 991px) {
// 테블릿 세로
}
@media (min-width: 992px) and (max-width: 1199px) {
// 테블릿 가로
}
@media (min-width: 1200px) {
// 데스크탑 일반
}
↑ 요것을 기준으로 나누어 css를 짜자
예) 다음과 같은 웹 페이지를 모바일 화면에서 봐 보자
.container{ //전체를 담는 박스
width: 100%;
height: 1000px;
}
.itembox{ //그림과 텍스트가 들어있는 칸
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.imgbox{ //이미지 들어있는 박스
width: 100%;
height: auto;
margin: 2%;
}
.image{ //이미지
width: 100%;
}
.textbox{ //텍스트 들어있는 박스
padding: 20px;
}
@media 를 사용해서 모바일화면(~767px) css를 만들자
다음과 같은 속성을 주었다
@media (max-width: 767px){
.itembox{
display: block; // block으로 만들어 텍스트가 밑에 내려오게 만든다
}
.imgbox{ //현재 가로크기에 맞게 꽉차게
width: 90%;
padding: 20px;
}
.textbox{ //양쪽 정렬
padding: 20px 20px 10px 20px;
text-align: justify;
}
}
결과: 모바일화면에서 세로로 보여진다 이게 바로 반응형
잘 익혀두자
참조: '백견불여일타HTML5&CSS3'
