왼쪽정렬
html
<body>
<div class="wrapper">
<header>
<h2>header</h2>
</header>
<div class="container celarfix">
<section class="visual">
<h2>visual</h2>
</section>
<section class="contents">
<div class="tab_content">
<h2>tab_content</h2>
</div>
<div class="banner">
<h2>banner</h2>
</div>
<div class="link">
<h2>link</h2>
</div>
</section>
<footer>
<h2>footer</h2>
</footer>
</div>
</div>
</body>
</html>css
/* wrapper */
.wrapper { width: 1200px; height: 700px; text-align: center; line-height: 100px; background: red; }
/* header */
header { float: left;width: 200px; height: 700px; background:#F69393; border:3px solid red;}
/* container */
.container {float: right; width: 1000px; height: 700px;}
/* visual */
.visual { overflow: hidden; position: relative; width: 100%; height: 300px; background:#F69393; border:3px solid red;}
/* contents */
.contents { width: 1000px; height: 200px; background:#F69393;}
/* tab content */
.contents .tab_content { float: left; width: 33.333%; height: 200px; padding: 10px; background:#F69393; border:3px solid red;}
/* banner */
.contents .banner { float: left; width: 33.333%; height: 200px; padding:15px; background:#F69393; border:3px solid red;}
/* link */
.contents .link { float: left; width: 33.333%; height: 200px; padding:15px; background:#F69393; border:3px solid red; }
/* footer */
footer { width: 1000px; height: 200px; background:#F69393; border:3px solid red;}
중앙정렬
html
<body>
<div class="wrapper">
<header>
<h2>header</h2>
</header>
<section class="visual">
<h2>visual</h2>
</section>
<section class="contents">
<div class="tab_content">
<h2>tab_content</h2>
</div>
<div class="banner">
<h2>banner</h2>
</div>
<div class="link">
<h2>link</h2>
</div>
</section>
<footer>
<h2>footer</h2>
</footer>
</div>
</body>
css
charset "utf-8";
/* wrapper */
.wrapper { width: 1200px; height: 700px; margin: 0 auto; text-align: center; line-height: 100px; }
/* header */
header { position: relative; width: 1200px; height: 100px; background:#F69393; border:3px solid red;}
/* visual */
.visual { overflow: hidden; position: relative; width: 100%; height: 300px; background:#F69393; border:3px solid red;}
/* contents */
.contents { width: 1200px; height: 200px; background:#F69393;}
/* tab content */
.contents .tab_content { float: left; width: 400px; height: 200px; padding: 10px; background:#F69393; border:3px solid red;}
/* banner */
.contents .banner { float: left; width: 400px; height: 200px; padding:15px; background:#F69393; border:3px solid red;}
/* link */
.contents .link { float: left; width: 400px; height: 200px; padding:15px; background:#F69393; border:3px solid red; }
/* footer */
footer { width: 1200px; height: 100px; background:#F69393; border:3px solid red;}
'웹디자인기능사 실기 > TIP' 카테고리의 다른 글
| 웹디자인기능사 실기 유형 왼쪽정렬 CONTENTS > TAB (0) | 2021.04.26 |
|---|---|
| 웹디자인기능사 실기 유형 중앙정렬 CONTENTS (0) | 2021.04.25 |
| 웹디자인기능사 실기 유형 중앙정렬 VISUAL FADE IN,OUT + SLIDES (0) | 2021.04.24 |
| 웹디자인기능사 실기 유형 LEFT HEADER + NAV (0) | 2021.04.23 |
| 웹디자인기능사 실기 유형 TOP HEADER + NAV (0) | 2021.04.22 |
