[Do it!] HTML+CSS+JS 웹표준의 정석 실전 프로젝트 1

SMALL

<목표>

웹 사이트 기획하기
전체 레이아웃 만들기
로고 만들기
내비게이션 만들기

1. html

<!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>Dream Jeju</title>
    <link rel="stylesheet" href="./css/jeju_style.css">
</head>
<body>
    <div id="container">
        <header>
            <div id="logo">
                <a href="index.html">
                    <h1>Dream Jeju</h1>
                </a>
            </div>
            <nav>
                <ul id="topMenu">
                    <li><a href="#">단체 여행 <span>▼</span></a>
                        <ul>
                            <li><a href="#">회사 연수</a></li>
                            <li><a href="#">수학 여행</a></li>
                        </ul>
                    </li>
                    <li><a href="#">맞춤 여행 <span>▼</span></a>
                        <ul>
                            <li><a href="#">4.3 평화 기행</a></li>
                            <li><a href="#">곶자왈 체험</a></li>
                            <li><a href="#">힐링 워크숍</a></li>
                        </ul>
                    </li>
                    <li><a href="#">갤러리 </a></li>
                    <li><a href="#">문의하기 </a></li>
                </ul>
            </nav>
        </header>
        <div id="slideShow">

        </div>
        <div id="contents">
            <div id="tab-menu">
                tab-area
            </div>
            <div id="links">
                quick-link
            </div>
        </div>
        <div id="footer">
            footer
        </div>
    </div>


    <script src="./js/jeju_app.js"></script>
</body>
</html>

2. css

@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

#container {
    margin: 0 auto; /* 화면 중앙에 배치 */
    width: 1200px;
    background-color: aliceblue;
}

header {
    width: 1200px;
    height: 100px;
    background-color: #07c;
}

header>#logo{
    float: left;
    width: 250px;
    height: 100px;
    line-height: 100px; /* height 값과 같게 만들어서 세로 중간에 오도록 */
    padding-left: 20px;
}

#logo h1{
    font-family: 'Merienda', cursive;
    font-weight: 700;
    font-size: 40;
    color: #fff;
    text-shadow: 0 -1px 0 #222; /* 그림자색 (좌우 그림자) */
}

header>nav{
    float: right;
    width: 900px;
    height: 100px;
    background-color: skyblue;
    padding-top: 38px; /*메뉴 자체를 좀 밑으로 내리려고*/
}

#topMenu{
    height: 60px;
}

#topMenu>li{
    float: left;
    position: relative; /* 서브메뉴에 absolute 주기 위해 부모 요소에 relative 지정*/
}

#topMenu>li>a{
    display: block;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px #07c; /* 그림자추가 */
    padding: 20px 60px;
}

#topMenu>li>a>span{
    font-size : 0.5em; /*화살표*/
}

#topMenu>li>a:hover {
    color: #000;
    text-shadow: 0 -1px #07c; /* 글자가 굵어지지 않도록 지정 */
}

#topMenu>li>ul{
    display: none;
    position: absolute;
    width: 160px;
    background-color: rgba(225, 225, 225, 0.6);
    left: 20px;
    margin: 0;
}

#topMenu>li>ul>li{
    padding: 10px 10px 10px 30px;
}

#topMenu>li>ul>li>a{
    font-size: 14px;
    padding: 10px;
    color: #000;
}

#topMenu>li:hover>ul{
    display: block; /* 메인메뉴 항목 위로 오버하면 서브메뉴 표시 */
    z-index: 10; /* 슬라이드 쇼에 가리지 않게 조절 */
}

#topMenu>li>ul>li>a:hover{
    color: #f00;
}

#slideShow {
    width: 1200px;
    height: 300px;
    background-color: yellow;
}

#contents {
    width: 1200px;
    height: 300px;
    background-color: violet;
}

#contents>#tab-menu{
    float: left;
    width: 800px;
    height: 300px;
    background-color: yellowgreen;
}

#contents>#links{
    float: left;
    width: 400px;
    height: 300px;
    background-color: tomato;
}

#footer{
    width: 1200px;
    height: 100px;
    background-color: springgreen;
}

3. 결과

728x90

저작자표시

'HTML & CSS' 카테고리의 다른 글

[Do it!] HTML+CSS+JS 웹표준의 정석 실전 프로젝트 3 (0)	2022.07.17
[Do it!] HTML+CSS+JS 웹표준의 정석 실전 프로젝트 2 (0)	2022.07.01
[FrontEnd1] 토이스토리 페이지 보강 (컨텐츠 영역 설정, 푸터 영역 추가- 로고, 카피라이트) (0)	2022.05.10
[FrontEnd1] 5월 첫째주 한페이지 개념 정리 (0)	2022.05.07
[FrontEnd1] 토이스토리 페이지 보강 (로고 삽입, 메뉴 설정, 폰트 설정, 검색창 만들기) (0)	2022.05.01