-
반응형 웹 디자인: 웹 사이트의 내용을 유지하면서 다양한 화면 크기에 맞게 웹 사이트 표시
-
뷰포트(viewport): 실제 내용이 표시되는 영역.
-
그리드 시스템: 화면을 여러 개의 칼럼을 나누고 필요할때마다 칼럼들을 묶어 배치하는 방법
-
가변 그리드 레이아웃: 전체를 감싸는 요소의 너비를 %로 변환
-
고정 그리드 레이아웃
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fixed Grid Layout</title>
<style>
#wrapper{
width: 960px;
margin: 0 auto;
}
header{
width: 960px;
height: 120px;
background-color: aqua;
border-bottom: 1px solid black;
}
.header-text{
font-size: 40px;
color: white;
text-align: center;
line-height: 120px;
}
.content{
float: left;
width: 600px;
height: 400px;
padding: 15px;
background-color: yellow;
}
.right-side{
float: right;
width: 300px;
padding: 15px;
height: 400px;
background-color: thistle;
}
footer{
clear: both;
height: 120px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1 class="header-text">고정 그리드 레이아웃</h1>
</header>
<section class="content">
<h4>본문</h4>
</section>
<aside class="right-side">
<h4>사이드바</h4>
</aside>
<footer>
<h4>푸터</h4>
</footer>
</div>
</body>
</html>
-
가변 그리드 레이아웃
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fluid Grid Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#wrapper{
width: 96%;
margin: 0 auto;
}
header{
width: 100%;
height: 120px;
background-color: teal;
border-bottom: 1px solid black;
}
.header-text{
font-size: 32px;
color: white;
text-align: center;
line-height: 120px;
}
.content{
float: left;
width: 62.5%;
height: 400px;
padding: 1.5625%;
background-color: violet;
}
.right-side{
float: right;
width: 31.25%;
height: 400px;
padding: 1.5625%;
background-color: thistle;
}
footer{
clear: both;
height: 120px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1 class="header-text">가변 그리드 레이아웃</h1>
</header>
<section class="content">
<h4>본문</h4>
</section>
<aside class="right-side">
<h4>사이드바</h4>
</aside>
<footer>
<h4>푸터</h4>
</footer>
</div>
</body>
</html>
-
가변 이미지
.content img{
max-width: 100%;
height: auto;
}
'Learning > HTML&JavaScript' 카테고리의 다른 글
Post 방식으로 페이지 이동하기 (0) | 2021.03.30 |
---|---|
과제-반응형 웹 만들고 이력서와 회원가입 페이지 연결하기 (0) | 2020.08.04 |
DOM, BOM (0) | 2020.08.04 |
자바스크립트 함수 2 (0) | 2020.08.03 |
자바스크립트 함수 1 (0) | 2020.07.31 |