본문 바로가기
TIL/웹 프로그래밍(풀스택) - boostcourse

2-4) class 와 id 속성

by _din 2020. 12. 27.

ID

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

 

Class

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

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

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

class로만 사용하는 곳도 있습니다.

그건 팀이 결정하기 나름입니다.

하지만 반대의 경우 즉 모든 것을 id만으로 사용하는 것은 없겠죠?  

 

 

실습코드

<!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>
  
  <section id="nav-section">
    <nav><ul>
      <li>Home</li>
      <li>Home</li>
      <li>About</li>
      <li>Map</li>
      </ul>
    </nav>
    
    <section id="roll-section">
      <button></button>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <button></button>
    </section>
    <section>
      <ul>
        <li class="our_diescriptipn">
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
        <li class="our_diescriptipn">
          <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_diescriptipn">
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
      </ul>
    </section>
  </section>
  <footer>
    <span>Copyright @codesquad</span>
  </footer>
</body>
</html>

위 코드에 소개된 nav-section 클래스를 가진 section엘리먼트는 유심히 보면, nav만 감싸있는게 아닙니다.
nav와 아래 section등도 모두 포함한 wrapper역할을 합니다. 영상에서는 nav-section이라는 이름을 주었지만,전체 영역을 모두 커버하는 class이름이 더 적당할 거 같네요.
nav-section 클래스 이름이 적당한 엘리먼트는 그럼 무엇일까요? 네 section 바로 아래있는 nav엘리먼트에 그 클래스 이름을 주는 것이 어울릴 겁니다.

생각해보기

  1. 좋은 class 이름을 짓는 규칙은 무엇일까요? id를 다른 웹사이트들에서는 어떻게 실제로 사용할까요? 어디에 id속성을 부여했는지 한번 찾아보세요.
  • SAMACSS
  • BEM (Block Elment Modifier)
    • block-name__element-name__modifier-name_modifier-value

참조 링크 3

 

  • OOCSS (Object Oriented Cascading Style Sheets)
    •  간결함 : 되도록 짧게
    • 명료함: 스타일과 작동 방식이 고스란히 드러나게
    • 분명한 말뜻(Semantics): 어떻게 생겼는지가 아니라, 어떤 모듈인지
    • 포괄성: 대부분의 사이트에서도 적용되도록
    • 화면 중심성: 종이나 다른 매체가 아닌 모니터를 기준으로

 

 

 2. 요즘에는 data속성이라는 것도 자주 사용합니다. tag에 추가적인 데이터 정보를 표현하기 위함입니다. 이 부분도 같이 살펴보면 좋습니다. 

 

  • data-로 시작하는 속성은 html이 발전하며 새롭게 추가된 기능으로, 화면에 안보이게 추가정보를 엘리먼트에 담을 수 있다. 
    - JS에서 dataset객체를 이용해 data-뒤의 이름을 불러 속성 값을 호출/변경할 수 있다(-는 camelCase로 변환됨)
    - CSS에서도 특성 data- 속성값 선택자를 통해 스타일을 바꿀 수 있다.
    그러나 접근을 따로 할 수 없기 때문에(by검색크롤러) 접근이 필요한 위한 정보는 넣지않도록 주의.
    (출처 : 강의 댓글 지구_zq님 댓글)

 

 

 

참조 링크 1

참조 링크 2

참조 링크 3

출처 Boostcourse - 2-4) class 와 id 속성

 

웹 프로그래밍(풀스택)

부스트코스 무료 강의

www.boostcourse.org

 

 

반응형
저작자표시

'TIL > 웹 프로그래밍(풀스택) - boostcourse' 카테고리의 다른 글

3-2) 상속과 우선순위 결정-1  (0) 2020.12.27
3-1) CSS 선언방법  (0) 2020.12.27
2-3) HTML 구조설계  (0) 2020.12.27
2-2) HTML Layout 태그  (0) 2020.12.27
2-1) HTML Tags  (0) 2020.12.25

관련글

댓글

티스토리툴바