여태까지 배운 것을 통해 실습을 진행해보자.
각각의 구역을 <div>로 나눠서 진행하였고, 인라인 스타일을 이용하여 작성하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
}
h4 {
color: red;
}
span {
color: blue;
font-weight: bold;
}
div {
outline: 1px solid;
width: 35%;
padding: 10px;
margin-left: auto;
margin-right: auto;
}
div p {
font-weight: 550;
font-size: 20px;
line-height: 150%;
}
</style>
</head>
<body>
<div>
<img src="../images/top.jpg" style="width: 100%;">
</div>
<div style="text-align: left; background-color: black;">
<label style="color: white;">확인하세요</label>
</div>
<div>
<h4>주문 및 배송</h4>
<p><span>오후 2시 이전</span> 주문건은 당일 발송합니다<br>
2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
</div>
<div>
<h4>교환 및 환불</h4>
<p>불만족시 <span>100% 환불</span>해 드립니다<br>
고객센터로 전화주세요</p>
</div>
<div>
<h4>고객센터</h4>
<p>0000-0000</p>
<p style="font-size: 15px; font-weight: lighter;">상담시간 : 오전 9시 ~오후 6시 (토/일, 공휴일 휴무)</p>
</div>
</body>
</html>
728x90
반응형
'HTML > CSS 기초' 카테고리의 다른 글
| [CSS] position 알아보기 : static, relative, absolute (0) | 2020.07.29 |
|---|---|
| [CSS] border와 outline (0) | 2020.07.29 |
| [CSS] margin 설정하기 (0) | 2020.07.28 |
| [CSS] 문단마다 스타일 설정하기 (0) | 2020.07.28 |
| [CSS] 글자 스타일 (0) | 2020.07.28 |
