<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>마무리 문제 4</title>
<style>
#container { /* 전체 콘텐츠를 감싸는 div */
width:650px; /* 너비 */
margin:0 auto; /* 가로로 중앙에 배치 */
padding:5px; /* 테두리와 내용 사이의 패딩 여백 */
}
#check { /* 텍스트 부분을 감싸는 div */
width:640px; /* 너비 - 그림 너비 값에 맞춤 */
border:1px solid #ccc; /* 테두리 */
}
h1 {
color: white; /* 글자색 */
font-size: 1em; /* 글자 크기 */
background: #222; /* 배경색 */
margin: 0; /* 제목과 다른 요소 간의 마진 여백 */
padding: 10px; /* 테두리와 제목 텍스트 사이의 패딩 여백 */
}
h2 {
color:#ff0000;
font-size:1.5em;
text-align:center;
}
p{
font-size:1.2em;
line-height:2em;
font-weight:bold;
text-align:center;
}
.accent {
color:#0000ff;
}
.smalltext {
font-size:0.7em;
}
</style>
</head>
<body>
<div id="container">
<img src="images/top.jpg" alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 질좋은 사과를 저렴하게 즐겨보세요">
<div id="check">
<h1>확인하세요</h1>
<h2>주문 및 배송</h2>
<p><span>오후 2시 이전</span> 주문건은 당일 발송합니다<br>
2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
<hr>
<h2>교환 및 환불</h2>
<p>불만족시 <span class="accent">100% 환불</span>해 드립니다<br>
고객센터로 전화주세요</p>
<hr>
<h2>고객센터 </h2>
<p>0000-0000<br>
<span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
</div>
</div>
</body>
</html>
결과 :마무리 문제 4
'css' 카테고리의 다른 글
| 8장 예제 -마진중첩 이해하기 (0) | 2023.03.27 |
|---|---|
| 8장 실습 1 (0) | 2023.03.27 |
| 7장 마무리 문제 3 (0) | 2023.03.26 |
| 7장 마무리 문제 2 (0) | 2023.03.26 |
| 7장 마무리 문제 1 (0) | 2023.03.26 |