Layout 예제를 만들어가면서 Layout 개념을 좀 더 확실하게 익히려고 한다.
네이버지식인에 답변된 내용을 토대로 좀 수정을 하고 내용을 보강하면서 연습중이다.
bootstrap 관련 css 와 js scrpit 를 연결했더니 좀 이상하게 나와서 관련 사항은 삭제를 했다.
div 태그는 세로 정렬이 기본이다.
가로 정렬을 하기 위해서는 container div 안에 content div, aside div 를 float 로 위치를 설정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
body {background:#FFFFF;}
p {
font-size:1.5em;
color:#666;
text-align:center;
line-height:80px;
}
.wrap {
/* 전체를 wrap으로 감싸 브라우저의 사이즈에 상관없이 가운데 정렬되게 만든다. */
width:800px;
margin:0 auto;
}
.header {
width:100%;
height:60px;
background:#F8ECE0;
}
.container {}
.container div {
height:160px;
}
.container:after {
display: block;
clear:both;
}
.content {
float:left;
width:80%;
background:#D8D8D8;
}
.aside {
float:left;
width:20%;
background:#A9E2F3;
}
.footer {
clear:both; /* float 영향을 받지 않겠다는 의미 */
width:100%;
height:60px;
background:#81DAF5;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<p>Header</p>
</div>
<div class="container">
<div class="content">
<p>content</p>
</div>
<div class="aside">
<p>aside</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
'Web 프로그램 > Layout' 카테고리의 다른 글
| MDBootstrap Layout 알아둘 사항 (0) | 2019.01.22 |
|---|---|
| CSS 반응형 레이아웃 만들기 (1) | 2018.06.02 |
| div 태그를 이용하여 레이아웃 만들기 (0) | 2018.04.24 |
| bxslider 사용 예제 (폴더내 파일 자동 인식) (0) | 2017.04.28 |
| [PHP] 현재 디렉토리 경로 설정 (자동인식) (0) | 2017.02.20 |
Link2Me