티스토리 뷰

CSS/연습, 실습

layout 연습02_float이용

SBDB_뉴유 2022. 1. 24. 20:18 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tt</title>

    <!-- CSS -->
    <link rel="stylesheet" href="css/tt.css">
</head>
<body>
    <noscript>"페이지를 보려면 자바스크립트 욥션이 활성화 되어 있어야 합니다."</noscript>

    <div id="wrap">
        <header id="header" class="clearfix">
            <div class="banner">
                <h1 class="logo"><a href="#">NAVER</a></h1>
                <div class="search"></div>
                <div class="setting">
                    <a href="#">네이버를 시작페이지로</a>
                    <a href="#">쥬니어네이버</a>
                    <a href="#">해피빈</a>
                </div>
            </div>
            <nav class="nav">
                <ul>
                    <li><a class="green" href="#">메일</a></li>
                    <li><a class="green" href="#">카페</a></li>
                    <li><a class="green" href="#">블로그</a></li>
                    <li><a class="green" href="#">지식iN</a></li>
                    <li><a class="green" href="#">쇼핑</a></li>
                    <li><a class="green" href="#">쇼핑LIVE</a></li>
                    <li><a class="green" href="#">Pay</a></li>
                    <li><a class="green" href="#">▷TV</a></li>
                    <li><a href="#">사전</a></li>
                    <li><a href="#">뉴스</a></li>
                    <li><a href="#">증권</a></li>
                    <li><a href="#">부동산</a></li>
                    <li><a href="#">지도</a></li>
                    <li><a href="#">VIBE</a></li>
                    <li><a href="#">책</a></li>
                    <li><a href="#">웹툰</a></li>
                </ul>
            </nav>
        </header>
        <!-- //header -->
    </div>
</body>
</html>
/* 링크 초기화 */
a {
    color: #222;
    text-decoration: none;
}

/* 목록 초기화 */
ol {
    list-style: none;
}

/* 스타일 초기화 */
em {
    font-style: normal;
}

/* 클리어픽스 */
.clearfix {
    zoom: 1;
}
.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
}
.clearfix::after {
    clear: both;
}

/* 레이아웃 작성 */
#wrap {
    width: 1200px; 
    margin: 0 auto;
}
#header {
    width: 1200px;
}
#header .banner {
    width: 1200px;
    height: 160px;
    border-bottom: 1px solid #eee;
    padding: 10px;
}
#header .banner .logo {
    float: left;
    width: 20%;
    padding: 28px;
}
#header .banner .logo a {
    font-size: 45px;
    color: #62db72;
}
#header .banner .search {
    float: left;
    width: 52%;
}
#header .banner .setting {
    float:right;
    width: 28%;
    margin-right: 30px;
    font-size: 5px;
    text-align: right;
}
#header .banner .setting a {
    padding: 15px 5px;
}
#header .nav {
    width: 1200px;
    height: 60px;
    border-bottom: 1px solid #eee;
}
#header .nav ul {
    margin: 0 60px;
}
#header .nav li {
    display: inline-block;
    padding: 20px 2px;
}
#header .nav li a {
    font-weight: 1000;
}
#header .nav li a.green {
    color: #62db72;
}

'CSS > 연습, 실습' 카테고리의 다른 글

CSS 스피드런  (3) 2022.02.06
layout 연습01  (3) 2022.01.20

UP NEXT : CSS/연습, 실습

댓글
© 2018 webstoryboy