HTML Class | 클래스

• HTML class 속성은, HTML 요소에 대한 class를 지정하는 데 사용 된다.
• 여러 HTML 요소가 동일한 클래스를 공유할 수 있다.
• Class 속성은, style sheet에서 class 이름을 가리키는 데 사용 될 수 있고,
• 특정 class 이름을 가진 요소에 access하기 위해 Javascript 에서 사용 할 수도 있다.

​

• Class 이름은 대소문자를 구분한다.
• Class 속성은 어느 HTML 요소에서도 사용 가능하다.

• 이런식으로, style 에서 class 값을 city로 지정해주고
• <div> 요소에서 class 값을 city로 입력해주면, style 태그 안에 있는 class 인 city 값을 끌고 와 적용시켜 준다.
• <div> 는 해당 블록 전체를 꾸며줌.

​​

• Inline 요소인 <span> 요소에서도, class 속성을 이용할 수 있다.

• .note 라는 이름으로 style에 class를 지정해주고,
• 문서 안에서 <span> 태그를 이용해, class note를 끌어오면, 오른쪽 그림 화면처럼 스타일링이 적용된다.
• <span> 은 content가 있는 일부의 부분만 꾸며줌.

---

 

<Class 구문 만들기>

​

• Class 를 생성하려면, 마침표(.) 문자를 쓰고 그 뒤에 Class 이름을 적는다.
• 그런 다음, 중괄호 {} 안에 CSS 속성을 정의한다.

---

 

<Multiple Class>

​

• HTML 요소는 여러개의 Class 를 함께 사용 할 수도 있다.

​

• 아래 예제를 보면, style 에서 city 클래스와 main 클래스를 각각 지정해주고,
• <h2> 요소에서 city main 이라고 클래스 value 값을 주면,
• 2개의 클래스 모두에서 CSS 스타일을 가져오는 것을 확인할 수 있다. (우측그림, London 부분)

---

• 서로 다른 태그에서 1개의 class 값을 sharing 할 수도 있다.

---

 

<Java Script 에서의 Class 사용>

​

• 자바스크립트의 getElementsByClassName() method 를 사용해, 특정 class 이름을 가진 요소에 액세스 할 수 있다.

---