몽땅뚝딱 개발자

[반응형웹디자인] 첫번째 시안 - 스타벅스 본문

STUDY/2021

[반응형웹디자인] 첫번째 시안 - 스타벅스

레오나르도 다빈츠 2021. 8. 30. 18:44

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

 

기본적인 코딩 후, 직접 디자인하고 코딩해보는 시간을 가졌다.

강사님이 주신 레이아웃과 텍스트를 유지한채로 해야했기 때문에.. 이미지 소스가 굉장히 풍부한 스타벅스로 해보기로 결정했다.

 

사실 내 일을 할 때는 이미 만들어진 화면을 받아 개발을 했던터라 레이아웃 자체를 만들어볼 일이 없었는데

이번에 내 포트폴리오를 준비하면서 디자인과 CSS도 함께 더해보며 화면을 그려보고자 했다.

상자를 나란히 나열하는 것도 어려웠던 내가.. 이렇게 해냈다. 정말 좋은 수업이다.

 

 

⭐ 목적

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

· float 속성을 사용하여 적절한 위치에 <div>를 배치할 수 있다.

· float 속성 사용 후, clear: both를 이용하여 초기화 할 수 있다.

 

🔗 URL

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

 

코딩 후 결과화면

 

 

 

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

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

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

1번시안_starbucks.zip
3.80MB

 

 

 

 

 

 

🎨 Design

 

 

 

 

📁 tree

├─ css

│  ├─ common.css

├─ img

│  ├─ 이미지들..

├─ index.html

 

 

 

 

 

📄 index.html

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

<head>
    <meta charset="UTF-8">
    <title>비트브릭</title>
    <link rel="stylesheet" href="common.css">
</head>

<body>
    <div class="wrap">
        <div class="header">
            <div class="logo"><img src="img/logo.png" alt="로고"></div>
            <ul class="menu">
                <li>회사소개</li>
                <li>제품</li>
                <li>교육</li>
                <li>다운로드</li>
                <li>쇼핑몰</li>
                <div class="space"></div>
            </ul>
            <div class="space"></div>
        </div>
        <div class="mainimg"></div>
        <div class="contents">
            <div class="box1">
                <img src="img/main_2.png" alt="콘텐츠">
            </div>
            <div class="box2">
                <div>
                    <img src="img/icon0.png" alt="아이콘1">
                    <h3>스타벅스, 우리의 가치</h3>
                </div>
            </div>
            <div class="box3">
                <div class="box3_left">
                    <div>
                        <h3>친밀한 문화</h3>
                        <img src="img/icon1.png" alt="아이콘1">
                        <p>모두가 환영 받을 수 있는<br>따뜻하고 친밀한 문화를 만든다.</p>
                    </div>
                </div>
                <div class="box3_right">
                    <div>
                        <h3>용기와 도전, 그리고 성장</h3>
                        <img src="img/icon2.png" alt="아이콘2">
                        <p>용기를 가지고 행동하고, 현재에 안주하지 않고 도전하며,<br>회사와 서로가 성장할 수 있는 새로운 방법을 찾는다.</p>
                    </div>
                </div>
                <div class="space"></div>
            </div>
            <div class="box4">
                <div class="box4_left">
                    <div>
                        <h3>상호연결</h3>
                        <img src="img/icon3.png" alt="아이콘3">
                        <p>현재로부터 투명성과 품위와 존경을<br>상호 연결해 나간다.</p>
                    </div>
                </div>
                <div class="box4_right">
                    <div>
                        <h3>스스로의 책임감</h3>
                        <img src="img/icon4.png" alt="아이콘4">
                        <p>우리가 할 수 있는 모든 것에 최선을 다하며,<br>결과를 얻기 위해 스스로 책임감을 가진다.</p>
                    </div>
                </div>
                <div class="space"></div>
            </div>
        </div>
        <div class="footer">
            <p class="copyright">ⓒCopyright2012-2018 | AvadaThemebyThemeFusion | AllrightsReserved | PoweredbyWordPress</p>
            <ul class="sns">
                <li><img src="img/sns1.png" alt="페이스북"></li>
                <li><img src="img/sns2.png" alt="트위터"></li>
                <li><img src="img/sns3.png" alt="인스타그램"></li>
                <div class="space"></div>
            </ul>
        </div>
    </div>
</body>
</html>

 

 

 

📄 common.css

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


/* common */
* {
    padding: 0;
    margin: 0;
}

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

.wrap {
    width: 1920px;
    margin: 0 auto;
    background-color: #282828;
}

.space {
    clear: both;
}



/* header */
.header {
    height: 112px;
}

.logo {
    width: 150px;
    height: 50px;
    float: left;
    margin-top: 30px;
    margin-left: 70px;
}

.menu {
    height: 20px;
    float: right;
    list-style: none;
    padding: 41px 0;
    margin-right: 70px;
}

.menu li {
    margin-left: 35px;
    float: left;
    text-align: center;
    color: white;
    font-size: 20px;
}


/* contents */
.mainimg {
    width: 1920px;
    height: 450px;
    background-image: url(img/mainimg.png);
}

.contents h3 {
    font-size: 40px;
    color: #fff;
}

.contents p {
    font-size: 24px;
    color: #fff;
    font-weight: 500;
    line-height: 1.7;
}

.contents div div img {
    padding: 35px 0;
}

.box1 {
    height: 712px;
}

.box2 {
    width: 1920px;
    height: 523px;
    background-color: #082b1f;
}

.box2 div {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    padding-top: 80px;
}

.box3_left {
    width: 50%;
    float: left;
    height: 639px;
    background-color: #17694c;
}

.box3_left div {
    width: 70%;
    margin: 0 auto;
    text-align: center;
    padding-top: 100px;
}

.box3_right {
    width: 50%;
    height: 639px;
    float: right;
    background-color: #227a5b;
}

.box3_right div {
    width: 70%;
    margin: 0 auto;
    text-align: center;
    padding-top: 100px;
}

.box4_left {
    width: 50%;
    height: 639px;
    float: left;
    background-color: #13523c
}

.box4_left div {
    width: 70%;
    margin: 0 auto;
    text-align: center;
    padding-top: 100px;
}

.box4_right {
    width: 50%;
    height: 639px;
    float: right;
    background-color: #145941
}

.box4_right div {
    width: 70%;
    margin: 0 auto;
    text-align: center;
    padding-top: 100px;
}



/* footer */
.footer {
    padding-top: 20px;
    height: 171px;
    background-color: #282828;
}

.copyright {
    text-align: center;
    padding: 20px 0;
    color: darkgray;
}

.sns {
    width: 180px;
    margin: 0 auto;
    list-style: none;
}

.sns li {
    width: 50px;
    float: left;
    margin: 0 5px;
    height: 50px;
    text-align: center;
    border-radius: 5px;
}

 

 

 

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

 

 

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

[반응형 웹디자인] 세번째 시안 - Musicake  (2) 2021.09.21
[반응형 웹디자인] 두번째 시안 - 하나투어  (0) 2021.09.18
[웹디자인] 포토샵 단축키 정리  (0) 2021.07.17
'STUDY/2021' Related Articles more
Comments

티스토리툴바