728x90
반응형
연습1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width: 500px;
margin: 50px auto;
}
.container{
}
img{
width: 500px;
}
h1{
background-color: black;
color: white;
}
h2{
text-align: center;
font-size: 20px;
}
.blu_1{
color: blue;
text-align: center;
}
.red_1 {
color: red;
}
</style>
</head>
<body>
<div id="container">
<img src="../Resource/apple.jpg" alt="사과">
<p class="po">가정용 꿀사과
<div>흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다.<br>
질좋은 사과를 저렴하게 즐겨보세요</div>
</p>
<h1>확인하세요</h1>
<h2><span class="red_1">주문 및 배송</span>
<p><span class="blu_1">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
2시 이후 주문건은 다음날 발송합니다(주말제외)</p>
</h2>
<h2><span class="red_1">교환 및 환불</span>
<p>불만족식 <span class="blu_1">100% 환불</span>해 드립니다.<br>
고객센터로 전화주세요.</p>
</h2>
<hr>
<h2><span class="red_1">고객센터</span>
<p>0000-0000<br>
상담지산 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</p>
</h2>
</div>
</body>
</html>
연습2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width: 650px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
}
h1 {
font-size: 2em;
color: white;
background-color: black;
}
h2{
color: red;
font-size: 1.5em;
text-align: center;
}
.info_text{
color: blue;
}
#background {
width: 100%;
height: 400px;
background-image: url(../Resource/apple.jpg);
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
}
#title{
width: 100%;
text-align: left;
background-color: #000000AA;
color: orange;
padding-left: 30px;
position: absolute;
bottom: 0;
}
#title_name{
line-height: 2em;
color: white;
font-size: 1.5em;
}
p{
font-weight: bold;
font-size: 1.2em;
text-align: center;
line-height: 2em;
}
</style>
</head>
<body>
<div id="container">
<div id="background">
<p id="title">
<span id="title_name">가정용 꿀사과</span><br>
흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다.<br>
질좋은 사과를 저렴하게 즐겨보세요
</p>
</div>
<h1>확인하세요</h1>
<h2>주문 및 배송</h2>
<p>
<span class="info_text">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
2시 이후 주문건은 다음날 발송합니다(주말제외)<br>
</p>
<h2>교환 및 환불</h2>
<p>
불만족시 <span class="info_text">100% 환불해</span> 드립니다.<br>
고객센터로 전환주세요<br>
</p>
<hr>
<h2>고객센터</h2>
<p>
0000-0000<br>
상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴뮤)<br>
</p>
</div>
</body>
</html>728x90
반응형
'코딩일지 > WEB' 카테고리의 다른 글
| radial그라데이션 (0) | 2022.12.29 |
|---|---|
| linear그라데이션 (0) | 2022.12.29 |
| background예제 2 (0) | 2022.12.28 |
| background와 vw,vh (2) | 2022.12.28 |
| Position예제2 (0) | 2022.12.28 |