Post

HTML) ID vs class 차이

Posted Updated
Preview Image
By parksohyunnn 14 min read

오늘은 아이디선택자와 클래스 선택자에 대해 알이보도록 하겠습니다.

아이디 선택자란?

  • 아이디(ID) 선택자는 CSS에서 특정 HTML 요소를 식별하기 위해 사용되는 선택자입니다. 이 선택자는 HTML 요소의 ID 속성 값을 기반으로 요소를 선택합니다.

  • 아이디 선택자는 # 기호를 사용하여 지정됩니다. 선택자에는 ID 속성 값이 따라옵니다. 예를 들어, 아이디가 “header”인 <div> 요소를 선택하려면 다음과 같이 CSS를 작성할 수 있습니다.

아이디 선택자 특징

  • ID는 문서 내에서 유일해야 합니다. 즉, 같은 페이지 내에서 동일한 ID를 가진 요소는 하나만 있어야 합니다.
  • 특정 요소를 식별하고 스타일링하거나 스크립트로 조작할 때 주로 사용됩니다.
  • CSS에서는 # 기호를 사용하여 ID를 선택할 수 있습니다.
  • 예: <div id=”header”>>, <p id=”intro”>>

아이디 선택자 사용시 주의사항

  • 유일성:
    HTML 문서 내에서 아이디는 유일해야 합니다. 즉, 같은 아이디를 가진 요소가 여러 개 있어서는 안 됩니다. 아이디는 고유한 식별자로 사용되므로 중복되어서는 안 됩니다.

  • 명확성:
    아이디 선택자는 특정한 요소를 식별하는 데 사용됩니다. 따라서 선택한 아이디는 해당 요소와 명확하게 관련되어야 합니다. 적절하지 않은 아이디를 선택하면 혼동을 초래할 수 있습니다.

  • 너무 자주 사용하지 않기:
    아이디 선택자는 유일한 요소에만 적용되므로 너무 자주 사용해서는 안 됩니다. 클래스 선택자는 여러 요소에 스타일을 적용하는 데 더 적합하므로, 가능한 경우 클래스 선택자를 사용하는 것이 좋습니다.

  • CSS와 JavaScript 간의 혼용:
    아이디 선택자는 CSS뿐만 아니라 JavaScript에서도 사용될 수 있습니다. 하지만 ID를 사용하여 스타일을 적용하는 것과 DOM에서 요소를 찾는 것을 혼용하는 것은 좋지 않습니다. 가능하면 CSS에서 스타일을 적용하고 JavaScript에서는 클래스나 다른 속성을 사용하여 요소를 찾는 것이 좋습니다.

  • 가독성과 유지 보수성:
    아이디 선택자를 사용할 때는 코드의 가독성과 유지 보수성을 고려해야 합니다. 아이디 선택자를 사용하여 특정 요소에 너무 많은 스타일을 적용하면 코드가 복잡해지고 유지 보수가 어려워질 수 있습니다.

아이디 선택자 기본값

1
2
3

#header {
    /* 스타일 정의 */
}

  • 아이디 선택자는 # 기호를 사용하여 지정됩니다. 선택자에는 ID 속성 값이 따라옵니다. 예를 들어, 아이디가 “header”인 <div> 요소를 선택하려면 다음과 같이 CSS를 작성할 수 있습니다. -위의 CSS 코드는 아이디가 “header”인 요소를 선택하여 해당 요소에 스타일을 적용합니다.

  • HTML에서 아이디 선택자를 사용할 때는 선택한 요소의 ID 속성 값과 일치하는 아이디 선택자를 사용해야 합니다. 아이디는 문서 내에서 유일해야 하므로 같은 ID를 가진 요소가 여러 개 있어서는 안 됩니다.

  • 아이디 선택자는 특정 요소를 정확하게 식별하여 스타일을 적용하거나 JavaScript에서 해당 요소를 조작하는 데 사용됩니다.

아이디 선택자 사용예시

1
2
3
4

<div id="header">
    <h1>Welcome</h1>
    <p>This is the header section.</p>
</div>
  • 위의 HTML 코드에서는 아이디가 “header”인 <div> 요소를 정의하고 있습니다. 이 요소는 CSS에서 정의한 아이디 선택자에 의해 스타일이 적용됩니다.
1
2
3
4
5

#header {
    background-color: blue;
    color: white;
    padding: 10px;
}
  • 위의 CSS 코드는 아이디가 “header”인 요소를 선택하여 배경색을 파란색으로, 글자색을 흰색으로, 패딩을 10px로 설정합니다.

따라서 아이디 선택자는 특정 아이디를 가진 단일 요소를 선택하고, 해당 요소에 스타일을 적용하는 데 사용됩니다. 이를 통해 웹 페이지의 특정 부분을 정확하게 스타일링할 수 있습니다.

클래스 선택자란?

  • 클래스 선택자는 CSS에서 HTML 요소를 선택하고 스타일을 적용하는 데 사용되는 선택자 중 하나입니다. 클래스는 여러 요소에 동시에 적용될 수 있으며, 이를 통해 해당 클래스가 지정된 모든 요소에 동일한 스타일을 적용할 수 있습니다.

  • 아이디 선택자는 # 기호를 사용하여 지정됩니다. 선택자에는 ID 속성 값이 따라옵니다. 예를 들어, 아이디가 “header”인 <div> 요소를 선택하려면 다음과 같이 CSS를 작성할 수 있습니다.

클래스 선택자 특징

  • Class는 여러 요소에 동시에 적용될 수 있습니다. 즉, 같은 클래스를 가진 여러 요소가 있을 수 있습니다.
  • 타일을 그룹화하고 여러 요소에 동일한 스타일을 적용하는 데 주로 사용됩니다.
  • JavaScript나 CSS에서 특정 클래스를 선택하여 스타일을 적용하거나 동작을 제어할 수 있습니다.
  • CSS에서는 . 기호를 사용하여 클래스를 선택할 수 있습니다.
  • 예:<div class=”container”>,<p class=”highlight”>

아이디 선택자 사용시 주의사항

  • 의미 부여:
    클래스 이름은 해당 요소의 역할이나 의미를 잘 나타내야 합니다. 의미 없는 이름이나 일반적인 이름 대신에 요소의 목적이나 용도를 잘 표현하는 이름을 선택해야 합니다.

  • 일관성:
    클래스 이름을 선택할 때 일관성을 유지해야 합니다. 비슷한 기능이나 스타일을 가진 요소는 동일한 클래스를 사용하여 일관성을 유지해야 합니다.

  • 재사용성:
    클래스 이름은 재사용 가능하도록 명확하게 정의해야 합니다. 다른 요소에서도 동일한 스타일이나 동작을 필요로 하는 경우, 해당 클래스를 재사용할 수 있도록 구성해야 합니다.

  • 스타일과 내용 분리:
    클래스 이름은 스타일을 정의하는 것이 아니라 요소의 역할을 나타내는 것이어야 합니다. 스타일은 CSS 파일에서 정의하고, 클래스 이름은 HTML 마크업에서 요소에 적용될 때 요소의 의미나 용도를 설명하는 역할을 해야 합니다.

  • 의존성 관리:
    클래스 선택자를 사용할 때는 요소의 구조나 계층에 의존하지 않도록 주의해야 합니다. 클래스 선택자는 요소의 역할이나 의미를 나타내는 데 사용되어야 하며, 요소의 위치나 계층에 의존해서는 안 됩니다.

  • 가독성과 유지보수성:
    클래스 선택자를 사용할 때는 코드의 가독성과 유지보수성을 고려해야 합니다. 의미 있는 클래스 이름을 선택하고, 일관성 있게 사용하여 코드를 관리하기 쉽도록 해야 합니다.

클래스 선택자 기본값

1
2
3

.class-name {
    /* 스타일 정의 */
}

  • 의 코드에서 .class-name은 선택자이고, {} 내에 있는 부분은 해당 클래스가 적용될 스타일을 정의하는 부분입니다.

  • 여기서 .class-name은 HTML 요소에 적용할 클래스의 이름을 나타냅니다. 클래스 이름은 점(.)으로 시작하며, 다음에는 클래스의 이름이 옵니다. 클래스 이름은 대소문자를 구분하며, 일반적으로는 소문자로 작성하는 것이 관례입니다.

  • 예를 들어, 클래스 이름이 “highlight”인 요소에 노란색 배경과 검은색 텍스트를 적용하는 CSS 코드는 다음과 같이 작성할 수 있습니다.

아이디 선택자 사용예시

1
2
3
4

<div id="header">
    <h1>Welcome</h1>
    <p>This is the header section.</p>
</div>
  • 위의 HTML 코드에서 첫 번째와 세 번째 <p> 요소는 클래스가 “highlight”이므로 CSS에서 정의한 스타일이 적용됩니다. 두 번째 <p> 요소는 클래스가 “highlight”가 아니므로 스타일이 적용되지 않습니다.
1
2
3
4

.highlight {
    background-color: yellow;
    color: black;
}
  • 클래스 선택자는 .(점)으로 시작하며, 클래스 이름이 선택자에 따라 옵니다. 예를 들어, 클래스 이름이 “highlight”인 요소를 선택하려면 다음과 같이 CSS를 작성할 수 있습니다.
  • 위의 CSS 코드는 클래스가 “highlight”인 요소를 선택하여 배경색을 노란색으로, 글자색을 검은색으로 설정합니다.

클래스 선택자는 웹 페이지의 여러 요소에 동일한 스타일을 적용하는 데 매우 유용합니다. 여러 요소를 그룹화하고 스타일을 일괄적으로 적용할 수 있어서 코드를 간결하고 효율적으로 관리할 수 있습니다.

HTML
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github