CSS는 상속을 통해 부모 요소의 속성을 자식 요소에게 상속시킬 수 있다.
다만 모든 속성이 적용되는 것이 아니라 일부 속성만이 상속 가능하다.
상속 가능한 속성 : color, font-size, font-family, line-height, text-align 등
-> Text 가능한 속성류
상속 불가능 속성 : width, height, margin, padding, border 등
-> Box Model, Position 관련
예시 : 여기서 parent와 child는 객체 이름이 아니라 클래스 선택자 이름이다.
.parent {
font-size: 16px;
}
.child {
/* 부모 요소로부터 font-size 속성 상속 */
/* child 요소의 font-size는 16px */
}
--------------------
<div class="parent">
<p class="child">Hello, world!</p>
</div>
CSS 선택자는 HTML 문서의 요소를 선택하여 스타일을 적용할 수 있도록 하는 패턴이다.
선택자는 HTML 요소의 태그 이름, 클래스, ID 등의 속성을 기반으로 하며, 선택자를 사용하여 특정 HTML 요소를 선택하고, 그 요소에 대한 스타일 규칙을 정의할 수 있다.
선택자의 종류는 다양하며, 이러한 선택자를 일반 선택자 / 복합 선택자 / 가상 클래스 선택자로 나누어 볼 수 있다.
HTML 요소의 태그 이름, 클래스, ID 등을 기반으로 요소를 선택하는 선택자
모든 HTML 요소를 선택하는 선택자, * 기호를 사용하여 표현
잘 사용하지 않으며, 우선순위가 낮다.
ex: HTML 문서 내에 존재하는 모든 요소에 대해 margin과 padding 속성을 0으로 설정
*{
margin: 0;
padding: 0;
}
특정 타입의 요소를 선택하는 선택자.
타입 선택자는 HTML 요소의 태그 이름과 동일한 이름으로 표현.
<input> 요소를 선택하고, 해당 요소에 width: 200px;와 height: 30px; 속성을 적용
input {
width: 200px;
height: 30px;
}
<button> 요소를 선택하고, 해당 요소에 background-color: blue;와 color: white; 속성을 적용
button {
background-color: blue;
color: white;
}
HTML 요소의 태그 이름으로 조건을 선택한다.
예를 들어, p 태그 선택자는 HTML 문서의 모든 p 요소를 선택한다.
모든 <p> 태그를 선택하고, 해당 태그에 빨간색을 적용
p {
color: red;
}
특정 클래스를 가진 요소를 선택하는 선택자.
클래스 선택자는 .클래스이름 형태로 표현된다. 예를 들어, .my-class 클래스 선택자는 class="my-class" 속성을 갖는 모든 요소를 선택한다.
.box {
border: 1px solid red;
background-color: yellow;
}
<div class="box"></div>
<div class="box"></div>
<div class="box red"></div>
<div class="box blue"></div>
-------------------------------
=> 만약 이런 상태라면 box class에는 적용되지만,"box red"와 "box blue"에는 적용되지 않는다.
ID 선택자는 특정 ID 속성 값을 가진 요소를 선택.
속성 값은 문서 내에서 유일해야 하며, # 문자와 함께 ID 값으로 표시된다.
#my-element {
/* 스타일 규칙 */
}
<div id="my-element">
<!-- 내용 -->
</div>
HTML 요소의 속성으로 선택한다.
예를 들어, [href] 속성 선택자는 href 속성을 갖는 모든 요소를 선택하게 된다.
a[href] {
/* 스타일 규칙 */ "href"라는 속성을 가진 a 요소를 선택
}
<a href="https://www.example.com">링크</a>
그 외에도 다음과 같은 대표적인 선택자의 예시가 있다.
[A~=V]는 속성 값이 V단어(space로 구분)를 포함하는 엘리먼트 선택
[A*=V]는 속성 값이 V를 포함하는 엘리먼트를 선택. (V는 단어가 아니어도 됨)
[A|=V]는 속성 값이 V와 정확히 일치하거나, V 뒤에 Hyphen(-)이 붙은 엘리먼트를 선택
[A$=V]는 속성 값이 V로 끝나는 엘리먼트를 선택
두 개 이상의 선택자를 조합하여 요소를 선택하는 선택자
"부모 요소 하위의 자식 요소"를 선택하는 데 사용된다.
<div>
<h2>제목</h2>
<p>본문</p>
</div>
Q. 만약 div의 자식 코드인 제목과 본문을 선택하려면? <style> 내부에 다음과 같이 적용
div h2 {
/* div 요소의 하위에 있는 h2 요소를 선택 */
/* h2 요소에 대한 스타일을 지정 */
}
div p {
/* div 요소의 하위에 있는 p 요소를 선택 */
/* p 요소에 대한 스타일을 지정 */
}
Q. 만약 다중 하위 요소라면?
div > div > h2 {
/* 첫 번째 div 요소의 하위에 있는 두 번째 div 요소의 하위에 있는 h2 요소를 선택 */
/* h2 요소에 대한 스타일을 지정 */
}
CSS에서 부모 요소와 그 자손 요소 중 모든 요소를 선택하는 선택자.
자식 선택자와 유사해 보이지만, 자식 선택자는 직계 자식만 해당된다.
자손 선택자는 부모 요소와 그 자손 요소를 나타내는 두 개의 선택자를 조합하여 작성되며, 이때 두 선택자는 공백으로 구분된다.
<div class="container">
<h1>제목</h1>
<p>본문</p>
</div>
Q "container"라는 클래스를 가진 div 요소의 자손인 모든 p 요소를 선택하고 싶다.
.container p {
/* 스타일 규칙 */
}
----------------------
Q. 복잡한 내부 구조에서는 어떨까?
<div class="container">
<ul>
<li>
<a href="#">링크1</a>
</li>
<li>
<a href="#">링크2</a>
</li>
</ul>
</div>
.container a {
/* 스타일 규칙 */
}
A. "container" 클래스를 가진 div 요소의 자손인 모든 a 요소를 선택할 수 있다.
자손 선택자와 유사하지만, "부모 요소의 직계 자식 요소"를 선택하는 데 사용된다.
">" 기호를 사용한다.
<div class="container">
<h1>제목</h1>
<p>본문</p>
</div>
.container > h1 {
/* 스타일 규칙 */
}
Q. 복잡한 구조에서는 어떨까? a 요소를 선택하고 싶다.
<div class="container">
<ul>
<li>
<a href="#">링크1</a>
</li>
<li>
<a href="#">링크2</a>
</li>
</ul>
</div>
.container > ul > li > a {
/* 스타일 규칙 */
}
자식, 자손 선택자는 부모-자식 관계를 선택했다면 인접 형제 선택자는 바로 뒤의 요소를 선택한다. "+" 기호를 사용한다.
<h2>제목1</h2>
<p>본문1</p>
<h2>제목2</h2>
<p>본문2</p>
Q. 제목1 다음의 본문1을 선택하고 싶다.
h2 + p {
/* 스타일 규칙 */
}
중요 : 인접 형제 선택자는 형제 요소 중에서 바로 뒤에 있는 요소만을 선택하기 때문에,
선택한 요소가 여러 개일 경우에는 전부 적용되지 않고 해당되는 인접 요소만이 적용된다.
같은 부모 요소를 공유하는 형제 요소 중에서 지정된 요소를 선택하는 데 사용된다.
인접 선택자와 달리 같은 부모를 공유하는 것들 중 특정 요소를 선택한다. "~" 기호를 사용한다.
<div>
<p>첫 번째 단락</p>
<p>두 번째 단락</p>
<p>세 번째 단락</p>
<span>이것은 span 요소입니다.</span>
<p>네 번째 단락</p>
</div>
Q. span 요소 뒤에 오는 모든 p 요소를 선택
span ~ p {
color: blue;
}
Q. span 요소 앞에 있는 모든 요소는?
A. 할 수 없다. 다만 다른 선택자를 사용할 수는 있다.
: 하위 선택자 + 전체 선택자 사용 예시
span:first-child ~ * {
color: blue;
}
해설 : span 요소의 첫 번째 형제 요소부터 그 다음 형제 요소까지 선택한다.
*는 모든 요소를 의미한다. 따라서, 첫 번째, 두 번째, 세 번째 p 요소가 선택된다.
가상 클래스 선택자는 특정 요소가 특정 상태에 있을 때 스타일을 적용하는 방법이다.
":" 기호를 사용한다.
이러한 상태는 링크를 방문했을 때, 마우스를 올려놓았을 때 등 여러 가지가 존재한다.
a:hover {
color: red;
text-decoration: underline;
}
해석 : 링크 요소(<a>)에 마우스가 올라갔을 때(:hover),
글자 색상을 빨간색으로(color: red;) 변경하고, 밑줄을 추가(text-decoration: underline;)한다.
그 외에도 수많은 선택자들이 존재한다. 대표적으로 쓰이는 선택자들은 다음과 같다.
링크 상태 가상 클래스: :link, :visited
마우스 오버 가상 클래스: :hover
포커스 가상 클래스: :focus
활성 상태 가상 클래스: :active
첫 번째 자식 요소 가상 클래스: :first-child
마지막 자식 요소 가상 클래스: :last-child
n번째 자식 요소 가상 클래스: :nth-child(n), :nth-of-type(n) 등
이외에 같은 순위일 경우 먼저 적용된 스타일이 우선된다. 또는 특정적으로 명시한 요소의 경우 우선 순위에 영향을 준다.
#id .class div {
color: red;
}
예를 들어, 해당 구문에서는 ID 선택자(#id), 클래스 선택자(.class), 태그 선택자(div)가 존재한다.