지난번 HTML의 기본을 알아봤습니다. 오늘은 HTML의 id, class를 간단하게 알아보려고 합니다.
티스토리에서 검사만 하더라도 id와, class를 쉽게 볼 수 있습니다. 뭔가 id, class란 이름만 보더라도 지칭하는 뜻 인걸 유추해볼 수 있습니다.
HTML의 id는 한 개만 가질 수 있는 고유한 값입니다. class의 경우는 반복적으로 사용할 수 있는 값이고요. 이걸 우리 일상생활에서 비유하자면 주민등록 번호 될 수 있습니다. 이 번호는 개인 별로 하나만 존재하는 값입니다. 중복될 수 없죠.
class의 경우는 이름을 들 수 있겠습니다. 지민몽은 저뿐만 아니라 다른 사람도 지민몽이라는 이름을 가질 수 있습니다. 이렇게 id와 class를 통해서 이름을 붙여주면 예를 들어 css에서 해당 id, class를 찾아서 스타일을 입혀줄 수 있게 됩니다.
<h1 class="h1_color">Title of a section1</h1>
<h1>Title of a section2</h1>헤더의 색을 보라색으로 설정하는 css 파일을 작성했습니다. 하지만 내가 추가적으로 원하는 부분의 h1 태그 색을 변경할고 싶을 때에 class 혹은 id를 사용해볼 수 있습니다. h1 태그입니다. 하나는 class 이름이 있고 하나는 없습니다.
.h1_color {
color: aquamarine;
}
h1 {
color: purple;
}
css에서 보면 .h1_clor가 클래스 이름이란 걸 알 수 있습니다. 전체 h1태그의 색은 purple이지만 클래스는 aquamarine이네요 html 문서를 열어 봅시다.
이렇게 둘 다 h1 태그이지만 클래스 이름이 있는 태그의 경우는 다른 스타일이 적용된 것을 볼 수 있습니다. 이렇게 우리는 각각의 태그에 이름을 부여해서 우리가 원하는 이름을 가진 태그들을 골라서 작업을 할 수 있게 됩니다.
html을 작성할 때에 고유한 element를 사용할 때에는 id를 적용 하고, 반면에 고유하지 않은, 계속 반복되는 element의 경우 class를 적용 해서 작성 하면 됩니다.
이 글을 공유합시다
