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'> <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>
완성된 웹페이지 이미지는 아래 파일이다.
728x90
728x90