비전공자를 위한 HTML/CSS 강의 공부 기록입니다.
선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 한다.
h1 { color: yellow; }
요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어가며 문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용된다.
h1, h2, div, span { color: yellow; font-size: 20px; }
선택자는 쉼표를 이용해서 그룹화를 할 수 있으며 선언들도 그룹화가 가능하다.
* { color: yellow; font-size: 20px; }
*(별표, asterisk) 기호로 문서 내에 모든 요소를 선택할 수 있지만 성능에 좋지 않으므로 되도록 사용을 지양해야 한다.
요소마다 다른 스타일 규칙을 적용하고 싶을 때 사용한다.
class 선택자를 사용하기 위해서는 HTML을 수정해 class 속성을 추가해야 한다.
선택자를 쓸 때는 .(마침표) 클래스 속성을 쓴다.
<style>
.html { color: purple; }
.css { text-decoration: underline; }
</style>
<dl>
<dt class="html">HTML</dt>
<dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
<dt class="css">CSS</dt>
<dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>
위와 같은 코드로 "HTML"이라는 문자에는 보라색 글자를 지정하고, "CSS"라는 문자에는 밑줄을 선언할 수 있다.
하나의 요소가 여러 개의 class 속성을 가질 수도 있다.
<style>
.java { color: purple; }
.script { text-decoration: underline; }
</style>
<dl>
<dt class="java script">JavaScript</dt>
<dd><span class="java script">JavaScript</span>객체 기반의 스크립트 프로그래밍 언어입니다..</dd>
다중 class는 공백으로 구분한다.
위와 같은 코드로 "JavaScript"라는 문자에는 보라색 글자와 밑줄이라는 스타일 규칙이 모두 선언된다.
class 선택자와 비슷하다.
선택자를 쓸 때는 .(마침표) 대신 #(해시)를 쓰고 id 속성 값을 쓴다.
sky { background-color: powderblue; }
가장 큰 차이점은 class와 달리 id는 문서 내에서 유일해야 한다는 것이다.
클래스 선택자는 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 할 수 있으며 그것이 클래스 선택자의 장점이기도 하지만 id 속성값은 문서 내에 유일하게 사용이 되어야 힌다.
id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐이다.
선택자는 종류에 상관없이 여러 가지 선택자들을 조합하여 사용할 수 있다. 다중 class도 선택자의 조합 중 하나라고 할 수 있다.
선택자가 모두 존재하는 태그에 스타일 규칙이 적용된다.
dt.html { background-color: powderblue; }
요소와 class의 조합
태그가 <dt>
이면서 class에 html이 있어야 적용된다.
.html.css { background-color: powderblue; }
다중 class
class 속성에 html과 css가 모두 있어야 적용된다.
#sky.html { background-color: powderblue; }
id와 class의 조합
id가 sky이면서 class에 html이 있어야 적용된다.
속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어간다.
요소에 해당 이름의 속성이 있다면 해당 사항이 적용된다.
p[class] { color: red; }
p[class][id] { text-decoration: underline; }
<p class="hello">Hello</p>
<p class="css">CSS</p>
<p class="html" id="title">HTML</p>
Hello
CSS
Hello
속성 선택자에 속성의 값 없이 속성 이름만 있는 경우 속성의 값과 상관 없이 속성이 존재하면 스타일 규칙이 적용된다.
따라서 마지막 <p>
태그에는 두 스타일 규칙이 모두 적용된다.
선택자로 대괄호 안에 속성 이름과 속성 값을 모두 적으면 속성의 값으로 스타일 규칙이 적용될 요소를 지정할 수 있다.
p[class="css"] { color: red; }
p[id="title"] { text-decoration: underline; }
<p class="hello">Hello</p>
<p class="css">CSS</p>
<p class="html" id="title">HTML</p>
Hello
CSS
Hello
p[class="css"]
는 2번째 p
태그에만 p[id="title"]
3번째 p
태그에만 적용된다.
[class~="color"]
: class 속성의 값이 공백으로 구분한 "color" 단어가 포함되는 요소 선택
[class^="color"]
: class 속성의 값이 "color"로 시작하는 요소 선택
[class$="color"]
: class 속성의 값이 "color"로 끝나는 요소 선택
[class*="color"]
: class 속성의 값이 "color" 문자가 포함되는 요소 선택
예시
p[class~="color"] { color: red; }
p[class^="color"] { font-size: 30px; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { background-color: powderblue; }
<p class="color hot">big red</p>
<p class="cool color">small red</p>
<p class="colorful nature">reddish big</p>