2018. 1. 15. 11:45ㆍ웹 표준 퍼블리싱 바이블
1. 기본 선택자 알아보기
1-1. 태그 산택지(타입 선택자)
문서의 html 태그를 선택자로 지정하는 방법입니다. 다음 코드는 문서의 <p>요소의 글자 색상을 "orange"색으로 지정한다는 의미입니다.
<style type="text/css"> p{color: orange;} </style>
|
1-2. 전체 선택자(공통 선택자)
css를 적용할 대상을 지정하는 방법 중에서 모든 요소를 지정할 수 있는 선택자가 있습니다. 다음 코드에서 "*" 선택자는 문서 내에 있는 요소인 body, h1, p, span, address, a 요소를 각각 선하는 것과 같습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> *{color: orange;} </style> </head> <body> <h1>앙큼한유채`s 일상 Story</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing exit. </p> <address> mail : <a href="mailto:yuchae@sample.com">sample.com</a> </address> </body> </html>
|
"*"선택자는 "selector *"와 같은 방법으로도 활용할 수 있습니다. 이것은 해당 선택자(요소) 안에 포함된 모든 요소를 선택하는 방법입니다.
※ 선택자에서 "띄어쓰기"는 해당 요소의 "자손(하위)"를 의미합니다.
1-3. 클래스 선택자
각 요소에 고유한 "이름"을 지정할 수 있습니다. "class" 속성을 통해 지정하는데 class로 지정했을 때에서 "."으로 클래스 명을 연결하고 같은 클래스 명을 여러 요소에 중복해서 적용할 수도 있으며 여러가지의 클래스 명을 한 요소에 지정하는 방법도 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> .lorem{color: orange;} </style> </head> <body> <h1>앙큼한유채`s 일상 Story</h1> <p> <span class="lorem">Lorem ipsum dolor sit amet</span>, consectetur adipisicing exit. </p> <address> mail : <a href="mailto:yuchae@sample.com">sample.com</a> </address> </body> </html>
|
1-4. 아이디 선택자
요소의 이름을 "id"로 지정할 경우에는 "#"으로 아이디 명을 연결합니다. 클래스 지정 방법과 달리 아이디 지정 방법에서는 같은 이름을 중복할 수 없을 뿐아니라, 하나의 요소에 여려 개의 아이디 명을 동시에 적용하는 방법도 불가피합니다.
※ "아이디 명"이나 "클래스 명"을 작성할 때에는 그 값이 숫자로 시작하면 안되며, 띄어쓰기나 특수문자도 피하는 것이 좋습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> #lorem{color: orange;} </style> </head> <body> <h1>앙큼한유채`s 일상 Story</h1> <p> <span id="lorem">Lorem ipsum dolor sit amet</span>, consectetur adipisicing exit. </p> <address> mail : <a href="mailto:yuchae@sample.com">sample.com</a> </address> </body> </html>
|
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 4-2. 다양한 선택자 알아보기 - 3 (0) | 2018.01.17 |
|---|---|
| 4-2. 다양한 선택자 알아보기 - 2 (0) | 2018.01.16 |
| 4-1. CSS의 적용 방법과 기본문법 - 3 (0) | 2018.01.12 |
| 4-1. CSS의 적용 방법과 기본문법 - 2 (0) | 2018.01.11 |
| 4-1. CSS의 적용 방법과 기본문법 - 1 (1) | 2018.01.08 |