Html에서 ID와 CLASS 대해 알아보자
Html에서 ID와 CLASS 대해 알아보자
ID와 CLASS는 HTML 요소에 고유한 식별자를 부여하여 스타일이나 스크립트에서 해당 요소를 선택하고 조작하는 데 사용되는 속성입니다.
- ID(IDentifier):
- ID는 HTML 문서 내에서 고유한 식별자로 사용됩니다. 즉, 한 문서 내에서 같은 ID를 가진 요소는 하나만 존재해야 합니다.
- ID는
id속성을 사용하여 요소에 부여됩니다. 예를 들어,<div id="header">...</div>와 같이 사용합니다. - ID 선택자(
#)를 사용하여 특정 ID를 가진 요소를 선택할 수 있습니다. 예를 들어,#header { color: blue; }는id="header"를 가진 요소를 선택하여 글자 색상을 파란색으로 지정합니다. - ID는 주로 JavaScript에서 특정 요소를 동적으로 조작하기 위해 사용됩니다.
- CLASS:
- CLASS는 하나의 HTML 문서 내에서 여러 요소에 동일한 식별자를 부여할 수 있습니다. 즉, 한 문서 내에서 같은 CLASS를 가진 여러 요소가 존재할 수 있습니다.
- CLASS는
class속성을 사용하여 요소에 부여됩니다. 예를 들어,<p class="highlight">...</p>와 같이 사용합니다. - CLASS 선택자(
.)를 사용하여 특정 CLASS를 가진 요소를 선택할 수 있습니다. 예를 들어,.highlight { background-color: yellow; }는class="highlight"를 가진 요소를 선택하여 배경색을 노란색으로 지정합니다. - CLASS는 주로 CSS에서 스타일을 일괄적으로 적용하거나 JavaScript에서 여러 요소를 선택하여 동시에 조작할 때 사용됩니다.
ID와 CLASS는 각각 다음과 같은 특징을 가지고 있습니다:
- ID는 고유한 식별자로 사용되므로 한 문서 내에서 유일해야 합니다. 주로 한 번만 사용되는 요소에 부여됩니다.
- CLASS는 여러 요소에 동일한 식별자로 사용되며, 한 문서 내에서 중복해서 사용할 수 있습니다. 주로 일괄적으로 스타일을 적용하거나 여러 요소를 선택하여 동시에 조작할 때 사용됩니다.
HTML 요소에 ID와 CLASS를 적절히 활용하면 스타일링이나 스크립트에서 원하는 요소를 정확하게 선택하여 조작할 수 있습니다.
나름 정리하자면, 선택자 id와 class 태그는 html, css, javascript 에 사용되며, html 상에서는 코딩된 텍스트의 속성을 정의해 줍니다.
id 에 대한 정리
id 속성은 페이지에 있는 해당 요소를 유일하게 식별할때 사용되며, 같은 페이지 상의 id로 정의 되는 것은 한번 사용됩니다. class 와 달리 여러번 중첩해서 선언할 수 없습니다. 프로젝트를 진행할 경우 id 이름을 최대한 직관적이고 간단 명료하게 지어 주는것이 중요합니다. 이는 추후 수정 또는 다른 작업자가 이어서 작업할수 있도록 편의를 돕기 위함입니다.
class 에 대한 정리
class 속성은 id 속성과 동일하게 html 코딩상의 요소를 식별할 떄 사용되며, id 속성과는 달리 한페이내의 한 요소에 여러개를 중첩하여 사용할 수 있습니다. class는 id와 동일하게 이름을 정의할 때 직관적이고 간단 명료하게 적어 주는것이 중요합니다.
