반응형
one true layout ?
현대 홈페이지를 만드는 전형적인 구조
<body>
<!-- TODO : one true layout == 현대 홈페이지를 만드는 전형적인 구조 -->
<!-- container == 1 page 디자인 -->
<div id="container">
<!-- 머리말 시작 -->
<header id="header">
<h1>사이트 제목</h1>
</header>
<!-- 머리말 끝 -->
<!-- 사이드메뉴 시작 -->
<aside id="sidebar">
<h2>사이드바</h2>
</aside>
<!-- 사이드메뉴 끝 -->
<!-- 본문 시작 -->
<section id="contents">
<h2>본문</h2>
</section>
<!-- 본문 끝 -->
<!-- 꼬리말 시작 -->
<footer id="footer">
<h2>꼬리말</h2>
</footer>
<!-- 꼬리말 끝 -->
</div>
</body>
/* 여백초기화 */
*{
padding: 0;
margin: 0;
}
/* 전체 페이지 크기 정하기 */
#container{
/* 가로 */
width: 1200px;
/* 중앙 정렬 : auto (오른쪽/왼쪽 여백을 똑같이 정함(중앙 정렬이 됨))*/
/* 사용법 : margin : 상/하 좌/우(auto) */
margin: 20px auto;
}
/* 머리말 */
#header{
/* 세로 */
height: 120px;
/* 임시 */
background-color: gray;
}
/* 디자인 계산 : 전체 width 1200 == 사이드(300px)+본문(900px) */
/* 사이드 바(좌측메뉴) */
#sidebar{
/* 가로 */
width: 300px;
/* 세로 */
height: 600px;
/* 배경색(임시) */
background-color: aqua;
/* 좌측 배치 */
float: left;
}
/* 본문(우측 배치) */
#contents{
/* 가로 */
width: 900px;
/* 세로 */
height: 600px;
/* 배경색(임시) */
background-color: palevioletred;
/* 우측 배치 */
float: right;
}
/* 꼬리말 */
#footer{
/* float 영향제거 */
clear: both;
/* 세로 */
height: 100px;
/* 임시 */
background-color: blueviolet;
}
반응형
'CSS > CSS 이론' 카테고리의 다른 글
| [CSS] 애니메이션 (2) (0) | 2023.08.16 |
|---|---|
| [CSS] 애니메이션 (0) | 2023.08.16 |
| [CSS] 요소의 중앙 배치 (0) | 2023.08.11 |
| [CSS] 절대좌표와 상대좌표 (0) | 2023.08.11 |
| [CSS] float (0) | 2023.08.10 |