html/css/js_1

html/css 기초적인 부분을 오늘은 해보려고 합니다.

오늘 하려고 하는 부분은 바로 윗 부분과 같이 나오는 방법을 해보려 합니다. 가볍게 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

댓글

이 블로그의 인기 게시물

httpURLConnection을 이용한 안드로이드,php,mysql 서버 연동