[반응형 웹디자인] 두번째 시안

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

몽땅뚝딱 개발자

[반응형 웹디자인] 두번째 시안 - 하나투어 본문

STUDY/2021

[반응형 웹디자인] 두번째 시안 - 하나투어

레오나르도 다빈츠 2021. 9. 18. 15:59

🚩 반응형 웹디자인 수업 (2021.07~2021.09)

⭐ 목적

· 전체적인 레이아웃을 위한 엘리먼트를 배치할 수 있다.

· 코드 작성 순서에 따라 배치되는 엘리먼트가 아닌 지정된 위치에 고정되어야하는 엘리먼트의 경우, 부모와 자식 속성을 지정하여(position값 지정) 위치를 잡는 방법을 이해한다.

· px로 고정된 폭을 잡는 것이 아니라, calc() 함수를 사용하여 디바이스의 폭에 따라 엘리먼트의 폭도 함께 조절하는 방법을 이해한다.

🔗 URL

https://hvsundev.github.io/my-portpolio/project2/index.html

혹시나 전체적으로 구현된 모습이나 소스를 보고싶은 분이 계시다면

해당 파일 다운로드 후 알집을 풀고

index.html을 크롬으로 실행하면 볼 수 있습니다!

2번시안_hanatour.zip

2.50MB

🎨 Design

📁 tree

├─ css

│ ├─ common.css

├─ img

│ ├─ 이미지들..

├─ index.html

📄 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hanatour</title>
    <link href="css/common.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="wrap">
        <div id="header">
            <div class="inner">
                <div class="h_top">
                    <ul class="login">
                        <li>로그인</li>
                        <li>회원가입</li>
                        <li>고객센터</li>
                        <div class="space"></div>
                    </ul>
                    <div class="app">
                        APP<img src="img/down_icon.png" alt="download">
                    </div>
                    <div class="space"></div>

                </div>
                <div class="space"></div>
                <div class="h_bottom">
                    <div class="logo">
                        <img src="img/logo.png" alt="로고">
                    </div>
                    <ul class="menu">
                        <li>국내여행</li>
                        <li>해외여행</li>
                        <li>항공</li>
                        <div class="space"></div>
                    </ul>
                    <div class="search">
                        <img src="img/search_icon.jpg" alt="검색">
                    </div>
                    <div class="space"></div>
                </div>
            </div>
        </div>
        <div id="mainimg">
            <div class="inner">
                <div class="main_text">
                    <h3>국내 여름 시즌 바캉스</h3>
                    <h1>내 취향 여행찾기</h1>
                    <p>제주말고 어디 갈데 없나?
                        <br>
                        고민중이라면, 여기 클릭하세요!
                    </p>
                    <div class="btn1">VIEW</div>
                </div>
                <div class="login_btn">
                    <img src="img/login.jpg" alt="로그인">
                    <p>LOGIN</p>
                </div>
            </div>
        </div>
        <div id="contents">
            <div class="box1">
                <h1>내맘<span>愛</span>쏙 하나투어</h1>
                <div class="btn2">기획전 보러가기</div>
            </div>
            <div class="box2">
                <div class="box2_bg"></div>
                <div class="box2_img">
                    <div class="box2_left"></div>
                    <div class="box2_right">
                        <div class="box2_text">
                            <img src="img/logo.png">
                            <h1>
                                하나하나 새로워진<br>
                                <span>
                                    푸껫 패키지!
                                </span>
                            </h1>
                            <p>80일간 떠나는 설레는 여정의시작 </p>
                            <div class="btn3">기획전 보러가기</div>
                        </div>
                    </div>
                    <div class="space"></div>
                </div>
                <div class="inner">
                    <div class="card">
                        <img src="img/box2_icon1.png" alt="제주">
                        <h4>제주</h4>
                        <p>꽃향기 가득한 제주<br>
                        놀멍쉬멍, 혼저옵서예</p>
                        <img src="img/btn_img1.jpg" alt="바로가기">
                    </div>
                    <div class="card">
                        <img src="img/box2_icon2.png" alt="강릉">
                        <h4>강릉</h4>
                        <p>놀킷 먹킷 넘치는 핫판 강릉<br>
                        가족도 청춘도 환영합니다.</p>
                        <img src="img/btn_img1.jpg" alt="바로가기">
                    </div>
                    <div class="card">
                        <img src="img/box2_icon3.png" alt="여수">
                        <h4>여수</h4>
                        <p>너와 함께 걷고 싶은
                        <br>
                        여수는 낮에도 빛나고 있어요</p>
                        <img src="img/btn_img1.jpg" alt="바로가기">
                    </div>
                    <div class="space"></div>
                </div>
            </div>
            <div class="box3">
            </div>
        </div>
        <div id="footer">
            <div class="inner">
                <div class="copyright">
                    <img src="img/footer_logo.png" alt="하단로고">
                    <ul>
                        <li>회사소개</li>
                        <li>여행약관</li>
                        <li>개인정보처리방침</li>
                        <li>공식인증예약센터 검색</li>
                        <div class="space"></div>
                    </ul>
                    <p>(03161) 서울특별시 종로구 인사동 5길 41<br>COPYRIGHTⓒ HANATOUR SERVICE INC. ALL RIGHTS RESERVED</p>
                </div>
            </div>
        </div>
    </div>
</body></html>

📄 common.css

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

/*공통*/
* {
    padding: 0;
    margin: 0
}

ul {
    list-style: none
}

.inner {
    width: 980px;
    margin: 0 auto
}

.space {
    clear: both
}

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


/*헤더*/
#header {
    width: 100%;
    height: 101px
}

.h_top {
    height: 34px;
    line-height: 34px;
    float: right
}

.login {
    float: left;
    font-size: 12px;
    color: #8f918f
}

.login > li {
    float: left;
    padding: 0 5px
}

.app {
    float: left;
    width: 70px;
    height: 34px;
    background-color: #bd005c;
    border-radius: 0 0 5px 5px;
    color: #fff;
    text-align: center;
    margin-left: 10px;
}

.app img {
    margin-left: 4px;
}

.h_bottom {
    width: 100%;
    height: 67px;
    line-height: 67px;
    position: relative
}

.logo {
    float: left
}

.logo > img {
    vertical-align: middle
}

.menu {
    position: absolute;
    width: 690px;
    margin: 0 auto;
    left: 0;
    right: 0
}

.menu > li {
    width: 230px;
    float: left;
    text-align: right
}

.search {
    float: right
}

.search > img {
    vertical-align: middle
}

/*메인이미지*/
#mainimg {
    height: 597px;
    background-image: url(../img/mainimg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center
}

#mainimg > .inner {
    position: relative;
    width: 980px;
    height: 597px
}

.main_text {
    position: absolute;
    top: 65px;
}

.main_text > h3 {
    font-size: 33px;
    color: #fff;
    font-weight: normal;
    letter-spacing: -2px;
}

.main_text > h1 {
    font-size: 70px;
    color: #fff;
    padding-bottom: 37px;
    letter-spacing: -2px;
}

.main_text > p {
    font-size: 20px;
    line-height: 35px;
    color: #fff
}

.btn1 {
    width: 135px;
    height: 50px;
    color: #fff;
    border: 4px solid #fff;
    border-radius: 20px;
    text-align: center;
    line-height: 50px;
    font-size: 15px;
    margin-top: 113px;
    font-weight: bold;
    letter-spacing: 4px;
}

.login_btn {
    position: absolute;
    right: 0;
    bottom: -45px;
    width: 86px;
    height: 71px;
    background-color: #ac004d;
    border-radius: 100px;
    text-align: center;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding-top: 15px
}

/*콘텐츠*/
/*박스1*/
.box1 {
    width: 980px;
    height: 950px;
    margin: 0 auto;
    background-image: url(../img/box1_bg.jpg);
    background-repeat: no-repeat;
    background-position: center 200px;
    background-size: 75%;
    position: relative
}

.box1 > h1 {
    letter-spacing: -2px;
    position: absolute;
    font-size: 45px;
    top: 175px;
    width: 40%;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center
}

.box1 > h1 > span {
    color: #e5236d;
}

.btn2 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 266px;
    height: 70px;
    background-color: #e5236d;
    border-radius: 50px;
    text-align: center;
    line-height: 70px;
    color: #fff;
    font-weight: bold
}

/*박스2*/
.box2 {
    width: 100%;
    height: 1043px;
    position: relative;
    padding-top: 178px
}

.box2 .inner {
    width: 800px;
}

.box2_bg {
    position: absolute;
    width: 95%;
    height: 704px;
    background-color: #f6f8fb;
    right: 0;
    bottom: 163px;
    border-radius: 50px 0 0 50px
}

.box2_img {
    width: 100%;
    height: 557px;
    position: absolute
}

.box2_left {
    width: 50%;
    height: 557px;
    background-image: url(../img/box2_img.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    float: left
}

.box2_right {
    width: 50%;
    height: 55px;
    float: right
}

.box2_text {
    padding-top: 75px;
    padding-left: 72px
}

.box2_text > img {
    padding-bottom: 45px
}

.box2_text > h1 {
    font-size: 44px;
    font-weight: normal;
    padding-bottom: 41px;
    letter-spacing: -3px;
}

.box2_text > h1 > span {
    font-weight: bold
}

.box2_text > p {
    font-size: 18px;
    color: #6a6c6a;
    padding-bottom: 55px
}

.btn3 {
    width: 255px;
    height: 70px;
    background-color: #e5236d;
    border-radius: 50px;
    text-align: center;
    line-height: 70px;
    font-size: 15px;
    color: #fff;
    font-weight: bold
}

.box2 > .inner {
    position: absolute;
    width: 980px;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0
}

.card {
    width: calc(90% / 3);
    height: 365px;
    float: left;
    background-color: #fff;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #e8eaed
}

.card:nth-child(2) {
    margin-left: 5%
}

.card:nth-child(3) {
    margin-left: 5%
}

.card:nth-child(4) {
    margin-left: 5%
}

.card > img:nth-child(1) {
    width: 100%;
    padding-bottom: 18px;
}

.card > h4 {
    font-size: 19px;
    padding-bottom: 19px
}

.card > p {
    font-size: 13px;
    color: #888888;
    padding-bottom: 20px;
}

/*박스3*/
.box3 {
    width: 100%;
    height: 804px;
    position: relative;
    margin-top: 140px;
    background-image: url(../img/box3_img.png);
    background-repeat: no-repeat;
    background-position: center;
}

.btn4 {
    width: 48%;
    height: 70px;
    float: left;
    border: 1px solid #b8b8b8;
    border-radius: 50px;
    text-align: center;
    line-height: 70px
}

.btn5 {
    width: 48%;
    height: 70px;
    float: right;
    border: 1px solid #b8b8b8;
    border-radius: 50px;
    text-align: center;
    line-height: 70px
}


/*푸터*/
#footer {
    width: 100%;
    height: 256px;
    border-top: 1px solid #e5e5e5;
    font-size: 13px;
    margin-top: 28px;
    padding-top: 60px
}

.copyright {
    text-align: center;
    color: #969a9b
}

.copyright > ul > li {
    float: left;
    padding: 0 30px;
    border-right: 1px solid #969a9b
}

.copyright > ul > li:nth-child(4) {
    border-right: none
}

.copyright > ul {
    padding: 25px 0;
    width: 58%;
    margin: 0 auto;
}

.copyright > ul > li:nth-child(3) {
    color: #5a5d5a
}

.copyright > p {
    line-height: 200%
}

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

'STUDY > 2021' 카테고리의 다른 글

[반응형 웹디자인] 세번째 시안 - Musicake (2)	2021.09.21
[반응형웹디자인] 첫번째 시안 - 스타벅스 (0)	2021.08.30
[웹디자인] 포토샵 단축키 정리 (0)	2021.07.17

'STUDY/2021' Related Articles

Comments

몽땅뚝딱 개발자

[반응형 웹디자인] 두번째 시안 - 하나투어 본문

[반응형 웹디자인] 두번째 시안 - 하나투어

🚩 반응형 웹디자인 수업 (2021.07~2021.09)

'STUDY > 2021' 카테고리의 다른 글

티스토리툴바