html/css/js_1
html/css 기초적인 부분을 오늘은 해보려고 합니다.
오늘 하려고 하는 부분은 바로 윗 부분과 같이 나오는 방법을 해보려 합니다. 가볍게 style을 줘서 배경색에 변화를 주고, 하이라이팅을 해보려고 합니다.
코드는 다음과 같습니다. 보통 style은 head사이에 보통 많이 넣습니다.
코드 설명은 코드안에서 하겠습니다 ㅎㅎ
오늘 하려고 하는 부분은 바로 윗 부분과 같이 나오는 방법을 해보려 합니다. 가볍게 style을 줘서 배경색에 변화를 주고, 하이라이팅을 해보려고 합니다.
코드는 다음과 같습니다. 보통 style은 head사이에 보통 많이 넣습니다.
코드 설명은 코드안에서 하겠습니다 ㅎㅎ
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
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html>
<head>
<style type="text/css">// style태그를 넣어서 이쁘게 html을 꾸며 봅시다.
div.cities{// div태그에 cities 클래스에 해당 스타일링을 넣어줍니다.
background: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
span.note{// highliting option입니다.
background: white;
color: red;
font-size: 120%;
}
</style>
<title>this is how to use style sheet</title>
</head>
<body>// body에는 간단하게 작성을 해보았습니다. body는 실질적으로 웹에 보여지는 부분입니다.
<div class="cities">
<h2>London</h2>//h2태그
<p>London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing <span class="note"> on the River Thames, London</span> has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>New York is the<span class="note"> capital of England.</span> It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="cities">
<h2>Seoul</h2>
<p>Seoul is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>
| cs |
댓글
댓글 쓰기