CSS 선택자

jaylight·2020년 10월 15일

<html>태그를 이용한 선택을 하면 해당 태그를 가진 모든 요소들에 변동이 생김

p {
  font-family: monospace;
}

다중 class 활용

fact class가 여러 요소가 있을 때 한 개 요소에만 빨간색으로 칠하고자 할 때, 새로운 id를 부여해서 id에 CSS 속성 값을 부여할 수 있지만, 이후 다른 요소에도 색을 수정할 때 매번 id를 추가해야함

위 상황에서는  태그에 새 클래스를 만드는 것이 바람하다. 브라우저는 하나의 태그에 여러 개의 클래스 추가를 지원한다.

<p class="fact warning">
  Warning: Eating too many donuts can be bad for your health. Just ask Winston.
</p>

위와 같이 class="fact warning"을 부여하면 해당 요소를 선택할 때, .fact, .warning 두 개의 선택자를 통해 각각 접근이 가능하다.

.fact {
  border-top: 1px solid rgb(222, 222, 222);
  border-bottom: 1px solid rgb(222, 222, 222);
  padding-top: 6px;
  padding-bottom: 6px;
}
            
.warning {
  color: red;
}

위와 같이 선택자를 지정하면 모든 fact class를 가진 요소에 .fact를 통해 정의한 속성 값들이 부여되며, warning class를 가진 요소에는 .warning을 통해 정의한 속성 값들이 적용된다.

또한 fact warning class를 가진 요소는 위 두 가지 속성 값들이 모두 적용된다.

다양한 요소에서의 class 활용

 등 글자를 강조하기 위한 요소에도 class 명을 부여하여 CSS로 접근할 수 있음

<p>A donut is a type of <strong class="warning">deep fried</strong> dough confectionery or dessert food. The doughnut is popular in many countries and prepared in various forms as a sweet snack that can be homemade or purchased in bakeries, supermarkets, food stalls, and franchised specialty outlets.</p>

위와 같이 strong 요소에 warning class를 부여하면 아래 그림과 같이 빨간색으로 동시에 적용됨

class와 태그 선택자 결합하기

위 그림에서 상단의  태그 부분에만 별도의 CSS 속성을 적용시키고자 할 때, 태그 선택자와 class 명을 결합하여 지정하면 상단의  요소 중 warning class를 가진 요소만 선택하여 CSS 속성값을 지정할 수 있음

태그명.class명

위에서 태그명.class명에서 띄어쓰기가 들어가면 인식이되지 않음
공백은 CSS에서 다른 것을 의미하기 때문

p.warning {
  border: 5px solid orange;
}

하위 선택자

태그선택자+class 이름으로 별도의 값을 부여하더라도 구분할 수 없는 요소들을 따로 선택하기 위해서는 하위 선택자를 활용할 수 있다.

해당 요소가 속한 부모 태그에 차이가 있다면, 부모 태그를 활용한 하위 선택자를 이용함으로써 각 요소를 구분하여 선택 가능하다.

만약에  요소의 을 선택하기 위해서는 가운데 공백을 넣어서 부모 요소에 속한 하위 선택자에 접근할 수 있다.

태그명 .class명

따라서 아래 같은 경우,  태그 내에 purple class에 대해서만 별도로 CSS 속성값을 부여한다.

p .purple {
  color: purple;
  background-color: transparent;
}

하위 선택자를 사용하기 위해서는 문서 구조상 어떤 태그가 어떤 태그 내부에 있는지를 볼 수 있고, 이를 위해서 평소 띄어쓰기를 통해 상위-하위 구조를 구별하여 작성하는 습관이 필요하다.

CSS 작성시, 추후 문서 구조가 수정되어도 범용성이 유지될 수 있도록 고려하여 구성해야한다.

CSS 선택자 그룹하기

html의 여러 요소를 그룹화하여CSS 속성값 부여를 한번에 처리할 수 있음

여기서 각 요소에 같은 class를 부여하여 속성값을 처리하는 것은 비효율적임

각 선택자를 ,로 연결하여 한번에 속성값을 부여 가능하다.
아래와 같은 코드를 h1과 h2에 모두 font-family: cursive를 부여할 수 있음

h1, h2{
  font-family: cursive;
}

CSS 동적 가상클래스 (Pseudo-classes)

가상클래스는 웹페이지 구조의 일부가 아닌 정보로 요소를 선택할 때 사용

선택자 뒤에 :를 통해 '가상클래스'를 부여할 수 있음

:link

링크를 선택하는 가상클래스 (default: 파란색)

:visited

방문한 링크를 선택하는 가상클래스 (default값: 보라색)

가상클래스를 통해 visited와 link속성을 변경할 수 있지만, 마땅한 이유가 필요하다.
온라인 유저는 대부분 default 형태로 링크가 표시되는 것에 익숙해져 있기 때문에
유저가 익숙한 UI를 변경한다면 혼동을 줄 수 있기 때문이다.

:hover

마우스가 올라와 있는 요소를 선택하는 가상클래스

모든 요소에서 사용가능하지만, 스마트폰 등 일부 환경에서는 작동하지 않음

:active

현재 활성화된 요소를 선택하는 가상클래스
링크의 경우, 사용자가 링크를 누른다면 그 직전에 페이지를 변경

:focus

tab키를 누르는 것과 같은 동작이 발생할 때 요소를 선택하는 가상클래스
대화형 콘텐츠 (input, img, tabindex) 등에서 가능

다수의 경우 :hover. :active, :focus는 같은 속성을 활용

가상클래스의 경우에도 선택자 그룹을 위해 ,를 통해 연결하여 한번에 속성 값을 부여할 수 있음

a:hover, a:active, a:focus { 
  background-color: rgb(43, 0, 255);
}

CSS 우선순위

아래와 같이
 태그 요소에 color: orange,
info-paragraph class에 color: blue,
main-paragraph id에 color: green을 부여한다면,

id에 부여한 color: green이 우선적으로 적용됨

p {
  font-family: sans-serif;
  color: orange;
}
            
.info-paragraph {
  color: blue;
}
            
#main-paragraph {
  font-weight: bold;
  color: green;
}

<p id="main-paragraph" class="info-paragraph important">
    The Pacific Ocean is the largest of the Earth's oceanic divisions. It extends from the Arctic Ocean in the north to the Southern Ocean (or, depending on definition, to Antarctica) in the south and is bounded by Asia and Australia in the west and the Americas in the east.</p>