반응형
[ 선택자의 종류 ]
1. 태그 선택자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style media="screen"> li{ color : red; } </style> <title></title> </head> <body> <ul> <li>html</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html> | cs |
● <style>태그에 값을 준다면 아래 결과와 같이 <body>에 있는 모든 태그들이 적용된다.
2. 아이디 선택자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style media="screen"> /* id선택자 */ #select{ font-size: 10px } </style> </head> <body> <ul> <li>html</li> <li id="select">css</li> <li>javascript</li> </ul> </body> </html> | cs |
● id선택자는 하나 하나 구분을 짓기 위해서 사용한다.
● 한번 사용한 id선택자는 재활용하지 말아야한다.
● 기술 방법 : #선택자이름
3. 클래스 선택자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style media="screen"> /* class선택자 */ .deactive { text-decoration: line-through; } </style> </head> <body> <ul> <li class="deactive">html</li> <li>css</li> <li class="deactive">javascript</li> </ul> </body> </html> | cs |
● class선택자는 어떠한 대상을 관리하기 쉽도록 그룹화 하여 사용한다.
● 코드 전체에서 여러번 사용할 경우...
● 기술방법 : .선택자이름
반응형
'Web > HTML_JS_CSS' 카테고리의 다른 글
| [Javascript] Script 파일의 위치와 onload.. (0) | 2019.01.08 |
|---|---|
| [Javascript] Javascript 사용 방법 (0) | 2019.01.08 |
| [JS] 회원가입 유효성 검사 (1) | 2018.08.17 |
| [HTML] 회원가입 폼 만들기 (0) | 2018.08.17 |
| [HTML/JavaScript] 계산기 만들기 (0) | 2018.07.30 |