동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
동영상 강좌보기
반응형 웹디자인이란?
반응형 웹디자인은 웹페이지를 모든 장치(데스크톱, 테블릿, 휴대전화)에서 모두 잘 보이게 합니다.
반응형 웹디자인은 HTML 및 CSS를 사용하여 화면의 모양이 잘 보이도록 내용의 크기를 조정, 숨기기, 축소, 확대 또는 이동하는 방법입니다.
뷰포트(viewport) 설정하기
반응형 웹페이지를 만들 때 모든 웹페이지에 다음 <meta>요소를 추가합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
이렇게 하면 페이지의 뷰포트가 설정되어 브라우저에서 페이지의 크기 및 배율을 제어하는 방법에 대한 지침을 제공합니다.
반응형 이미지
반응형 이미지는 모든 브라우저 크기에 맞게 확장되는 이미지입니다.
width속성 사용
width속성을 100%로 설정하면 이미지가 반응하고 크기가 조정됩니다.
<img src="response.jpg" style="width:100%;">
위의 예에서 이미지의 크기는 원래 크기보다 커질 수 있습니다. 더 나은 해결책은 대부분의 경우 max-width속성을 대신 사용하는 것입니다.
max-width속성 사용
max-width속성을 100%로 설정하면 원본 크기보다 커야만 이미지가 축소됩니다.
<img src="response.jpg" style="max-width:100%;height:auto;">브라우저 너비에 따라 다른 이미지 표시
HTML <picture>요소를 사용하면 브라우저 창 크기에 따라 서로 다른 이미지를 정의할 수 있습니다.
브라우저 창 크기를 조정하여 너비에 따라 이미지가 어떻게 달라지는지 확인하십시오.
<picture>
<source srcset="smallflower.jpg" media="(max-width: 600px)">
<source srcset="flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="smallflower.jpg" alt="꽃들">
</picture>반응형 텍스트 크기
텍스트 크기는 "뷰포트 너비"를 의미하는 "vw"단위로 설정할 수 있습니다.
그렇게 하면 텍스트 크기가 브라우저 창의 크기를 따릅니다.
<h1 style="font-size:10vw">안녕하세요?</h1>미디어 쿼리(Media query)
텍스트 및 이미지의 크기를 조정하는 것 외에도 반응형 웹페이지에서 미디어쿼리를 사용하는 것이 일반적입니다.
미디어 쿼리를 사용하면 브라우저 크기에 따라 완전히 다른 스타일을 정의할 수 있습니다.
<style>
.left, .right {
float:left;
width:20%; /*너비 20%, 기본값*/
}
.main {
float:left;
width:60%; /*너비 60%, 기본값*/
}
/*미디어 쿼리를 사용하여 800px에서 중단 점 추가:*/
@media (max-width:800px) {
.left, .main, .right {
width:100%; /*너비 100%, 뷰포트가 800픽셀 또는 그 이하일
때*/
}
}
</style>프레임웍 - 부트스트랩
인기 있는 프레임웍은 부트스트랩(Bootstrap)이며 HTML, CSS 및 jQuery를 사용하여 반응형 웹페이지를 만듭니다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<title>Bootstrap 예제</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>첫번째 페이지</h1>
<p>사이즈를 조정하면 반응형효과를 확인할 수 있습니다!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>열 1</h3>
<p>아름다운 세상...</p>
<p>한글은 과학적이고 아름답습니다...</p>
</div>
<div class="col-sm-4">
<h3>열 2</h3>
<p>아름다운 한강...</p>
<p>한강은 크고 깨끗하며 아름답습니다...</p>
</div>
<div class="col-sm-4">
<h3>열 3</h3>
<p>설악산...</p>
<p>설악산은 높고 화려하며 빼어납니다...</p>
</div>
</div>
</div>
</body>
</html>
등록된 댓글이 없습니다.