728x90
08. 배경 이미지 속성을 사용한 문제 I
다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.
(문서 안에 이미지 파일이 있다고 가정한다.)
1. 배경색은 회색이다.
2. 배경이미지는 웹 브라우저의 아래에서 가로로 가득 차게 반복, 고정되어 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 문제 8</title>
<style>
// 코드를 작성하세요
h1 {
margin-top:50px;
font-size: 20px;
}
p {
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다.
모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다.
바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>
</body>
</html>결과 화면
A. 해설
1. 배경색은 회색이다.
--> body 스타일에 color 속성으로 글씨를 흰색으로 바꾼다.
2. 배경이미지는 웹 브라우저의 아래에서 가로로 가득 차게 반복, 고정되어 있다.
--> body 스타일에 background 속성으로 이미지 파일경로를 연결한다. 그리고 repeat-x 속성과 left bottom으로 아래에서 가로로 가득 차게 반복하고, fixed 속성으로 고정한다.
<!DOCTYPEe html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 문제 8</title>
<style>
body{
color:white;
background:url('images/bg1.jpg') repeat-x left bottom fixed;
background-color:gray;
}
h1 {
margin-top:50px;
font-size: 20px;
}
p {
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다.
모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다.
바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>
</body>
</html>
출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)
728x90
'💠문제 풀이 > CSS 문제 풀이' 카테고리의 다른 글
| 10. 구조 가상 클래스를 사용한 문제 (0) | 2022.07.04 |
|---|---|
| 09. 배경 이미지 속성을 사용한 문제 II (0) | 2022.05.27 |
| 07. 레이아웃 속성을 사용한 문제 (0) | 2022.05.16 |
| 06. 레이아웃 속성과 여백 속성을 사용한 문제 (0) | 2022.05.13 |
| 05. 박스 모델 속성과 테두리 속성을 사용한 문제 (0) | 2022.05.13 |