반응형 웹 디자인 - 프레임워크
반응형 디자인을 제공하는 무료 CSS 프레임워크가 많이 있습니다.
W3.CSS 사용
반응형 디자인을 만드는 좋은 방법은 W3.CSS 와 같은 반응형 스타일 시트를 사용하는 것입니다.
W3.CSS를 사용하면 어떤 크기에서도 멋지게 보이는 사이트를 쉽게 개발할 수 있습니다!
W3.CSS 데모
반응을 보려면 페이지 크기를 조정하십시오!
런던
런던은 잉글랜드의 수도입니다.
인구 1,300만 명이 넘는 대도시권을 가진 영국에서 가장 인구가 많은 도시입니다.
파리
파리는 프랑스의 수도입니다.
파리 지역은 1,200만 명이 넘는 인구가 거주하는 유럽에서 가장 큰 인구 중심지 중 하나입니다.
도쿄
도쿄는 일본의 수도입니다.
수도권의 중심이자 세계에서 가장 인구가 많은 대도시권입니다.
예시
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div
class="w3-container w3-blue">
<h1>W3Schools 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>
<p>It is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
<div
class="w3-third">
<h2>Paris</h2>
<p>Paris is
the capital of France.</p>
<p>The Paris area is one of the largest
population centers in Europe,
with more than 12 million
inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It
is the center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
W3.CSS에 대해 자세히 알아보려면 W3.CSS 튜토리얼 을 읽어보세요 .
부트스트랩
또 다른 인기 있는 프레임워크는 부트스트랩입니다. HTML과 CSS를 사용하여 반응형 웹 페이지를 만듭니다.
예시
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white
text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize
this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit
amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit
amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
부트스트랩에 대해 자세히 알아보려면 부트 스트랩 자습서 로 이동하십시오 .
W3Schools Spaces 에 대해 들어본 적이 있습니까? 여기에서 웹사이트를 처음부터 만들거나 템플릿을 사용하여 무료로 호스팅할 수 있습니다.
무료로 시작하세요 ❯* 신용카드 불필요