04. 글자 속성과 텍스트 스타일 속성을 사용한 문제
다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.
(문서 안에 이미지 파일이 있다고 가정한다.)
1. <h2> 제목 스타일은 글자색 #ff0000, 글자 크기 1.5em, 가운데 정렬로 한다.
2. <p> 본문 스타일은 글자 크기 1.2em, 줄 간격 2em, 굵은 글자, 가운데 정렬로 한다.
3. 이름이 accent인 클래스 스타일을 글자색 #0000ff로 정의한다.
4. 이름이 smalltext인 클래스 스타일을 글자 크기 0.7em로 정의한다.
5. <span> 태그로 묶은 '오후 2시 이전'과 '100% 환불'에 accent 클래스 스타일을 적용한다.
6. <span> 태그로 묶은 '상담시간: ~ 공휴일 휴무)'에 smalltext 클래스 스타일을 적용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 문제 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; /* 테두리와 제목 텍스트 사이의 패딩 여백 */
}
// 코드를 작성하세요
</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>100% 환불</span>해 드립니다<br>
고객센터로 전화주세요</p>
<hr>
<h2>고객센터 </h2>
<p>0000-0000<br>
<span>상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
</div>
</div>
</body>
</html>결과 화면
A. 해설
1. <h2> 제목 스타일은 글자색 #ff0000, 글자 크기 1.5em, 가운데 정렬로 한다.
--> <h2> 스타일에 color 속성, font-size 속성, text-align 속성으로 지정한다.
2. <p> 본문 스타일은 글자 크기 1.2em, 줄 간격 2em, 굵은 글자, 가운데 정렬로 한다.
--> <p> 스타일에 font-size 속성, line-height 속성, font-weight 속성, text-align 속성으로 지정한다.
3. 이름이 accent인 클래스 스타일을 글자색 #0000ff로 정의한다.
--> accent 클래스 스타일에 color 속성으로 지정한다.
4. 이름이 smalltext인 클래스 스타일을 글자 크기 0.7em로 정의한다.
--> smalltext 클래스 스타일에 font-size 속성으로 지정한다.
5. <span> 태그로 묶은 '오후 2시 이전'과 '100% 환불'에 accent 클래스 스타일을 적용한다.
--> 주어진 부분에 <span>태그를 <span class="accent">로 바꾼다.
6. <span> 태그로 묶은 '상담시간: ~ 공휴일 휴무)'에 smalltext 클래스 스타일을 적용한다.
--> 주어진 부분에 <span>태그를 <span class="smalltext">로 바꾼다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 문제 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 class="accent">오후 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>
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
'💠문제 풀이 > CSS 문제 풀이' 카테고리의 다른 글
| 06. 레이아웃 속성과 여백 속성을 사용한 문제 (0) | 2022.05.13 |
|---|---|
| 05. 박스 모델 속성과 테두리 속성을 사용한 문제 (0) | 2022.05.13 |
| 03. 표 스타일 속성을 사용한 문제 (0) | 2022.04.11 |
| 02. 텍스트 스타일 속성을 사용한 문제 (0) | 2022.04.11 |
| 01. 텍스트 스타일 속성과 목록 스타일 속성을 사용한 문제 (0) | 2022.04.11 |