class 는 하나의 HTML 안에 중복해서 여러 군데 같이 쓸 수 있다. 

id는 하나 이상 써도 된다. 


같은 class 이름을 가진 것들이 같은 스타일을 갖게 된다.


ID

  • 고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다.
  • 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다.


Class

  • 하나의 HTML문서 안에 중복해서 사용 가능합니다.
  • 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다.
  • 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다.

이렇게 구분할 수 있지만, 많은 회사마다 개발단계에서 어떠한 약속(convention)을 만들어서 자신들만의 규칙을 사용하기도 합니다.

예를 들어 ID사용을 금하는 곳도 있습니다.

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
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
  <h1>Company Name</h1>
  <img src="..." alt="logo">
  </header>
  
  <div id="nav-div">  <!-- section태그를 사용했었지만, 별 의미없는 container에는 section태그가 적절하지 않아서 수정합니다 -->
    <nav><ul>
      <li>Home</li>
      <li>Home</li>
      <li>About</li>
      <li>Map</li>
      </ul></nav>
    
    <div id="roll-div"> <!-- id는 이 div 에서 유일한것이지만, class를 써도 무방하다. -->  
      <button></button>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <button></button>
    </div>
    <div>
      <ul>
        <li class="our_description">
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
        <li class="our_description">
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique accusamus, corporis, dolorum fugiat tenetur porro. Aspernatur commodi, ea suscipit non? Molestiae nulla explicabo debitis provident nostrum dolorem minima reiciendis suscipit?</div>
        </li>
        <li class="our_description">
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
      </ul>
    </div>
  </div>
  <footer>
    <span>Copyright @codesquad</span>
  </footer>
</body>
</html>
cs


'Web' 카테고리의 다른 글

Web10 :: 상속과 우선순위 결정  (0) 2019.01.06
Web09 :: CSS 선언 방법  (0) 2019.01.04
Web07 :: HTML 구조설계  (0) 2019.01.04
Web06 :: HTML Layout 태그  (0) 2019.01.03
Web05 :: WAS  (0) 2019.01.03

티스토리툴바