CSS - 기본6 (간단한 메인화면 만들기)
CSS - 기본5 (간단한 메인화면 만들기)
오늘 만들어볼 레이아웃이다.
소스를 보기전에 혼자서 만들어 보는것을 추천한다.
-------------------------------------------------------------------------------------------------- 소스----------------------------------------------------------------------------------------------
layout_test.html
<header>안녕하세요!</header>
<link rel="stylesheet" href="float_layout.css">
<div id="wrap">
<nav class="left">
<ul>
<li>menu</li>
<li>home</li>
<li>name</li>
</ul>
</nav>
<div class="right">
<h2>반가워요!</h2>
<span class="emotion">:-)</span>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</div>
<div class="realright">
oh~ delicious
</div>
</div>
<footer>마지막입니다!</footer>
layout_test.css
header{
background-color: aqua;
}
ul{
text-align: center;
padding-right: 40px;
list-style : none;
}
h2{
text-align: center;
}
.emotion{
position: absolute;
top: 70px;
right: 30%;
color:fuchsia;
}
#wrap{
overflow: auto;
margin: 20px 0px;
}
.left, .right, .realright{
float:left;
height:200px;
}
.left{
width : 12%;
margin-right: 2%;
background-color:cornflowerblue;
}
.right{
width: 65%;
text-align: center;
background-color:blanchedalmond;
}
.realright{
background-color: forestgreen;
width : 17%;
margin-left: 3%;
text-align: center;
}
footer{
background-color:brown;
clear:left;
}
'BoostCourse > HTML/CSS' 카테고리의 다른 글
css - 기본5 (float, box-sizing) (0) | 2019.11.13 |
---|---|
CSS - 기본4 (레이아웃, Margin, Border, Padding) (0) | 2019.11.13 |
CSS - 기본3 (레이아웃 종류, 블록 엘리먼트) (0) | 2019.11.13 |
CSS - 기본2 (font) (0) | 2019.11.13 |
CSS - 기본1 (css 구조, 우선순위, 상속) (0) | 2019.11.13 |