티스토리 뷰

Programming/HTML

HTML #10 : id & class 속성

copotter 2019. 5. 1. 20:35

190425


앞 포스팅에서 말했던, id 속성과 class 속성에 대해서 알아보겠습니다.

id, class 속성

- 모든 엘리먼트(태그)는 id속성과 class속성을 가질 수 있다.


- id속성은 해당 엘리먼트(태그)를 다른 엘리먼트와 구별하기 위해서 사용한다.

  * html문서 안에 동일한 id속성값을 갖는 엘리먼트가 없어야 한다.

  * id속성값으로 특수문자를 사용할 수 없다.('_'와'-'만 사용가능하다.

  * id속성값은 문자 (영어 대소문자)와 숫자를 사용할 수 있고, 숫자로 시작할 수 없다.


- class속성은 엘리먼트(태그)에 동일한 스타일을 적용할 목적으로 사용한다.

  * html문서 안에 동일한 스타일이 적용될 엘리먼트는 동일한 class속성값을 가지게 한다.

  * class속성값은 하나 이상의 값을 가질 수 있다.

    <div class="panel panel-default">

    <button class="btn btn-primary btn-sm btn-block">

  * class 속성값은 id속성값 규칙과 동일하다.


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
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .thumbnail {
            width: 140px;
            height: 150px;
            opacity: 0.3;
        }
        .gallery {
            width: 400px;
            height: 400px;
            opacity: 1;
        }
        .highlight {
            opacity: 1;
        }
    </style>
</head>
<body>
    <h1>id와 class 속성 사용하기</h1>
    
    <h2>이미지 갤러리</h2>
    
    <div id="img-gallery-box">
        <img src="images/04.jpg" class="gallery">
    </div>
    <div id="img-thumbnail-box">
        <img src="images/05.jpg" class="thumbnail highlight"/>
        <img src="images/04.jpg" class="thumbnail"/>
        <img src="images/03.jpg" class="thumbnail"/>
        <img src="images/02.jpg" class="thumbnail"/>
        <img src="images/02.jpg" class="thumbnail"/>
        <img src="images/01.jpg" class="thumbnail"/>
    </div>
</body>
</html>
cs



>> 27행에 04.jpg는 id속성으로 저 실행결과의 큰 구역 div에  img-gallery-box라는 id를 주고, 사진에는 gallery라는 class명을 주었고,

     밑의 사진들의 구역div에는 img-thumbnail-box라는 id를 주고, 각각의 사진들에 thumbnail이라는 class명을 주었다.


그리고 위의 6~20행 style태그에서 7~11행은 thumbnail 클래스에 너비 140, 높이 150, 투명도 0.3의 효과를 주고, 

     12~16행은 gallery클래스에 너비 400, 높이 400, 투명도1의 효과를 주었다.


이때, 스타일에서 class를 가져와서 효과를 줄때는  .class명 { ~ } 으로 표현하고, id는  #id명 { ~ } 으로 표현한다.


저작자표시 (새창열림)

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

HTML #11 : <form> 태그 & 예제  (0) 2019.05.01
HTML #9 : <div>태그 & <span>태그  (0) 2019.05.01
HTML #8 : Element ( 엘리먼트 )  (0) 2019.05.01
HTML #7 : 텍스트 강조 태그 (<strong>, <em>, <i>, <b> 태그)  (0) 2019.05.01
HTML #6 : <link> 태그  (0) 2019.05.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
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
글 보관함