(CSS, 과제) 교촌 치킨 클론코딩

http://lehj2308.dothome.co.kr/

최초의 내 사이트

CSS

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

* { 
    font-family: 'Noto Sans KR', sans-serif;
}

body, h2, h3, input{
    margin: 0;
    padding: 0;
}

h3 {
    font-size: 26px;
    text-align: center;
    font-weight: bold;
}

ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

li{
    list-style: none;
}

ul > li{
    display: inline-block;
    border-right: 1px solid #efefef;
}

ul > li:last-child{
    border-right: 0;
}

a { text-decoration: none; }
a:link, a:visited, a:active, a:hover { color: #737373 }




/* 헤더 */
header {
    width: 100%;
    max-width: 1530px;
    margin: 0 auto;
    position: relative;
    padding: 0 60px 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

nav a:link, nav a:visited, nav a:active, nav a:hover,
.header-btn a:link, .header-btn a:visited, .header-btn a:active, .header-btn a:hover
{ color: black; }

/* 헤더 버튼 */
.header-btn {
    position: absolute;
    left: 30px;
    top: 0;
    display: inline-block;
}

.header-btn > a {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    line-height: 27px;
    background-color: #f8b915;
    width: 99px;
    height: 27px;
    margin: 0;
}

.header-btn > a.black-btn {
    background-color: black;
    color: white;
}

.header-btn > a.black-btn:hover {
    background-color: #f8b915;
    color: black;
}

/* 헤더 링크 */
.header-link {
    position: absolute;
    top: 0;
    right: 70px;
}

.header-link > ul > li {
    font-size: 12px;
    padding: 0 8px;
    color: #9D8F75;
}

.black {
    color: black;
}

/* 헤더 로고 */
.logo {
    cursor: pointer;
}

/* 카테고리 */
nav {
    margin-bottom: 20px;
}

nav > ul > li {
    font-size: 22px;
    font-weight: 500;
    padding: 0 35px;
}


/* 베너 */

.banner {
    background-color: #fffae6;
    height: 450px;
}

.banner > img {
    width: 100%;
}

section {
    margin-bottom: 66px;
}

/* 메뉴 */

.menu > h3 {
    margin-bottom: 80px;
}

.menu-banner {
    text-align: center;
}

.menu-banner > article {
    margin: 0 50px;
    display: inline-block;
    width: 300px;
}

.menu-info {
    border-radius: 20px;
    background-color: black;
    color: white;
    padding: 8px 13px;
    display: inline-block;
}

/* 도움 */
.help {
    background-color: #FFCB44;
    text-align: center;
    display: flex;
    justify-content: center;
}

.help > div {
    width: 480px;
}

.help-title {
    padding-bottom: 45px;
    box-sizing: border-box;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
}

.help-lbox {
    border-right: 1px solid white;
    margin: 15px 0;
    padding: 50px;
}

.search-box{
    padding-bottom: 30px;
    border-bottom: 1px solid white;
    margin-bottom: 30px;
}

.search-group {
    position: relative;
}

#search-text{
    padding: 0 10px;
    line-height: 60px;
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    font-size: 16px;
}

#search-btn{
    position: absolute;
    background-color: black;
    width: 60px;
    height: 60px;
    right: 0;
    top: 0;
    cursor: pointer;
    color: white;
}

.result-group {
    text-align: left;
    height: 100px;
}

.result-group > div {
    font-size: 18px;
}

.result-group > p {
    font-size: 14px;
}

.result-btn {
    border: 0;
    border-radius: 20px;
    background-color: black;
    color: white;
    padding: 5px 11px;
    display: inline-block;
    font-size: 15px;
    margin-left: 3px;
    cursor: pointer;
}

.help-rbox {
    padding: 50px;
}

.happy-box {
    display: flex;
    justify-content: space-around;
}

.happy-img {
    width: 145px;
    height: 145px;
    background: no-repeat center white;
    background-size: 60%;
    border-radius: 50%;
}

.event-img{
    background-image: url('/clone/event.png');
}

.news-img{
    background-image: url('/clone/news.png');
}

.happy-box p {
    font-size: 18px;
    font-weight: 500;
}

.franchise{
    border-bottom: 1px solid #efefef;
    padding-bottom: 74px;
    width: 1530px;
    margin-left: auto;
    margin-right: auto;
}

.franchise-title{
    margin-bottom: 12px;
}

.franchise-sub-title{
    text-align: center;
}

.franchise-box{
    display: flex;
    justify-content: space-around;
}

.franchise-box > article {
    height: 221px;
    position: relative;
}

.franchise-img {
    top: 0;
    z-index: 1;
}

.franchise-comment{
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 40px;
    z-index: 2;
    height: 40px;
    background-color: white;
    border: 0;
    border-radius: 20px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
}

.franchise-comment > img {
    margin-left: 8px;
}



/* 푸터 */
footer {
    font-size: 14px;
    color: #737373;
    text-align: center;
    margin-bottom: 30px;
}

.footer-top > ul > li {
    padding: 0 10px;
}

strong {
    color: black !important;
}


.footer-middle > ul > li {
    padding: 0 25px;
}

.footer-middle > ul > li > a {
    margin: 0 10px;
}

.yellow-btn {
    border: 0;
    border-radius: 20px;
    background-color: #f8b915;
    color: black;
    padding: 8px 13px;
    cursor: pointer;
}

.footer-bottom > ul > li {
    padding: 0 7px;
}

 

HTML

<!DOCTYPE html>
<html lang="en">
<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>교촌치킨</title>
    <link rel="stylesheet" href="./css/cloneCoding.css">
</head>
<body>
    <div id="container">
        <header>
            <div class="header-btn">
                <a href="#">교촌치킨</a><a href="#" class="black-btn">교촌 F&B</a>
            </div>
            <div class="logo">
                <img src="./clone/logo.png" alt="로고사진">
            </div>
            <div class="header-link">
                <ul>
                    <li><a href="#">고객센터</a></li>
                    <li><a href="#">사이트맵</a></li>
                    <li><a href="#">가맹점 개설안내</a></li>
                </ul>
            </div>
            <nav>
                <ul>
                    <li><a href="#">메뉴</a></li>
                    <li><a href="#">매장안내</a></li>
                    <li><a href="#">이벤트</a></li>
                    <li><a href="#">주문</a></li>
                    <li><a href="#">E-쿠폰</a></li>
                    <li><a href="#">교촌스토리</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section class="banner">
                <img src="./clone/banner.jpg" alt="베너사진">
            </section>
            <section class="menu">
                <h3>MENU</h3>
                <div class="menu-banner">
                    <article>
                        <img src="./clone/menu-img1.png" alt="메뉴사진" class="menu-img">
                        <div class="menu-info">레허반반순살</div>
                    </article>
                    <article>
                        <img src="./clone/menu-img2.png" alt="메뉴사진" class="menu-img">
                        <div class="menu-info">블랙시크릿오리지날</div>
                    </article>
                    <article>
                        <img src="./clone/menu-img3.png" alt="메뉴사진" class="menu-img">
                        <div class="menu-info">블랙시크릿순살[R]</div>
                    </article>
                </div>
            </section>
            <section class="help">
                <div class="help-lbox">
                    <div class="search-box">
                        <h3 class="help-title">Store Search</h3>
                        <div class="search-group">
                            <form action="" method="get">
                                <input type="text" id="search-text" name="search" placeholder="매장명 또는 지역을 입력" >
                                <input type="submit" id="search-btn">
                            </form>
                        </div>
                    </div>
                    <div>
                        <div class="result-group">
                            <div>교촌치킨 역삼1호점
                                <button class="result-btn">지도보기</button>
                                <button class="result-btn">상세보기</button>
                            </div>
                            <p>02-566-9942 | 서울특별시 강남구 역삼로14길 12 (역삼동)</p>
                        </div>
                    </div>
                </div>
                <div class="help-rbox">
                    <h3 class="help-title">Happy Kyochon</h3>
                    <div class="happy-box">
                        <article>
                            <div class="happy-img event-img"></div>
                            <p>Kyochon Event</p>
                        </article>
                        <article>
                            <div class="happy-img news-img"></div>
                            <p>Kyochon News</p>
                        </article>
                    </div>
                </div>
            </section>
            <section class="franchise">
                <h3 class="franchise-title">가맹점 개설 안내</h3>
                <p class="franchise-sub-title">교촌 F&B의 가족으로 모시고자 합니다</p>
                <div class="franchise-box">
                    <article>
                        <div class="franchise-img"><img src="./clone/item1.svg" alt="개설사진1"></div>
                        <button class="franchise-comment">사업전망 <img src="./clone/ico_search.svg" alt=""></button>
                    </article>
                    <article>
                        <div class="franchise-img"><img src="./clone/item2.svg" alt="개설사진2"></div>
                        <button class="franchise-comment">개설절차 <img src="./clone/ico_search.svg" alt=""></button>
                    </article>
                    <article>
                        <div class="franchise-img"><img src="./clone/item3.svg" alt="개설사진3"></div>
                        <button class="franchise-comment">인테리어 <img src="./clone/ico_search.svg" alt=""></button>
                    </article>
                    <article>
                        <div class="franchise-img"><img src="./clone/item4.svg" alt="개설사진4"></div>
                        <button class="franchise-comment">상담청구 <img src="./clone/ico_search.svg" alt=""></button>
                    </article>
                </div>
            </section>
        </main>
        <footer>
            <div class="footer-top">
                <ul>
                    <li><a href="#">이용약관</a></li>
                    <li><a href="#"><strong>개인정보처리방침</strong></a></li>
                    <li><a href="#">영상정보처리기기 운영관리 방침</a></li>
                    <li><a href="#">이메일 무단수집거부</a></li>
                    <li><a href="#">찾아오시는 길</a></li>
                </ul>
            </div>
            <div class="footer-middle">
                <ul>
                    <li><img src="./clone/ph.svg" alt="전화번호"></li>
                    <li>
                        <a href=""><img src="./clone/facebook.svg" alt=""></a>
                        <a href=""><img src="./clone/instagram.svg" alt=""></a>
                        <a href=""><img src="./clone/youtube.svg" alt=""></a>
                        <a href=""><img src="./clone/twitter.svg" alt=""></a>
                    </li>
                    <li><button class="yellow-btn">♡ 가맹점 공간</button></li>
                </ul>
            </div>
            <div class="footer-bottom">
                <ul>
                    <li>사업장소재지 : 39852 경상북도 칠곡군 가산면 송신로 78</li>
                    <li>본사(오산교육원)주소 : 18150 경기도 오산시 동부대로 436번길 55-18 </li>
                    <li>상호명 : 교촌에프앤비(주)</li>
                    <li>대표이사 : 윤진호</li>
                </ul>
                <ul>
                    <li>대표번호 : 031-371-3500 </li>
                    <li>소비자상담번호 : 080-320-3000 </li>
                    <li>사업자등록번호 : 513-81-16574 </li>
                    <li>통신판매업신고 : 2012-경상북도칠곡-00023호 </li>
                    <li>개인정보보호책임자 : 신용우 </li>
                    <li>영업시간 : 12:00~23:30</li>
                </ul>
                <ul>
                    <li>Copyright 2015 © KYOCHON F&B. All rights reserved.</li>
                </ul>
            </div>
        </footer>
    </div>
</body>
</html>