태그의 속성을 선택하여 CSS의 속성을 설정하는 법을 배워보겠습니다.
<코드>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <style> input { color:blue; font-size:30px; } input[type=text] { color:red; font-size:50px; } input[type=password] { color:green; font-size:10px; } </style> </head> <body> <input type="tel"/><br/><br/> <input type="text"/><br/><br/> <input type="password"/><br/><br/> </body> </html> | cs |
style 태그를 보면 3개의 설정이 되어있습니다. input , input[type = text ] , input[type=password]
input : input 태그에 디자인을 이렇게 하겠다.
input[type=text] : input 태그의 type 속성이 text 인 녀석은 디자인을 이렇게 하겠다.
input[type=password] : input 태그의 type 속성이 password 인 녀석은 디자인을 이렇게 하겠다.
참고로 CSS의 경우 순차적으로 스타일이 디자인이 됩니다.
input {}
input<type=text] {}가 있다면
먼저 input의 모든 태그는 css 속성이 바뀌고
다음 input<type=text] 인 태그의 속성이 바뀝니다.
<결과>
'프로그래밍 강의 > HTML 과 CSS' 카테고리의 다른 글
| [HTML/CSS] Chapter10. 동위선택자 CSS (0) | 2018.09.15 |
|---|---|
| [HTML/CSS] Chapter9. 후손 및 자손 선택자 CSS (0) | 2018.09.15 |
| [HTML/CSS] Chapter7. id(#) , class(.) 을 이용한 CSS (0) | 2018.09.15 |
| [HTML/CSS] Chapter6. 블록요소와 라인요소 (0) | 2018.09.14 |
| [HTML/CSS] Chapter5. Form 폼 태그!! (0) | 2018.09.14 |
