별의 공부 블로그 🧑🏻‍💻

요소의 지정

Programming/HTML5 2017. 5. 17. 19:30
728x90
728x170

* id와 class

- 속성 중에는 글로벌 속성이라는 거의 모든 요소에 지정할 수 있는 것이 있음.

- 그중에서도 중요한 것이 'id 속성'과 'class 속성'

- 이러한 것은 스타일시트나 JavaScript와의 연결에 사용됨.


* id 속성

- id 속성은 요소에 식별자를 지정함.

- 하나의 도큐먼트 안에는 동일한 이름의 id를 지정할 수 없음.


<div id="name">


* class 속성

- class 속성은 요소에 클래스명을 지정함.

- 하나의 도큐먼트 안에 동일한 클래스를 여러 개 지정할 수 있음.


<div class="name">


* 예제 코드

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
<!DOCTYPE html>
<html>
<head>
    <title>그림책 소개</title>
    <style type="text/css">
    p.text {
        color: #999999;
    }
    #header {
        background-color: #eeaadd;
        font-size: 20px;
    }
    </style>
</head>
<body>
    <h1>
        <p id="header">그림책 시리즈에 대해</p>
    </h1>
    <h2>
        <p class="text">그림책은 그림으로 설명하고 있으므로 쉽게 배울 수 있습니다.</p>
    </h2>
    <h3>
        <p class="text">그림책 시리즈는 전국 서점에서 구입하실 수 있습니다.</p>
    </h3>
</body>
</html>
 
cs


내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)

728x90
그리드형(광고전용)

'Programming > HTML5' 카테고리의 다른 글

HTML5의 특징  (0) 2017.05.19
HTML5란?  (0) 2017.05.19
HTTP 리스폰스 헤더  (0) 2017.05.18
XHTML  (0) 2017.05.17
메타 요소  (0) 2017.05.17
폼 (Form)  (0) 2017.05.17
table 태그  (0) 2017.05.17
기본 태그  (0) 2017.05.17
⚠️AdBlock이 감지되었습니다. 원할한 페이지 표시를 위해 AdBlock을 꺼주세요.⚠️
starrykss
starrykss
별의 공부 블로그 🧑🏻‍💻


📖 Contents 📖