대표적인 반응형 프레임워크
1. W3.CSS 활용
2. BS 활용 (= 부트스트랩 활용)
※ 프레임워크 : 미리 만들어놓은 틀
W3.CSS 예제
<!DOCTYPE html>
<html>
<title>홈짱닷컴</title>
<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-green ">
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
</div>
<div class="w3-row-padding ">
<div class="w3-third ">
<h2>HTML</h2>
<p>홈페이지 기본 뼈대</p>
</div>
<div class="w3-third ">
<h2>CSS</h2>
<p>홈페이지 주요 디자인</p>
</div>
<div class="w3-third ">
<h2>JS</h2>
<p>홈페이지 동적 기능</p>
</div>
</div>
</body>
</html>
결과보기
BS 예제
<!DOCTYPE html>
<html lang="kr">
<head>
<title>홈짱닷컴</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.1/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>Homzzang.com</p>
</div>
<div class="row ">
<div class=" col-sm-4 ">
<h3>HTML</h3>
<p>홈페이지 뼈대</p>
</div>
<div class=" col-sm-4 ">
<h3>CSS</h3>
<p>홈페이지 디자인</p>
</div>
<div class=" col-sm-4 ">
<h3>JS</h3>
<p>홈페이지 기능</p>
</div>
</div>
</div>
</body>
</html>
결과보기
※ BS 그리드에 대해서 공부 !!
최신댓글