① class 속성은 스타일 시트에서 클래스 이름을 가리키기 위해서 사용한다.
㉠ 또한 자바스크립트가 구체적인 클래스 이름으로 요소를 제어하고 접근할 수 있게 해준다.
㉡ class 이름을 지정하면 이름을 통해 같은 이름을 가진 여러 개의 요소의 스타일을 제어할 수 있다.
ⓐ 클래스와 아이디로 쓸 수 있는 이름에는 규칙이 있다.
★ 첫 글자는 알파벳으로 시작해야 한다.
★ 두 번째부터는 알파벳과 숫자 그리고 하이픈(-) 또는 언더바(_)가 사용될 수 이다.
★ 대소문자를 구분한다.
★ 띄어쓰기를 사용할 시 구분되는 클래스로 인식하기 때문에 한 개의 클래스의 이름일 경우 하이픈이나 언더바 등을 이용해 띄어쓰기를 대체해줘야한다.
㉢ 클래스를 만들기 위해서 마침표를 작성해고 그 다음 클래스의 이름을 작성한다. 그리고 CSS 속성을 중괄호 안에 적어주면 된다.
| .클래스이름 {CSS속성} |
ⓐ 4개의 <h1> 요소가 있고, "wooden"을 값으로 갖고 있는 클래스는 2개이다. 이 두 개의 <h1> 요소만 스타일이 적용되었음을 알 수 있다.
| <head> | |
| <style> | |
| .wooden {color: brown;} | |
| </style> | |
| </head> | |
| <body> | |
| <h1 class="wooden"> | |
| I'm groot | |
| </h1> | |
| <h1> | |
| I'm not groot | |
| </h1> | |
| <h1 class="wooden"> | |
| How about me? | |
| </h1> | |
| <h1> | |
| You're groot, too | |
| </h1> | |
| </body> |
I'm groot
I'm not groot
How about me?
You're groot, too
② 한 종류의 HTML 요소는 하나 이상의 클래스에 속해 있을 수 있다.
㉠ 이들을 구분하기 위해 클래스의 이름을 다르게 해주면 된다.
㉡ <h1>요소가 iron 클래스와 groot 클래스에 속해 있음을 알 수 있다.
| <head> | |
| <style> | |
| .iron {color : gray} | |
| .groot {color: brown;} | |
| </style> | |
| </head> | |
| <body> | |
| <h1 class="iron"> | |
| I'm Iron man. | |
| </h1> | |
| <h1 class="groot"> | |
| I'm groot | |
| </h1> | |
| </body> |
I'm Iron man.
I'm groot
③ 다른 종류의 HTML 요소가 같은 클래스를 공유할 수 있다.
㉠ hulk 클래스를 공유하고 있는 것은 <h1> 요소와 <p> 요소이므로 같은 스타일이 적용되었다.
| <head> | |
| <style> | |
| .hulk {color : green} | |
| </style> | |
| </head> | |
| <body> | |
| <h1 class="hulk"> | |
| hulk | |
| </h1> | |
| <p class="hulk"> | |
| hulk | |
| </p> | |
| </body> |
hulk
hulk
㉡ .앞에 요소 이름을 붙여서 특정 요소만을 지정할 경우, 해당하는 요소에만 스타일이 적용된다.
④ 한 요소가 한 개 이상의 클래스 이름을 가질 수 있다.
| <head> | |
| <style> | |
| h1.superman {color: red} | |
| p.superman {color : blue} | |
| </style> | |
| </head> | |
| <body> | |
| <h1 class="superman"> | |
| red | |
| </h1> | |
| <p class="superman"> | |
| blue | |
| </p> | |
| </body> |
red
blue
㉠ 단, 같은 종류의 CSS 속성을 공유할 경우 뒤에 있는 클래스에게 우선순위가 있다.
㉡ 다른 종류의 CSS 속성을 지닐 경우 전부 적용된다.
| <head> | |
| <style> | |
| .orange {color: orange} | |
| .fruit {color: white; background-color: navy;} | |
| </style> | |
| </head> | |
| <body> | |
| <h1 class="orange fruit"> | |
| 오렌지를 먹은 지 얼마나 오랜지 | |
| </h1> | |
| </body> |
오렌지를 먹은 지 얼마나 오랜지
'All about WEB > All about HTML' 카테고리의 다른 글
| 20. HTML div와 span 요소 (0) | 2021.07.18 |
|---|---|
| 19. HTML ID (0) | 2021.07.18 |
| 17. HTML 테이블(Tables) (0) | 2021.07.18 |
| 17. HTML 리스트(Lists) (0) | 2021.07.18 |
| 16. HTML 이미지(Images) (0) | 2021.07.18 |
