연습문제1~3
1. quiz-1.html에는 <div> 영역 안에 텍스트가 표시되어 있습니다. 다음 조건에 맞는 스타일 속성을 <div>영역의 스타일에 추가하세요.
1. <div> 영역에 적용한 .container 스타일을 수정합니다.
2. 배경 색은 rgba 표기법을 사용하고 파란색에 불투명도를 0.2로 합니다.
3. 기존 테두리 색(#ccc)을 파란색(blue)으로 바꿉니다.<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 스타일</title>
<style>
body {
font-family: "맑은 고딕", 돋움;
}
.container {
width:500px;
padding:10px;
border:1px solid #ccc;
}
h1 {
font-size: 17px;
}
p {
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<div class="container">
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>
</div>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 스타일</title>
<style>
body {
font-family: "맑은 고딕", 돋움;
}
.container {
background-color: rgba(0, 0, 255, 0.2);
width:500px;
padding:10px;
border:1px solid blue;
}
h1 {
font-size: 17px;
}
p {
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<div class="container">
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>
</div>
</body>
</html>
2. quiz-2.html에는 <div> 영역에 연한 파란색의 배경 색이 적용되어 있습니다. 이 영역 위에 마우스 커서를 올려 놓았을 때의 스타일을 바꾸려고 합니다. 다음 조건에 맞게 스타일을 추가하세요.
1. <div> 영역에 마우스 커서를 올려 놓았을 때의 색상이므로 .container:hover 스타일을 추가합니다.
2. 배경 색은 파란색(blue)로 바꿉니다.
3. 글자 색은 흰색으로 바꿉니다.<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 스타일</title>
<style>
body {
font-family: "맑은 고딕", 돋움;
}
.container {
width:500px;
padding:10px;
border:1px solid blue;
background:rgba(0,0,255,0.2);
}
h1 {
font-size: 17px;
}
p {
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<div class="container">
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>
</div>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 스타일</title>
<style>
body {
font-family: "맑은 고딕", 돋움;
}
.container {
width:500px;
padding:10px;
border:1px solid blue;
background:rgba(0,0,255,0.2);
}
.container:hover {
background: rgb(0,0,255);
color: white;
}
h1 {
font-size: 17px;
}
p {
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<div class="container">
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>
</div>
</body>
</html>
3. quiz-3.html에는 텍스트 한 줄이 표시되어 있습니다. 사각 영역에 배경 이미지를 채우고 텍스트 부분에도 배경 색을 넣어 결과 화면처럼 만들어 보세요.
1. 영역 전체를 감싸는 스타일은 .container이고 텍스트 영역을 감싸는 스타일은 .content입니다.
2. 영역 전체에 배경 이미지(images/apple.bg.jpg)를 삽입하는데 반복하지 않고 영역 전체를 덮을 수 있도록 합니다(.container 스타일 속성에 추가).
3. 배경 이미지를 추가하면 텍스트가 눈에 잘 띄지 않습니다. 텍스트 영역에 흰색 배경을 깔되 너무 진하지 않게 불투명도(alpha 값)를 0.5로 지정합니다(.content 스타일 속성 추가).<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 스타일</title>
<style>
body {
font-family: "맑은 고딕", 돋움;
}
.container {
position: relative;
width: 600px;
height: 400px;
padding: 20px;
border: 1px solid #ccc;
}
.content {
position: absolute;
top: 300px;
width: 90%;
padding: 10px;
}
h1 {
font-size: 30px;
text-align: center;
}
p {
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>하루 한 알의 사과는 의사를 멀리 한다</h1>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경 스타일</title>
<style>
body {
font-family: "맑은 고딕", 돋움;
}
.container {
background: no-repeat;
background-position: 100% 100%;
position: relative;
width: 600px;
height: 400px;
padding: 20px;
border: 1px solid #ccc;
}
.content {
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 300px;
width: 90%;
padding: 10px;
}
h1 {
font-size: 30px;
text-align: center;
}
p {
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<div class="container">
<img src="images/apple-bg.jpg">
<div class="content">
<h1>하루 한 알의 사과는 의사를 멀리 한다</h1>
</div>
</div>
</body>
</html>
'HTML > 색상과 배경을 위한 스타일' 카테고리의 다른 글
| 색상과 배경을 위한 스타일 (0) | 2021.08.14 |
|---|