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;
}