STS 122::CSS 기초

4. 복합 셀렉터


본 강좌에서는 CSS에서의 상속의 개념에 대해 살펴봅니다. 계층 구조 안에서의 부모요소와 자식요소간의 관계를 파악하고 상속을 통해 CSS 속성 적용이 어떻게 이루어지는지 학습합니다. 부모 자식 선택자의 다양한 표현방법들을 알아봅니다. 사용자 동작과 UI 요소 상태에 스타일을 적용하는 가상클래스에 대해 배우고 어떤 속성들이 존재하는지 살펴봅니다.

이 강의를 통해 자바언어의 특징을 이해하고 자바언어를 왜 배워야 하는지 알 수 있게 됩니다.


01: 상속

CSS에서 상속이란 계층구조에서 특정 속성들이 부모요소로부터 자식요소로 전달되는 개념입니다. 부모의 색상이 빨강색이라면, 자식도 빨강색이라는 속성을 물려받는 것입니다. 하지만, 모든 CSS 속성들이 상속되는 것은 아닙니다. 예를 들어, 마진은 상속되지 않습니다. 자식요소가 부모와 동일한 마진을 가지는 경우는 거의 없기 때문입니다.

css_4-1

동영상 강좌

참고 자료

퀴즈

1) 상속의 개념에 대해 서술하시오.

해답보기

부모 요소의 속성을 자식 요소가 물려받는 것.


02: 부모 자식 선택자

부모 자식 선택자란 부모 요소 하위에 있는 태그에 스타일을 적용시킬 때 사용 하는 선택자입니다.

css_4-2

1) 선택자A 선택자 B (공백)

2) 선택자A > 선택자B

3) 선택자A + 선택자B

4) 선택자A ~ 선택자B

5) 지정선택자와 하위 선택자 비교.

...

- 하위선택자: `p .box {...}`(공백)
```html
<p>
  <div class="box">
  ...
  </div>
</p>

동영상 강좌

참고 자료

퀴즈

1) CSS에서 부모 자식간의 관계에 대해 서술하시오.

해답보기

부모 요소의 하위에 있는 요소들이 자식이 된다.


03: 가상 선택자

CSS 가상 요소는 지정된 요소에 스타일을 적용하는 데 사용됩니다. 예를 들어, 요소의 두 번째 문자나 선에 스타일을 지정할 수 있고, 요소의 내용 앞이나 뒤에 내용을 삽입할 수도 있습니다. 또한, 가상클래스는 어떤 요소의 특정 상태를 지정해줄 때 사용합니다.

css_4-3

1) 가상 클래스(:)

<style>
  a:link { 
    color: red;
  }
  a:hover { 
    color: hotpink; 
  }
</style>

<body>
  <p><a href="default.asp">This is a link</a></p>
</body>

css_4-3-1

Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:link a:link Selects all unvisited links
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent

2) 가상 요소(::)

<style>
  h1::before { 
    content: url(img/smile.png); 
  }
</style>

<body>
  <h1>This is a heading</h1>
</body>

css_4-3-2

Selector Example Example description
::after p::after Insert content after every <p> element
::before p::before Insert content before every <p> element
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
::selection p::selection Selects the portion of an element that is selected by a user

동영상 강좌

참고 자료

퀴즈

1) CSS에서 가상선택자의 역할이 무엇입니까?

해답보기

사용자의 반응으로 생성되는 특정 상태를 지정할 때 그 타겟이 어떤 것인지 알려주는 역할을 한다.

2) 가상선택자에서 :active 는 어떤 역할을 합니까?

해답보기

:active는 사용자가 마우스로 클릭한 태그를 선택했을 때의 상태를 지정해준다.


04: 실습 예제

기본 실습은 통합실습페이지에서 한꺼번에 다루고 있습니다. 아래의 링크를 클릭하면 새창(탭)이 열리고 해당 예제로 이동하게 됩니다.

05: 참고 자료