728x90
02. 텍스트 스타일 속성을 사용한 문제
다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.
1. 글자색을 흰색(#fff 또는 white)으로 지정한다.
2. 텍스트를 기준으로 오른쪽 아래, 가로 거리 3px, 세로 거리 2px 되는 위치에 번짐 정도 5px 되는 그림자 효과를 추가한다. 그림자 색은 검정(#000 또는 black)으로 지정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 문제 2</title>
<style>
.container {
width:300px;
height:70px;
margin:0 auto;
background-color:#444;
}
h1 {
text-align: center;
line-height: 70px;
// 코드를 작성하세요
}
</style>
</head>
<body>
<div class="container">
<h1>웹 개발 기초</h1>
</div>
</body>
</html>결과 화면
A. 해설
1. 글자색을 흰색(#fff 또는 white)으로 지정한다.
--> <h1> 스타일에 color 속성으로 색을 추가한다.
2. 텍스트를 기준으로 오른쪽 아래, 가로 거리 3px, 세로 거리 2px 되는 위치에 번짐 정도 5px 되는 그림자 효과를 추가한다. 그림자 색은 검정(#000 또는 black)으로 지정한다.
--> <h1> 스타일에 text-shadow 속성으로 가로 거리, 세로 거리, 번짐 정도를 각각 3px, 2px 5px로 추가하고, 그다음 색상도 추가한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 문제 2</title>
<style>
.container {
width:300px;
height:70px;
margin:0 auto;
background-color:#444;
}
h1 {
text-align: center;
line-height: 70px;
color:#fff;
text-shadow:3px 2px 5px #000;
}
</style>
</head>
<body>
<div class="container">
<h1>웹 개발 기초</h1>
</div>
</body>
</html>
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
728x90
'💠문제 풀이 > CSS 문제 풀이' 카테고리의 다른 글
| 06. 레이아웃 속성과 여백 속성을 사용한 문제 (0) | 2022.05.13 |
|---|---|
| 05. 박스 모델 속성과 테두리 속성을 사용한 문제 (0) | 2022.05.13 |
| 04. 글자 속성과 텍스트 스타일 속성을 사용한 문제 (0) | 2022.04.11 |
| 03. 표 스타일 속성을 사용한 문제 (0) | 2022.04.11 |
| 01. 텍스트 스타일 속성과 목록 스타일 속성을 사용한 문제 (0) | 2022.04.11 |