미샤 사이트를 따라 만들어보자

기본 HTML을 만든다. 스크립트 기타등등없이 CSS만 만들거니깐 간단하게 한다.

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>미샤</title>
</head>

<body>
</body>

</html>

일단 파란 부분을 만들어보자. ( 회색 영역 )

DIV를 추가한다.

<div class="l-header-global">
</div>

BEAUTYNET, MISSHA, A’PIEU, SWISSPURE 4개 메뉴를 UL로 만들고 DIV로 감싼다.

class 이름도 미샤 홈페이지랑 똑같이 한다.

<div class="l-header-global">
    <div class="header-global-left">
        <ul class="global-menu global-menu-brand">
            <li class="menu-item"><a href="#">BEAUTYNET</a></li>
            <li class="menu-item"><a href="#">MISSHA</a></li>
            <li class="menu-item"><a href="#">A’PIEU</a></li>
            <li class="menu-item"><a href="#">SWISSPURE</a></li>
        </ul>
    </div>
</div>

css 폴더를 하나 만들고 거기에 layout.css를 만든다.

.l-header-global {
    width: 100%;
    min-width: 1200px;
    background-color: #959697;
    display: block;
}

/* .l-header-global:after를 꼭 추가해야 회색 div의 높이가 잡힌다 */
.l-header-global:after {
    content:'';
    display:block;
    clear:both;
}

.header-global-left {
    float: left;
    padding-left: 15px;
}

.menu-item {
    display: inline-block;
}

.global-menu-brand .menu-item a {
    padding: 0 15px;
    height: 40px;
    display: block;
    line-height: 40px;
    font-size: 11px;
    font-family: Verdana, sans-serif;
    color: #fff;
}

이제 완성됐다. 결과는??

거의 똑같이 구현됐다.

최종 소스:

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>미샤</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/layout.css">
</head>

<body>
<div class="l-header-global">
    <div class="header-global-left">
        <ul class="global-menu global-menu-brand">
            <li class="menu-item"><a href="#">BEAUTYNET</a></li>
            <li class="menu-item"><a href="#">MISSHA</a></li>
            <li class="menu-item"><a href="#">A’PIEU</a></li>
            <li class="menu-item"><a href="#">SWISSPURE</a></li>
        </ul>
    </div>
</div>
</body>

</html>