728x90
반응형
문제 1
이미지를 편집하지 않고 CSS만 사용해서 해답 이미지처럼 표시하시오.
▶ 코드
<!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>
div {
color: white;
background-color: rgb(56, 56, 56);
font-size: 25px;
font-weight: bold;
text-shadow: 2px 2px 4px white;
text-align: center;
width: 220px;
padding: 15px;
margin: 10px auto;
}
</style>
</head>
<body>
<div>웹 개발 기초</div>
</body>
</html>
▶ 출력 결과
문제 2
이미지를 편집하지 않고 CSS만 사용해서 해답 이미지처럼 표시하시오.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 4</title>
<style>
h1 {
color: white;
font-size: 1em;
background: #222;
margin: 0;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="check">
<h1>확인하세요</h1>
<h2>주문 및 배송</h2>
<p><span>오후 2시 이전</span> 주문건은 당일 발송합니다<br>
2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
<hr>
<h2>교환 및 환불</h2>
<p>불만족시 <span>100% 환불</span>해 드립니다<br>
고객센터로 전화주세요</p>
<hr>
<h2>고객센터 </h2>
<p>0000-0000<br>
<span>상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
</div>
</div>
</body>
</html>
▶ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 4</title>
<style>
#container {
text-align: center;
border: 1px solid black;
width: 600px;
padding: 1px;
margin: 10px auto;
}
img {
background-origin: border-box;
width: 100%;
margin: 0 auto;
}
h1 {
color: white;
font-size: 1em;
background: #222;
margin: 0;
padding: 10px;
}
h2, h3 {color: red;}
p, span {line-height: 30px;}
.h {text-align: left;}
.sp1 {color: blue;}
.sp2 {font-size: 12px;}
</style>
</head>
<body>
<div id="container">
<img src="../img/top.jpg" alt="꿀사과팝니다">
<div id="check">
<h1 class="h">확인하세요</h1>
<h2>주문 및 배송</h2>
<p><span class="sp1">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
<hr>
<h2>교환 및 환불</h2>
<p>불만족시 <span class="sp1">100% 환불</span>해 드립니다<br>
고객센터로 전화주세요</p>
<hr>
<h2>고객센터 </h2>
<p>0000-0000<br>
<span class="sp2">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
</div>
</div>
</body>
</html>
▶ 출력 결과
728x90
반응형
'HRD_훈련 > 실습' 카테고리의 다른 글
| [CSS] Float 실습 (27일차) (0) | 2023.06.22 |
|---|---|
| [CSS] Box , Margin, display 실습 (27일차) (0) | 2023.06.22 |
| [CSS] CSS 실습 2 (26일차) (0) | 2023.06.21 |
| [CSS] CSS 실습 1 (26일차) (0) | 2023.06.21 |
| [HTML] HTML 실습 3 (26일차) (0) | 2023.06.21 |