이듬(EUID)'s Front-End Master

📝강의를 시청하면서 궁금한 점이 있거나, 질문 또는 의견을 남기고 싶다면? 페이지 하단(↓) "토론" 섹션에 남겨주세요.

CSS 선택자

CSS는 선택자를 사용해 HTML 요소를 선택하는 다양한 방법을 제공합니다.

  1. CSS 심플 선택자
  2. CSS 속성 선택자
  3. CSS 가상 클래스 선택자
  4. CSS 가상 요소 선택자

상당히 많은 분량이지만 시간을 들여 하나 하나 정복해봅시다. 분량이 많은 만큼 총 4편의 영상 강의로 제공됩니다.

영상 강의

PLAY 버튼을 눌러 영상 강의를 시청합니다.

Lecture → CSS 심플 선택자

Lecture → CSS 속성 선택자

Lecture → CSS 가상 클래스 선택자

Lecture → CSS 가상 요소 선택자

Lecture → CSS Diner


실습 자료

링크 텍스트를 클릭하면 실습 자료를 다운로드 받을 수 있습니다.

css-selectors.zip

참고


Q & A

수강생과 주고 받은 질문/답변 입니다. 참고하세요.

Q1

야무선생님 선택자 hover 와 active를 배우다가 느끼게 된 점이 있는데요 hover는 마우스 호버 , active는 키보드 탭 상황인건데 일반인들이 마우스 , 장애우 분들이 키보드 탭을 하는 상황이 많다고 저번 시간에 가르쳐주신게 생각납니다. 요즘같이 사이트에 마우스 호버 효과가 다양한데 탭은 볼 수 없으니 만약 호버했을 때 하단에 밑줄이 나온다고 생각한다면 선택자:hover {border-bottom:1px solid #000;} 이렇게 쓰기보다 선택자:hover,선택자:active{border-bottom:1px solid #000;} 이렇게 항상 같이 써주면 어떨까요? 장애우 분들이 본인들의 탭 위치가 어디있는지도 볼 수 있고, 마우스 hover의 기능도 함께 볼 수 있을거 같은 생각이 들었습니다.

A1

좋은 질문입니다. ^ㅡ^

모든 사용자를 고려하는 마음가짐이야 말로 좋은 개발자가 가져야 할 마인드 입니다.

CSS가 지원하는 각 상태는 다음과 같습니다.

- :hover 는 마우스가 올라간 상태
- :active 는 마우스로 클릭한 상태
- :focus 는 키보드 포커싱 상태

마우스 뿐만 아니라 키보드 포커싱(초점) 상태에 따른 스타일을 일관되게 반영하고자 한다면?

아래와 같이 :hover, :focus를 그룹핑 하여 스타일링 할 수 있습니다.

:hover,
:focus {
    border-bottom: 1px solid #000;
}

아! 그리고 장애우 라는 말보다는 장애인으로 말하기를 권장하고 싶습니다.
비 주체적이고 비 사회적 인간으로 형상화하는 '장애우'란 표현을 쓰지 말아야 합니다. ^^;


참고

- 장애우
- 장애우는 표준어가 아니다. 장애인이 맞는 말.

← 상속→