offfff

반응형 웹(HTML Responsive) 본문

프로그래밍

반응형 웹(HTML Responsive)

offfff 2016. 9. 12. 09:00

What is Responsive Web Design?


반응형 웹 디자인(Responsive Web Design)은 웹페이지를 모든 디바이스에서 잘 보이게 해준다.

같은 홈페이지더라도, 데스크탑, 스마트폰, 태블릿 등 기기에 따라 맞는 화면을 보여준다.

반응형 웹 디자인은 CSS와 HTML을 사용해서, 어느 화면에서도 잘 표시될 수 있게,

내용을 리사이즈, 숨김, 줄임, 늘임, 재배치 등의 동작을 수행해서, 화면에 적절히 표시한다.




Create Your Own Responsive Design


반응형 웹을 직접 만들 수도 있다.


<!DOCTYPE html>

<html lang="en-us">

<head>

<style>

.city {

float: left;

margin: 5px;

padding: 15px;

max-width: 300px;

height: 300px;

border: 1px solid black;

}

</style>

</head>

<body>


<h1>반응형 웹 디자인 예제</h1>

<div class="city>

<h2>London</h2>

<p>London is the capital city of England</p>

</div>


<div class="city>

<h2>Paris</h2>

<p>Paris is the capital city of France</p>

</div>


<div class="city>

<h2>Tokyo</h2>

<p>Tokyo is the capital city of Japan</p>

</div>


<div class="city>

<h2>New York</h2>

<p>New York is the most populous city in the United States</p>

</div>


</body>

</html>




Using W3.CSS


반응형 웹을 만드는 또 다른 방법으로, W3.CSS같은 반응형 style sheet를 사용하는 것이다.


<!DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

<body>


<div class="w3-container w3-orange">

<h1>W3.CSS Demo</h1>

<p>Resize this responsive page!</p>

</div>


<div class="w3-row-padding">


<div class="w3-third">

<h2>London</h2>

<p>London is the capital city of England</p>

</div>


<div class="w3-third">

<h2>Paris</h2>

<p>Paris is the capital city of France</p>

</div>


<div class="w3-third">

<h2>Tokyo</h2>

<p>Tokyo is the capital city of Japan</p>

</div>


<div class="w3-third">

<h2>New York</h2>

<p>New York is the most populous city in the United States</p>

</div>


</div>


</body>

</html>




아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_responsive.asp


저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML 심볼(HTML Symbols)  (0) 2016.09.14
HTML 엔티티(HTML Entities)  (0) 2016.09.13
HTML 레이아웃(HTML Layout)  (0) 2016.09.11
HTML 헤더(HTML Head)  (0) 2016.09.10
HTML 자바스크립트(HTML JavaScript)  (0) 2016.09.09
'프로그래밍' Related Articles more