header
-------------------------------
nav
-------------------------------
------- ------------- -------
nav article aside
------- ------------- -------
-------------------------------
footer
-------------------------------
. float 방식
. position 방식
. float + position 방식
<title>문서 구조화</title>
<style type="text/css">
*{margin: 0; padding: 0}
body{
width: 100%; height: 700px; font: bolder 20px "돋움"; color: white;
border: 1px solid black;
}
header{
width: 99%; height: 70px; margin: 4px; padding: 0;
background: gray; text-align: center;
}
.container{
width: 99%; height: 565px; margin: 4px; padding: 0;
border: 1px solid black; background: gray; text-align: center;
}
.sidemenu{
width: 25%; height: 520px; margin: 10px; padding: 0;
border: 1px solid black; background: #DBD326;
float: left;
}
.content{
width: 70%; height: 520px; margin: 10px; padding: 0;
border: 1px solid black; background: #DBD326;
float: right;
}
.footer{
width: 99%; height: 40px; margin: 4px; padding: 0;
border: 1px solid black; background: gray; text-align: center;
clear: both;
}
</style>
</head>
<body>
<header><h3>HEADER</h3></header>
<div class="container">
<h3>CONTAINER</h3>
<nav class="sidemenu">SIDE MENU</nav>
<section class="content">CONTENT</section>
</div>
<footer class="footer">FOOTER</footer>
</body>
<title>고정형 레이아웃</title>
<style type="text/css">
*{margin: 0; padding: 0}
html,body{background: #f0f0f0; width: 1536px; height: 754px;}
#nav{
background: orange; width: 236px; height: 754px; border-width: 0;
float: left;
}
#content{
background: skyblue; width: 1300px; height:754px; border-width: 0; float: left;
}
</style>
</head>
<body>
<section id="container">
<nav id="nav">
<h3>네비게이션</h3>
</nav>
<article id="content">
<h3>고정형입니다</h3>
<p>
- 콘텐츠의 특정 가로폭을 고정한 레이아웃이다<br>
- 가로폭은 px로 설계한다<br>
- 많은 사이트에서 활용되고 있다<br>
- 가장 간편하다 볼 수 있다<br>
- 대형화된 디스플레이에서는 가로폭이 좁고 답답하게 느껴지거나 진부한 인상을 줄 수 있다<br>
- 다양한 디스플레이에 대응하기에는 부족함이 있다
</p>
</article>
</section>
</body>
'IT 공부 > HTML, CSS' 카테고리의 다른 글
| 2차원 변형, 애니메이션 (1) | 2022.05.30 |
|---|---|
| 레이아웃 (0) | 2022.05.30 |
| 배치 (0) | 2022.05.27 |
| layout, display, position (0) | 2022.05.26 |
| box 2-2 (0) | 2022.05.26 |