18. HTML 클래스(Class)

① class 속성은 스타일 시트에서 클래스 이름을 가리키기 위해서 사용한다.

  ㉠ 또한 자바스크립트가 구체적인 클래스 이름으로 요소를 제어하고 접근할 수 있게 해준다.

  ㉡ class 이름을 지정하면 이름을 통해 같은 이름을 가진 여러 개의 요소의 스타일을 제어할 수 있다.

    ⓐ 클래스와 아이디로 쓸 수 있는 이름에는 규칙이 있다.

  ★ 첫 글자는 알파벳으로 시작해야 한다.

  ★ 두 번째부터는 알파벳과 숫자 그리고 하이픈(-) 또는 언더바(_)가 사용될 수 이다.

  ★ 대소문자를 구분한다.

  ★ 띄어쓰기를 사용할 시 구분되는 클래스로 인식하기 때문에 한 개의 클래스의 이름일 경우 하이픈이나 언더바 등을 이용해 띄어쓰기를 대체해줘야한다.

  ㉢ 클래스를 만들기 위해서 마침표를 작성해고 그 다음 클래스의 이름을 작성한다. 그리고 CSS 속성을 중괄호 안에 적어주면 된다.

 

    ⓐ 4개의 <h1> 요소가 있고, "wooden"을 값으로 갖고 있는 클래스는 2개이다. 이 두 개의 <h1> 요소만 스타일이 적용되었음을 알 수 있다.

 

I'm groot

I'm not groot

How about me?

You're groot, too

 

② 한 종류의 HTML 요소는 하나 이상의 클래스에 속해 있을 수 있다.

  ㉠ 이들을 구분하기 위해 클래스의 이름을 다르게 해주면 된다.

  ㉡ <h1>요소가 iron 클래스와 groot 클래스에 속해 있음을 알 수 있다.

 

I'm Iron man.

I'm groot

 

③ 다른 종류의 HTML 요소가 같은 클래스를 공유할 수 있다.

  ㉠ hulk 클래스를 공유하고 있는 것은 <h1> 요소와 <p> 요소이므로 같은 스타일이 적용되었다.

 

hulk

hulk

 

  ㉡ .앞에 요소 이름을 붙여서 특정 요소만을 지정할 경우, 해당하는 요소에만 스타일이 적용된다.

④ 한 요소가 한 개 이상의 클래스 이름을 가질 수 있다.

 

red

blue

 

 ㉠ 단, 같은 종류의 CSS 속성을 공유할 경우 뒤에 있는 클래스에게 우선순위가 있다.

 ㉡ 다른 종류의 CSS 속성을 지닐 경우 전부 적용된다.

 

오렌지를 먹은 지 얼마나 오랜지