CSS 상속
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 선택자
CSS 선택자는 HTML 문서의 요소를 선택하여 스타일을 적용할 수 있도록 하는 패턴이다.
선택자는 HTML 요소의 태그 이름, 클래스, ID 등의 속성을 기반으로 하며, 선택자를 사용하여 특정 HTML 요소를 선택하고, 그 요소에 대한 스타일 규칙을 정의할 수 있다.
선택자의 종류는 다양하며, 이러한 선택자를 일반 선택자 / 복합 선택자 / 가상 클래스 선택자로 나누어 볼 수 있다.
일반 선택자
HTML 요소의 태그 이름, 클래스, ID 등을 기반으로 요소를 선택하는 선택자
1. 전체 선택자(universal selector) :
모든 HTML 요소를 선택하는 선택자, * 기호를 사용하여 표현
잘 사용하지 않으며, 우선순위가 낮다.
ex: HTML 문서 내에 존재하는 모든 요소에 대해 margin과 padding 속성을 0으로 설정
*{
margin: 0;
padding: 0;
}2. 타입 선택자(type selector) :
특정 타입의 요소를 선택하는 선택자.
타입 선택자는 HTML 요소의 태그 이름과 동일한 이름으로 표현.
<input> 요소를 선택하고, 해당 요소에 width: 200px;와 height: 30px; 속성을 적용
input {
width: 200px;
height: 30px;
}
<button> 요소를 선택하고, 해당 요소에 background-color: blue;와 color: white; 속성을 적용
button {
background-color: blue;
color: white;
}3. 태그 선택자(tag selector) :
HTML 요소의 태그 이름으로 조건을 선택한다.
예를 들어, p 태그 선택자는 HTML 문서의 모든 p 요소를 선택한다.
모든 <p> 태그를 선택하고, 해당 태그에 빨간색을 적용
p {
color: red;
}4. 클래스 선택자(class selector):
특정 클래스를 가진 요소를 선택하는 선택자.
클래스 선택자는 .클래스이름 형태로 표현된다. 예를 들어, .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"에는 적용되지 않는다.5. ID 선택자(id selector):
ID 선택자는 특정 ID 속성 값을 가진 요소를 선택.
속성 값은 문서 내에서 유일해야 하며, # 문자와 함께 ID 값으로 표시된다.
#my-element {
/* 스타일 규칙 */
}
<div id="my-element">
<!-- 내용 -->
</div>6. 속성 선택자:
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로 끝나는 엘리먼트를 선택복합 선택자
두 개 이상의 선택자를 조합하여 요소를 선택하는 선택자
1. 하위 선택자 :
"부모 요소 하위의 자식 요소"를 선택하는 데 사용된다.
<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 요소에 대한 스타일을 지정 */
}
2. 자손 선택자:
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 요소를 선택할 수 있다.
3. 자식 선택자:
자손 선택자와 유사하지만, "부모 요소의 직계 자식 요소"를 선택하는 데 사용된다.
">" 기호를 사용한다.
<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 {
/* 스타일 규칙 */
}4. 인접 형제 선택자:
자식, 자손 선택자는 부모-자식 관계를 선택했다면 인접 형제 선택자는 바로 뒤의 요소를 선택한다. "+" 기호를 사용한다.
<h2>제목1</h2>
<p>본문1</p>
<h2>제목2</h2>
<p>본문2</p>
Q. 제목1 다음의 본문1을 선택하고 싶다.
h2 + p {
/* 스타일 규칙 */
}
중요 : 인접 형제 선택자는 형제 요소 중에서 바로 뒤에 있는 요소만을 선택하기 때문에,
선택한 요소가 여러 개일 경우에는 전부 적용되지 않고 해당되는 인접 요소만이 적용된다.5. 일반 형제 선택자:
같은 부모 요소를 공유하는 형제 요소 중에서 지정된 요소를 선택하는 데 사용된다.
인접 선택자와 달리 같은 부모를 공유하는 것들 중 특정 요소를 선택한다. "~" 기호를 사용한다.
<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) 등
CSS 우선 순위?
- !important 규칙 : !important가 지정된 속성은 다른 모든 속성보다 우선한다.
- 인라인 스타일 : 스타일이 HTML 요소에 직접 적용된 경우 우선한다.
- ID 선택자 : ID 선택자로 지정된 스타일은 클래스, 태그 선택자보다 우선한다.
- 클래스 선택자 : 클래스 선택자로 지정된 스타일은 태그 선택자보다 우선한다.
- 태그 선택자 : 태그 선택자로 지정된 스타일은 다른 선택자에 비해 가장 낮은 우선 순위를 가진다.
이외에 같은 순위일 경우 먼저 적용된 스타일이 우선된다. 또는 특정적으로 명시한 요소의 경우 우선 순위에 영향을 준다.
#id .class div {
color: red;
}
예를 들어, 해당 구문에서는 ID 선택자(#id), 클래스 선택자(.class), 태그 선택자(div)가 존재한다.
