선택자
복잡하고 다양한 요소들 사이에서 내가 원하는 요소만 선택하도록 도움
< 그룹화 Grouping >
1. 선택자
h1, h2, h3, h4, h5, h6 { color: yellow; }
2. 전체 선택자
* { color: yellow; }
3. 선언
h1 { color: yellow; font-size: 2em; background-color: gray; }
4. 선택자 & 선언 >
h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }
요소 선택자
가장 기본인 선택자 (=태그 선택자)
h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }
class 선택자
요소에 구애받지 않고 스타일 규칙 적용 가능
( css )
.foo { font=size= 30px; } // 속성값을 선택자로 지정 ( <head>-<style> 내부 )
.bar { color: blue; } // 다중 class 가능
( html )
<p class = "foo bar">....</p> // class의 속성값 넣기
Quize 1. ) "HTML" 글자는 보라색, "CSS" 글자는 밑줄을 표시하려면?
Quize 2. ) 추가로 "JS" 글자에 보라색 + 밑줄을 표시하려면?
id 선택자
문서 내에서 유일해야 함 ➔ 적용 가능 요소가 단 하나뿐
( css )
#bar { color: blue; }
( html )
<p id = "bar">....</p>
선택자의 조합
1. 요소 + class
p.bar { ... } // <p>이면서 class 속성에 bar 존재
2. 다중 class
.foo.bar { ... } // class 속성에 foo, bar 존재
3. id + class
#foo.bar { ... } // id가 foo이면서 class 속성에 bar 존재
속성 선택자
대괄호를 이용해 속성 선택자 선언
1. 단순 속성으로 선택
: 속성의 이름으로 요소 선택
( css )
p[class] { color: silver; } // <p>이면서 class 속성 존재 요소일 때
p[class][id] { text-decoration: underline; } // <p>이면서 class 속성, id 속성 존재 요소일 때
( html )
<p class="foo">Hello</p> // 은색
<p class="bar">CSS</p> // 은색
<p class="baz" id="title">HTML</p> // 은색 & 밑줄
2. 정확한 속성값으로 선택
: 속성의 값으로 요소 선택
( css )
p[class="foo"] { color: silver; } // <p>이면서 class 속성값이 foo일 때
p[id="title"] { text-decoration: underline; } // <p>이면서 id 속성값이 title일 때
( html )
<p class="foo">Hello</p> // 은색
<p class="bar">CSS</p> // 변화 X
<p class="baz" id="title">HTML</p> // 밑줄
3. 부분 속성값으로 선택
: 속성 이름과 속성값 사이의 기호에따라 다름
- [class ~= "bar"] : class 속성의 값이 "bar" 공백으로 구분한 단어가 포함되는 요소 선택
- [class ^= "bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
- [class $= "bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
- [class *= "bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
( css )
p[class~="color"] { font-style: italic; } // 단어
p[class^="color"] { font-style: italic; } // 시작
p[class$="color"] { font-style: italic; } // 끝
p[class*="color"] { font-style: italic; } // 문자
( html )
<p class="color hot">red</p> // ~ (단어), ^ (시작), * (문자)
<p class="cool color">blue</p> // ~ (단어), $ (끝), * (문자)
<p class="colorful nature">rainbow</p> // ^ (시작), * (문자)
문서 구조의 이해
<html>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
</div>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>
부모와 자식
- <body>의 부모 요소: <html> ↔ <html>의 자식 요소: <body>
- <div>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
- <p>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
- <h1>의 부모 요소: <div> ↔ <div>의 자식 요소: <h1>
- <span>의 부모 요소: <h1> ↔ <h1>의 자식 요소: <span>
조상과 자손
조상 요소 : 부모를 포함한 상위 요소들
- <body>의 조상 요소: <html> ↔ <html>의 자손 요소: <body>, <div>, <h1>, <span>, <p>
- <div>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>
- <h1>의 조상 요소: <html>, <body>, <div> ↔ <div>의 자손 요소: <h1>, <span>
- <span>의 조상 요소: <html>, <body>, <div>, <h1> ↔ <h1>의 자손 요소: <span>
- <p>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>
형제
: 같은 부모를 가지고 있는 요소들
- <div>, <p> = (인접한) 형제 요소
문서 구조 관련 선택자
< 자손 선택자 >
선택자 사이에 아무 기호 없이 그냥 공백으로 구분
div span { color: red; } // <div>의 자손 요소인 <span>을 선택하는 선택자
< 자식 선택자 >
선택자 사이에 꺽쇠(>) 기호로 구분
div > h1 { color: red; } // <div>의 자식 요소인 <h1>을 선택하는 선택자
< 인접 선택자 >
선택자 사이에 더하기(+) 기호로 구분
div + p { color: red; } // <div>의 형제이면서 인접한 요소인 <p>을 선택하는 선택자
Quize 1. ) <body>의 자식인, <div>의 자손인, <table> 바로 뒤에 인접한, <ul>요소 선택은?
body > div table + ul { .... }
'HTML & CSS > html & css 입문' 카테고리의 다른 글
| [부스트코스 강의] 4. (1) CSS ( 문법 / 구성 요소 / 문서 연결법 ) (0) | 2023.11.26 |
|---|---|
| [부스트코스 강의] 3. (3) 블록 레벨 / 인라인 레벨 (0) | 2023.11.26 |
| [부스트코스 강의] 3. (2) 시멘틱 마크업 (0) | 2023.11.26 |
| [부스트코스 강의] 3. (1) 콘텐츠 모델 (0) | 2023.11.26 |
| [부스트코스 강의] 2. (3) HTML 태그 ( 폼 요소 ) (0) | 2023.11.26 |