[ 생활코딩 ] CSS - 선택자

선택자

인간의 언어는 주어와 서술어로 이루어져 있습니다. 이 두가지는 언어를 구성하는 양대축입니다. 선택자는 인간의 언어로 치면 주어에 해당하는 매우 중요한 요소입니다. 주어를 자유롭게 사용하지 않으면 정상적인 언어 생활을 할 수 없는 것처럼 선택자를 자유롭게 사용할 수 없으면 CSS를 정복할 수 없습니다.

 

선택자와 선언

어떤 태그를 디자인하기 위해서는 디자인하려는 태그를 선택하고 (선택자), 선택한 대상에게 효과를 줘야 합니다. (선언)

 

선택자 (Selector)와 선언 (Declaration)

• li - 선택자
• { } - 선언
• 내용 - 속성 : 속성 값

선택자 (Selector)와 선언 (Declaration) 예제 ( 출처 : https://www.opentutorials.org/course/2418/13346 )

선택자의 종류

선택자의 타입들

• 태그 선택자
• 클래스 선택자
• 아이디 선택자

 

아이디 선택자

- 아이디 속성의 값에 해당하는 태그를 선택하는 선택자입니다. 아래의 코드는 이 문서에서 id값이 select인 태그라는 뜻입니다.
- 단 한번 사용할 수 있습니다.

아이디 선택자 예제 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2418/13347 )

 

클래스 선택자

- 클래스 속성의 값에 해당하는 태그들을 선택하는 선택자입니다.
- 같은 태그 뿐만 아니라, 서로 다른 태그도 그룹핑해서 묶어줄 수 있습니다.
- 여러 번 사용할 수 있습니다.

클래스 선택자 예제 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2418/13347 )

 

부모 자식 선택자

어떤 태그의 하위에 있는 태그를 선택하고 싶을 때는 좀 더 복합적인 선택자를 사용하게 됩니다.

조상 자손 선택자

조상 자손 선택자 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2418/13348 )

조상 자손 선택자 예제 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2418/13348 )

 

부모 자식 / 친구 선택자

부모 자식 / 친구 선택자 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2418/13348 )

부모 자식 / 친구 선택자 예제 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2418/13348 )

 

선택자 공부 팁

Selector를 수련할 수 있는 방법

• CSS Diner : CSS 선택자를 게임의 형식을 통해서 익힐 수 있는 사이트
• CheatSheet

 

가상 클래스 선택자

가상(pseudo) 클래스 선택자는 클래스 선택자는 아니지만 엘리먼트들의 상태에 따라서 마치 클래스 선택자처럼 여러 엘리먼트를 선택할 수 있다는 점에서 붙은 이름입니다.

링크와 관련된 가상 클래스 선택자

• :link - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크
• :hover - 마우스를 롤오버 했을 때
• :active - 마우스를 클릭했을 때

위의 선택자는 순서대로 지정하는 것이 좋습니다. 특히 visited의 경우는 보안상의 이유로 아래와 같은 속성만 변경이 가능합니다.

• color
• background-color
• border-color
• outline-color
• The color parts of the fill and stroke properties

링크와 관련된 가상 클래스 선택자 ( 출처 : 생활코딩 - https://www.opentutorials.org/course/2418/13516 )

여러가지 선택자들 1

CSS Diner

여러가지 선택자들 2

여러가지 선택자들 3

여러가지 선택자들 4