w3스쿨즈 HTML(7) - class, id

Class

기본 사용법은 설명이나 예제가 필요없이 보고도 이해 가능한거라 활용법을 소개합니다.

※note : class 속성은 모든 HTML 태그에서 사용할 수 있다.

※note : class 는 대소문자를 구분한다.

 

인라인 요소에서 클래스 속성 사용

span.note {
  font-size: 120%;
  color: red;
}

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

 

특정 클래스를 가진 요소 선택

CSS에서 특정 클래스를 가진 요소를 선택하려면 마침표 (.) 문자와 클래스 이름을 작성하세요.

<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

 

멀티 클래스(한번에 2개 이상의 클래스 쓰기)

HTML 요소는 둘 이상의 클래스 이름을 가질 수 있으며 각 클래스 이름은 공백으로 구분해야합니다.

<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}

.main {
  text-align: center;
}
</style>

<h2 class="city main">London</h2> // .city 와 .main의 스타일이 모두 적용된다.
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

 

다른 태그는 동일한 클래스를 공유할 수 있다.

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France.</p>

 

JavaScript에서 클래스 속성 사용

클래스 이름은 지정된 클래스 이름을 가진 요소에 대해 특정 작업을 수행하기 위해 JavaScript에서 사용될 수 있습니다. JavaScript는 getElementsByClassName () 메소드를 사용하여 지정된 클래스 이름을 가진 요소에 액세스 할 수 있습니다.

 

id

HTML id 속성은 HTML 요소의 고유 ID를 지정하는 데 사용됩니다. (id 값은 HTML 문서에서 중복될 수 없습니다.).

<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>

참고: id 속성은 모든 HTML 요소에서 사용할 수 있습니다.

참고: id 값은 대소 문자를 구분합니다.

참고: id 값은 하나 이상의 문자를 포함해야하며 공백 (공백, 탭 등)을 포함해서는 안됩니다.

 

클래스와 ID의 차이점

id는 단 한번만 쓰이고, class는 여러 번 쓰일 수 있다.

 

북마크 with ID

<p><a href="#C4">Jump to Chapter 4</a></p>
<h2 id="C4">Chapter 4</h2>

 

JavaScript에서 ID 속성 사용

javaScript는 getElementById () 메소드를 사용하여 지정된 ID를 가진 요소에 액세스 할 수 있습니다.