<따라서 만들 예제>
<웹페이지 만들기 조건>
CSS 를 사용하여 내가 사용한 속성 값을 변경하여 이 전기(biography) 의 모양을 변경하십시오.
- CSS color 키워드인 hotpink 를 사용하여 h1 제목을 분홍색으로 만듭니다.
- CSS color 키워드 purple 을 사용하는 10px 점선 border-bottom 을 제목으로 지정하십시오.
- h2 제목을 기울임 꼴로 만듭니다.
- 연락처 세부 정보에 사용된 ul 에 background-color 를 #eeeeee 및 5px 의 단색 자주색 border 으로 만듭니다. padding 을 사용하여 콘텐츠를 테두리에서 밀어냅니다.
- 마우스를 가리키면 green 으로 만듭니다.
-html 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Jane Doe</h1>
<div class="job-title">Web Developer</div>
<p>Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts.<br>
Separated they live in Bookmarksgrove right at the coast of the Semantics,
a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies
it with the necessary regelialia.<br>
It is a paradisematic country,
in which roasted parts of sentences fly into your mouth.</p>
<h2>Contact information</h2>
<ul>
<li>Tel: 123 45678</li>
</ul>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
- css 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
h1 {
color: rgb(253, 0, 127);
border-bottom: purple 10px dotted;
}
h2 {
font-style: italic;
}
ul {
background-color: #eeeeee;
border: purple 5px solid;
padding: 2em;
}
a:hover{
color: rgb(255, 121, 11);
}
.job-title{
color: gray;
font-weight: bold;
font-size: larger;
}
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
↓ 실습 결과물 ↓
예제 출처
https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/Using_your_new_knowledge
'Web > HTML+CSS' 카테고리의 다른 글
| [HTML/CSS] 배경과 테두리 만드는 실습 (0) | 2020.03.03 |
|---|---|
| [HTML/CSS] 문서에 CSS 추가하기 문서에서의 위치에 따라 스타일 지정하기 (0) | 2020.03.02 |
댓글