HTML5 & CSS3 : Paul Smith 메인 페이지 만들기

HTML5 & CSS3 : Paul Smith 메인 페이지 만들기

2022. 10. 28. 09:20ㆍStudy/HTML5 & CSS3

2022.10.28.

UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 31

Review

이제 작업 순서를 하나하나 올리는 글쓰기 방식은 힘들 것 같다고 판단했다.
코드 리뷰를 작성하듯이 예제를 실행하며 느낀점이나 그동안 해 온 방식과 달랐던 점을
기록하는 방식으로 변경하려고 한다 !

수업을 들으며 캡처하고 기록하는 것이 생각보다 쉽지 않아 비공개로 돌려놓은 게시글이
꽤 많다. 주말에 정리해서 차근차근 업로드해야겠다.

블로그를 작성하니 요즘은 따로 일기를 쓰지 않는다.
이래서 사람들이 블로그를 활용하는구나 이제서야 이해가 된다.
블로그의 스킨을 편집하고 꾸미는 것도 예전 싸이월드 시절이 생각나서 재밌는 것 같다 키키

열심히 해야징-

UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 31

<Paul Smith 메인 페이지 만들기 예제>
: 선생님께서 예제 하나를 주시고 자습시간을 활용해 만들어보라고 하셨다.
평소 좋아하는 브랜드인 Paul Smith 메인 화면을 구현해보는 시간을 가졌다.
이미지 파일은 따로 만들어져있었고, font만 Noto Sans font로 바꿔 만들었다.
Open Sans font가 알파벳은 더 예쁜 것 같다.
다음엔 Open Sans랑 Noto Sans를 혼합해서 만들어야겠다.

- 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">
    <link rel="stylesheet" href="../1028/style.css">
    <title>INPUT</title>
</head>
<body>
    <div id="wrapper">
        <header>
            <div id="top">
                <div class="top_wrap">
                    <p><a href="#">£ &nbsp; ∨</a></p>
                    <ul>
                        <li><a href="#">Shop Locator</a></li>
                        <li><a href="#">My Acoount</a></li>
                        <li><a href="#">Sing In</a></li>
                    </ul>
                </div>
            </div> 
            <div id="top2"> 
                <div class="top_wrap2"> 
                        <img src="../../images/paulsmith/images/paul_03.png" alt="">
                        <ul>
                            <li><a href="#"><img src="../../images/paulsmith/images/paul_05.png" alt=""></a></li>
                            <li><a href="#"><img src="../../images/paulsmith/images/paul_07.png" alt=""></a></li>
                        </ul>
                </div>
            </div>  
        <div id="gnb">
            <div class="gnb_wrap">
            <ul>
                <li><a href="#">SALE∨</a></li>
                <li><a href="#">NEW ARRIVALS∨</a></li>
                <li><a href="#">MENS∨</a></li>
                <li><a href="#">WOMENS∨</a></li>
                <li><a href="#">JUNIOR∨</a></li>
                <li><a href="#">STORIES∨</a></li>
            </ul>
            </div>
            <div class="gnb_wrap2">
            <ul>
                <li><a href="#">FREE CLICK&COLLECT</a></li>
                <li><a href="#">FREE SHIPPING ON ORDERS OVER £200</a></li>
                <li><a href="#">FREE RETURNS*</a></li>
            </ul>
            </div>
        </div>
    </header>
        <section id="visual">
            <a href="#"><img src="../../images/paulsmith/images/paul_12.jpg" alt=""></a>
        </section>     
        <section id="sale">
                <p><u>Shop by Category</u></p>
                <ul>
                    <li><a href="#"><img src="../../images/paulsmith/images/paul_14.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../../images/paulsmith/images/paul_15.gif" alt=""></a></li>
                    <li><a href="#"><img src="../../images/paulsmith/images/paul_16.jpg" alt=""></a></li>
                </ul>
        </section>  
        <section id="collection">
            <p><u>Shop by Collection</u></p>
                <ul>
                    <li><a href="#"><img src="../../images/paulsmith/images/paul_18.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../../images/paulsmith/images/paul_19.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../../images/paulsmith/images/paul_20.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../../images/paulsmith/images/paul_21.jpg" alt=""></a></li>
                </ul>
        </section>   
        <footer>
            <div class="foot_top_wrap">
                <div class="foot_top">
                    <ul>
                        <p><b>CUSTOMER SERVICES</b></p>
                        <li>Contact Us</li>
                        <li>Paul Smith Price Match</li>
                        <li>Payment Methods</li>
                        <li>Returns</li>
                        <li>Shipping</li>
                    </ul>
                    <ul>
                        <p><b>YOUR PAUL SMITH</b></p>
                        <li>My Acoount</li>
                        <li>Gift Cards</li>
                        <li>Check Your Gift Card Balance</li>
                    </ul>
                    <ul>
                        <p><b>ABOUT PAUL SMITH</b></p>
                        <li>Company History</li>
                        <li>Careers</li>
                        <li>Shop Locator</li>
                    </ul>
                    <ul>
                        <p><b>Email Updates</b></p>
                        <form action="">
                            <input type="text" id="search" name="search"
                            size="20" placeholder="&nbsp;&nbsp;Enter your email address" autofocus>
                            <span><input type="submit" value="Subscribe"></span>
                        </form>
                        <li><a href="#"><img src="../../images/paulsmith/images/paul_24.gif" alt=""></a></li>
                        <li><a href="#"><img src="../../images/paulsmith/images/paul_26.gif" alt=""></a></li>
                        <li><a href="#"><img src="../../images/paulsmith/images/paul_28.gif" alt=""></a></li>
                        <li><a href="#"><img src="../../images/paulsmith/images/paul_30.gif" alt=""></a></li>
                        <li><a href="#"><img src="../../images/paulsmith/images/paul_32.gif" alt=""></a></li>
                        <li><a href="#"><img src="../../images/paulsmith/images/paul_34.gif" alt=""></a></li>
                        <li><a href="#"><img src="../../images/paulsmith/images/paul_36.gif" alt=""></a></li>           
                    </ul>
                </div>    
            </div>       
                <div class="foot_bottom">
                    <div class="left">
                        <img src="../../images/paulsmith/images/paul_03.png" alt=""> 
                    </div>
                    <div class="right">
                        <ul>
                        <li><a href="#">ⓒ Paul Smith</a></li>
                        <li><a href="#">Terms & conditions</a></li>
                        <li><a href="#">Privacy & Cookie Policy</a></li>
                        </ul>
                    </div>
                </div>
            </footer>
        </div>
</body>
</html>

- CSS

@charset "utf-8";
@font-face {
    font-family: notosans;
    src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff);
}
* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: rgb(0, 0, 0);
}
body {
    font-family: notosans;
}
#top {
    width: 100%;
    background: #000;
}
.top_wrap {
    display: flex;
    justify-content: space-between;
    width: 1920px;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
}
.top_wrap ul {
    display: flex;
}
.top_wrap p a {
    padding-left: 70px;
    color: #fff;
}
.top_wrap ul li a {
    padding: 0 30px 0 0px;
    font-size: 13px;
    color: #fff;
}
#top2 {
    width: 1920px;
    margin: 0 auto;
}
.top_wrap2 {
    position: relative;
    width: 1920px;
    margin: 20px auto;
}
.top_wrap2 > img {
    position: absolute;
    left: 850px;
}
.top_wrap2 ul {
    display: flex;
    justify-content: end;
    width: 1920px;
}
.top_wrap2 ul li a {
    padding-right: 35px;
}
#gnb {
    width: 100%;
    margin: 0px auto;
    padding-top: 30px;
}
.gnb_wrap ul {
    display: flex;
    justify-content: center;
    padding-bottom: 50px;
}
.gnb_wrap ul li a {
    color: rgb(63, 63, 63);
    font-size: 14px;
    letter-spacing: 3px;
    padding: 0 25px;
}
.gnb_wrap2 ul {
    display: flex;
    justify-content: center;
    width: 100%;
    background: rgb(131, 211, 198);
    padding: 15px 0;
}
.gnb_wrap2 ul li a {
    color: rgb(63,63,63);
    font-size: 14px;
    padding: 0 100px;
    letter-spacing: 1px;
    text-decoration: underline;
}
/* header 끝 */
#visual {
    width: 1920px;
    margin: 0 auto;  
}
#visual img:hover {
    cursor: pointer;
}
#sale {
    width: 1920px;
    margin: 0 auto;
}
#sale p {
    width: 1920px;
    margin: 0 auto;
    padding: 35px 0;
    text-align: center;
    letter-spacing: 3px;
}
#sale ul {
    display: flex;
}
#collection {
    width: 1920px;
    margin: 0 auto;
}
#collection p {
    width: 1920px;
    margin: 0 auto;
    padding: 35px 0;
    text-align: center;
    letter-spacing: 3px;
}
#collection ul {
    display: flex;
}
/* section 끝 */
footer {
    padding-top: 40px;
}
.foot_top_wrap {
    width: 100%;
    background: rgb(241, 241, 241);
}
.foot_top {
    display: flex;
    justify-content: space-between;
    width: 1340px;
    margin: 0 auto;
    font-size: 14px;
    border-top: 1px solid rgb(227, 227, 227);
    border-bottom: 1px solid rgb(227, 227, 227);
}
.foot_top ul {
    padding: 50px 0;
    background: rgb(241, 241, 241);
}
.foot_top ul p {
    padding-bottom: 20px;
    color: rgb(39, 39, 39);
    letter-spacing: 3px;
}
.foot_top ul li {
    line-height: 30px;
    color: rgb(63,63,63);
    letter-spacing: 1px;
}
form {
    display: flex;
}
input:first-child {
    height: 40px;
}
input:last-child {
    height: 44px;
    font-size: 13px;
    margin-left: -1px;
    padding: 10px 20px;
    background: #000;
    color: #fff;
}
.foot_top ul:last-of-type li {
    display: inline-block;
    padding-top: 30px;
    padding-right:10px;
}
.foot_bottom {
    display: flex;
    justify-content: space-between;
    width: 1340px;
    margin: 0 auto;
    font-size: 13px;
    padding: 40px 0;
}
.foot_bottom .right ul {
    display: flex;
    padding-top: 15px;
    letter-spacing: 1px;
}
.foot_bottom .right ul a::after {
    content: "|";
    padding: 0 30px;
}
.foot_bottom .right ul li:last-child a::after {
    content: "";
    padding: 0;
}

그동안 만들었던 웹 페이지 중 극동건설 홈페이지 다음으로 어려웠던 것 같다.
언뜻 보기에는 쉬워보이지만 머리를 많이 굴려서 오전 시간 동안 겨우 완성한 소중한 예제...
역시 브랜드 홈페이지라 그런지 이미지 파일이 예쁘당-

가장 어려웠던 것은 foot_top 부분에서 input 태그와 input 태그 2개를 나란히 놓는 것 !
foot_top에서 마지막 ul 태그의 li에 display: inline-block을 줘서 함께 놓았다.
뭔가 코드가 짜맞추듯이 지저분해진 느낌이긴 한데, 다음주에 선생님께 여쭤봐야지...
그리고 margin-left를 음의 값으로 설정해서 자간 간격을 줄이듯이 왼쪽으로 보내서
좀 더 자연스럽게 보이도록 만들었다.

프로토타입만 완성한거라서 아직 링크 연결하는 것까지는 구현하지 못하는 상태이다.

완성 !

* 이미지 출처
: Lee Ji eun Solo Exhibition <A bit of Me-time Part.2>

'Study > HTML5 & CSS3' 카테고리의 다른 글

HTML5 & CSS3 : transform, transition 속성 (1)	2022.11.01
HTML5 & CSS3 : text-spacing, transform, perspective 속성 (0)	2022.10.31
HTML5 & CSS3 : input 태그 속성 응용 (0)	2022.10.27
HTML5 & CSS3 : 회원가입 창 만들기 - input 태그 (0)	2022.10.26
HTML5 & CSS3 : Mutimedia 관련 태그, 속성 (0)	2022.10.25

인기 검색어

최근 게시글

아카이브

'Study > HTML5 & CSS3' 카테고리의 다른 글

관련글

티스토리툴바