18.HTML Classes

 

 

 

 

Class 속성 사용

---

HTML 클래스 속성은 클래스 이름이 동일한 요소에 동일한 스타일을 정의하는 데 사용됩니다. 따라서 동일한 클래스 속성을 가진 모든 HTML 요소는 동일한 스타일을 갖습니다.

아래 예제는 동일한 클래스 이름을 가리키는 세 개의 <div> 요소가 있습니다.

See the Pen 01.Using The class Attribute by heunho (@heunho) on CodePen.

 

 

 

 

Inline 요소에서 Class 속성 사용

---

HTML 클래스 속성은 Inline 요소에도 사용할 수 있습니다.

See the Pen 02.Using The class Attribute on Inline Elements by heunho (@heunho) on CodePen.

팁 : class 속성은 모든 HTML 요소에서 사용할 수 있습니다. 참고 : 클래스 이름은 대소 문자를 구분합니다! 참고 : 나중에 CSS 강의에서 더 자세히 배울 수 있습니다.

 

 

 

 

특정 클래스를 가지고 있는 요소 선택

---

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

See the Pen 03.Select Elements With a Specific Class by heunho (@heunho) on CodePen.

 

 

 

 

여러 클래스 사용

---

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

클래스 이름이 "city"인 스타일 요소와 클래스 이름이 "main"인 스타일 요소를 잘 보세요.

See the Pen 04.Multiple Classes by heunho (@heunho) on CodePen.

위 예제에서 첫 번째 <h2> 요소는 "city"클래스와 "main"클래스 모두 속해있습니다.

 

 

 

 

태그가 달라도 동일한 클래스를 공유할 수 있습니다

---

<h2> 및 <p>와 같이 서로 다른 태그여도 동일한 클래스 이름을 가질 수 있습니다.

즉, 동일한 스타일을 공유 할 수 있습니다.

See the Pen 05.Different Tags Can Share Same Class by heunho (@heunho) on CodePen.

 

 

 

 

JavaScript에서 클래스 속성 사용

---

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

 

해당 예제에서는 사용자가 버튼을 클릭하면 클래스 이름이 "city"인 모든 요소를 숨 깁니다.

See the Pen 06.Using The class Attribute in JavaScript by heunho (@heunho) on CodePen.

위 예제의 코드를 이해하지 못해도 걱정할 필요 없습니다. HTML JavaScript 강의에서 JavaScript에 대해 자세히 알아보고 더 공부할 수 있습니다.

 

 

 

 

 

---

틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.

질문도 올려주시면 아는 선에서 답변해드리겠습니다.

---

대부분의 내용의 저작권은 w3schools에 있습니다.

HTML Classes