개발나라 스용공주

[HTML] 화장품 공식 판매 사이트 만들기 본문

WEB/HTML & CSS

[HTML] 화장품 공식 판매 사이트 만들기

스용공주 2024. 7. 28. 16:21
728x90
728x90

이번 글은 아래 영상과 같이 홈페이지를 만드는 내용에 작성해볼 것이다.

 

 

 

 

 

 

웹페이지의 구성은 아래 사진과 같다.

 

 

 

 

 

 

이번 웹페이지를 만들면서 사용된 기술에 대한 내용을 담은 글은 아래 링크에 담겨있다.

https://hwangseoyoung.tistory.com/137

 

[HTML] 깜빡거리는 글씨 만들기 - 애니메이션을 활용한 글씨 깜빡임 생성

이번 글은HTML에서 2가지 색상의 반복으로 글씨가 깜빡거리는 듯한 효과를 만들어 볼 것이다.글씨 깜빡이는 애니메이션 넣기 실행화면 먼저 아래 코드와 같이 상품을 소개하는 코드를 작성해준

hwangseoyoung.tistory.com

https://hwangseoyoung.tistory.com/138

 

[HTML] 글씨에 줄 긋기 / <del>태그

이번 글은 html로 글씨에 줄을 긋는 방법에 대한 내용을 작성할 것이다.    [ 글씨에 줄 긋기 ]아래 사진을 보면 10,000원이 10,000원으로 표시되어져 있는 것을 확인할 수 있다. 바로 ~ 을 사용하여

hwangseoyoung.tistory.com

 

 

 

 

 

 

웹페이지의 코드는 아래와 같다.

<!doctype html>
<html>
    <head>
        <title>Dr.Cosmatic 공식 홈페이지</title>
        <meta charset="utf-8">
        <style>
            * {
                margin : 0;
                padding : 0;
                background-color: rgb(219, 241, 216);
            }
            header {
                border : 1px red solid;
                height : 120px;
            }
            .login {
                margin : 10px 50px 0 0;
                float : right;
            }
            .title {
                clear : right;
                color : seagreen;
                margin : 30px 0 0 50px;
                font-weight: bold;
                font-size : 25px;
            }
            ul {
                margin : 0 30px 0 0;
                list-style-type: none;
            }
            .list {
                display: inline;
                margin : 20px;
                float : right;
                font-weight : bold;
            }
            .banner {
                size : 100%;
            }
            aside {
                margin : 15px 15px 50px 50px;
                padding : 10px;
                border : 1px red solid;
                width : 350px;
                height : 430px;
                float : left;
            }
            aside h3 {
                padding : 5px;
                border : seagreen 1px solid;
                background-color : seagreen;
            }
            .intro {
                margin : 10px 0 10px 0;
            }
            .subti1 {
                margin : 15px 0 15px 0;
                padding : 10px;
                border-top : 2px black solid;
                border-bottom : 2px lightgrey dashed;
            }
            aside ul {
                margin : 10px;
            }
            aside li {
                margin-bottom : 5px;
                list-style-type: none;
            }
            .subti2 {
                margin : 15px 0 15px 0;
                border : 1px seagreen solid;
            }
            .subti2 h4 {
                padding : 10px;
            }
            #main {
                margin : 15px 10px 10px 10px;
                padding : 10px;
                border : 1px red solid;
                float : right;
                width : 1000px;
                height : 430px;
            }
            .noticebox {
                border : 1px red solid;
                float : left;
                width : 400px;
            }
            .notice h4{
                padding-bottom : 5px;
                border-bottom : 2px seagreen solid;
            }
            .notice ul {
                margin : 15px 0 15px 15px;;
            }
            .shop {
                border : 1px red solid;
                margin : 0 15px 15px 15px;
                float : left;
                width : 550px;
            }
            .shop h4 {
                margin-bottom : 10px;
                padding-bottom : 5px;
                border-bottom : 2px seagreen solid;
            }
            .shop ul {
                margin : 10px;
                float : left;
            }
            @keyframes blink {
                0% {
                    color : black;
                }
                50% {
                    color : red;
                }
                100% {
                    color : black;
                }
            }
            .discount {
                animation : blink 0.5s infinite;
            }
            footer {
                clear : both;
                padding : 35px;
                border : 1px red solid;
                height : 250px;
                background-color: darkgreen;
            }
            .info {
                width : 800px;
                height : 70px;
                background-color: darkgreen;
            }
            .info ul {
                float : left;
                background-color: darkgreen;
            }
            .info li {
                display : inline;
                margin : 10px 30px 10px 30px;
                background-color: darkgreen;
                color : white;
            }
            .infodebox {
                display : flex;
                justify-content: center;
                background-color: darkgreen;
            }
            .infode {
                float : left;
                margin : 20px 50px 0 50px;
                background-color: darkgreen;
            }
            .infode h3 {
                color : palevioletred;
                background-color: darkgreen;
            }
            .infode li {
                color : white;
                background-color: darkgreen;
            }
            .bold {
                font-weight: bold;
                font-size : 25px;
            }
        </style>
    </head>
    <body>
        <header>
            <div class = "login">황서영(hwang123) | 로그아웃 | 정보수정</div>
            <h2 class = "title">Dr.Cosmatic</h2>
            <ul>
                <li class = "list">Home</li>
                <li class = "list">출석부</li>
                <li class = "list">온라인 몰</li>
                <li class = "list">게시판</li>
            </ul>
        </header>

        <section>
            <div ><img src = "./Design/Banner.jpg" width = 100%; height = 350px;></div>
        </section>

        <aside>
            <h3>Dr.Cosmatic</h3>
            <div class = "intro">안녕하세요. 닥터코스메틱 제품 판매 공식 홈페이지입니다.</div>
            <input type = 'text'>&nbsp;<button>검색</button>
            <h4 class = subti1>온라인 몰</h4>
            <ul>
                <li>기초 제품</li>
                <li>선크림 특가</li>
                <li>마스크팩</li>
            </ul>
            <div class = "subti2">
            <h4>최신 댓글</h4>
            <ul>
                <li>안녕하세요.</li>
                <li>안녕하세요.</li>
                <li>안녕하세요.</li>
            </ul>
            </div>
        </aside>

        <section id = "main">
            <div class = "noticebox">
                <div class = "notice">
                    <h4>알림</h4>
                    <ul>
                        <li>신제품 출시 안내글입니다.            09.30</li>
                        <li>신제품 출시 안내글입니다.            09.30</li>
                        <li>신제품 출시 안내글입니다.            09.30</li>
                        <li>신제품 출시 안내글입니다.            09.30</li>
                        <li>신제품 출시 안내글입니다.            09.30</li>
                    </ul>
                </div>
                <div class = "notice">
                    <h4>게시판</h4>
                    <ul>
                        <li>안녕하세요. 반갑습니다.            09.30</li>
                        <li>안녕하세요. 반갑습니다.            09.30</li>
                        <li>안녕하세요. 반갑습니다.            09.30</li>
                        <li>안녕하세요. 반갑습니다.            09.30</li>
                        <li>안녕하세요. 반갑습니다.            09.30</li>
                    </ul>
                </div>
            </div>
            <div class = "shop">
                <h4>ONLINE SHOP</h4>
                <ul>
                    <li><img src = "./Design/Shop/001.jpg" width = 150px; height = 120px;></li>
                    <li><b>뷰티 마스크팩</b></li>
                    <li>1,500원</li>
                </ul>
                <ul>
                    <li><img src = "./Design/Shop/002.jpg" width = 150px; height = 120px;></li>
                    <li class = "discount"><b>[할인] 진정 마스크팩</b></li>
                    <li><del>1,500원</del> -> 1,450원</li>
                </ul>
                <ul>
                    <li><img src = "./Design/Shop/003.jpg" width = 150px; height = 120px;></li>
                    <li><b>수분 기초 세트</b></li>
                    <li>20,500원</li>
                </ul>
                <ul>
                    <li><img src = "./Design/Shop/004.jpg" width = 150px; height = 120px;></li>
                    <li><b>기능성 수분 크림</b></li>
                    <li>12,000원</li>
                </ul>
                <ul>
                    <li><img src = "./Design/Shop/005.jpg" width = 150px; height = 120px;></li>
                    <li><b>수분 폭탄 에센스 1+1</b></li>
                    <li>15,000원</li>
                </ul>
                <ul>
                    <li><img src = "./Design/Shop/006.jpg" width = 150px; height = 120px;></li>
                    <li class = "discount"><b>피지쏙 클렌징폼</b></li>
                    <li><del>10,000원</del> -> 8,500원</li>
                </ul>
            </div>
        </section>
        <footer>
            <div class = "info">
                <ul>
                    <li>Dr.Cosmatic 소개</li>
                    <li>개인정보처리방침</li>
                    <li>저작권 정보</li>
                    <li>이용 안내</li>
                </ul>
            </div>
            <div class = "infodebox">
                <div class = "infode">
                    <h3>문의전화</h3>
                    <ul>
                        <li class = "bold">123-1234</li>
                        <li>10:00 - 18:00 (lunch 12:00 - 13:00)</li>
                    </ul>
                </div>
                <div class = "infode">
                    <h3>Dr.Cosmatic</h3>
                    <ul>
                        <li>주소 : 서울특별시 강남구</li>
                        <li>전화 : 02-123-1234</li>
                        <li>팩스 : 02-123-1234</li>
                        <li>이메일 : 123-1234-1234</li>
                    </ul>
                </div>
                <div class = "infode">
                    <h3>입금 정보</h3>
                    <ul>
                        <li>국민 123-1234-1234</li>
                        <li>(주)닥터코스메틱</li>
                    </ul>
                </div>
            </div>
        </footer>
    </body>
</html>

 

 

 

 

 

 

완성된 웹페이지 이미지는 아래 파일이다.

웹페이지 만들기 - 화장품 판매.png
0.82MB

 

 

 

728x90
728x90

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

[HTML] box-sizing 속성 / 요소의 크기를 계산하는 방법에 대한 기준  (0) 2024.07.30
[HTML] 글씨에 줄 긋기 / <del>태그  (0) 2024.07.28
[HTML] 깜빡거리는 글씨 만들기 - 애니메이션을 활용한 글씨 깜빡임 생성  (0) 2024.07.28
[HTML] position을 활용한 개체 이동 / position의 relative, absolute  (0) 2024.07.27
[HTML] 개체 중앙에 배치하기 / Justify-content와 align-items  (0) 2024.07.27
'WEB/HTML & CSS' Related Articles more
Comments