CSS : CSS Selector

Selector

정의

- 셀렉터는 특정 HTML 요소를 선택해서 스타일을 적용할 수 있도록 합니다.

모든 셀렉터를 한번에 다룰 수는 없습니다만 앞에서 배워본 tag 셀렉터, class 셀렉터, ID 셀렉터를 비롯해 그 외에 빈번하게 사용되는 여러가지 셀렉터를 알아 보겠습니다. 그리고 이와 관련하여 CSS의 중요 개념인 캐스캐이딩도 살펴 보겠습니다.

 

 

Class Selector

<div class="class-selector selector">클래스 선택자</div>
<p class="selector name-selector"> class 선택자2</p>
<p id="id-selector"> id selector </p>

html 문서가 이와같이 있다고 할 때를 가정해보자.

 

selector는 일단 띄어쓰기로 selector를 구분합니다.

 

class-selector와 selector를 CSS에서 다르게 정의를 해두면, 두 css 다 적용이 되는 것을 알 수 있다.

 

보통 다른 selector 보다는 class selector를 주로 쓴다. 유지보수가 좋고, 코드 재사용에도 용이하기 때문이다.

 

Tag Selector

<a href="#">a 요소1</a>
<a href="#">a 요소2</a>
<ul class="region korea">
  <li>서울</li>
  <li>부산</li>
  <li>대구</li>
</ul>
<h2>일본</h2>
<ul class="region japan">
  <li>도쿄</li>
  <li>오사카</li>
  <li>쿄토</li>
</ul>
<h2>중국</h2>
<ul class="region china">
  <li>베이징</li>
  <li>칭다오</li>
</ul>

위에 html은 Tag Selector를 쓴 것입니다.

 

Tag Selector는 문서 전체의 태그 속성을 한 번에 바꿀 때, 매우 용이하다.

 

posting 하기는 하지만, 하마 아래처럼 tag selector는 거의 쓰지 않습니다.

 

Class selector를 많이 쓰고, Tag Selector는 유지보수가 어려워 보통 쓰지 않는다. 처음 골격 잡을 때는 가능할지도?

전 안쓸겁니다....

a {
	color : black;
    font-size:20;
}

li {
	margin:0;
    list-style:none;
}

 

Id Selector

<div class="class-selector selector">클래스 선택자</div>
<p>태그 선택자</p>
<p id="id-selector" class="selector">id 선택자</p>

p {
  background: lightgrey;
  font-weight: 100;
}
.selector {
  background: lavender;
  font-weight: 400;
}
#id-selector {
  background: orange;
  border: 1px solid #696969;
  padding: 10px;
  font-weight: 900;
}

Id Selector는 구체적으로 해당 요소를 콕 찝어서 지칭하기 때문에, 어떤 특정 부분을 정의해줄 때 좋습니다.

만약 다른 속성 값이 정의를 해준경우면,  그 내용이 다른 선택자를 덮어 쓰게 됩니다.

 

Selector 우선순위

id selector > class selector > tag selector

 

Selector arg 순서들

<h1 class="title">각 국가의 지역들</h1>
  <p>동아시아 각 국가를 소개하고, 여러 지역에 대해서 알아보도록 하겠습니다.</p>
  <div class="region korea">
    <h2 class="region-title korea" id="my-country">한국</h2>
    <p>
      한국(韓國), 조선(朝鮮), 또는 코리아(Korea)는 동아시아에 위치한 지역 또는
      헌법상의 국가로, 현대사에서는 한반도의 대한민국과 조선민주주의인민공화국을
      통틀어 이르는 말이다. 근현대사에서 한국은 고종이 수립한 대한제국을 일컫는
      말이었다. 넓은 의미로 한국은 고조선 이후 한반도에서 설립된 여러 한민족의
      국가를 통칭하는 말이다. 한국의 역사를 한국사라고 한다.
    </p>
    <ul class="list">
      <li class="list-item">서울</li>
      <li class="list-item">
        경상도
        <ul>
          <li>대구</li>
          <li>부산</li>
        </ul>
      </li>
      <li class="list-item">
        <a
          href="https://www.google.com/maps/place/제주특별자치도"
          title="제주 지도"
          >제주</a
        >
      </li>
    </ul>
  </div>

h1,
h2 {
  color: blue;
  /* 모든 제목요소에 같은 디자인 속성을 지정하려면 이렇게 묶을 수 있습니다 */
}
.korea,
.japan,
.china {
  /* 클래스 선택자도 마찬가지로 묶어서 선택할 수 있습니다. */
}
div.region p {
  /* region 클래스를 가지는 div 요소 하위에 포함된 모든 p 요소를 선택합니다.
   바로 위에 있는 부모 요소이든, 혹은 멀리 떨어져 있는 계층 구조이든 상관 없습니다. */
  background-color: orange;
}
.region .korea {
  /* region 클래스를 가지는 모든 요소의 하위에 포함된 korea 클래스 요소를 선택합니다. */
  background-color: orange;
}
.region.korea {
  /* 띄어쓰기가 있는 것과 없는 것은 완전히 다릅니다.
  클래스 선택자를 띄어쓰지 않고 작성하면 *두 개가 모두 포함되어 있어야* 적용된다는 의미입니다. */
  background-color: orange;
}
.container > p {
  /* module 클래스를 가진 요소의 바로 아래의 자식요소 중 h2 요소를 선택하라는 의미입니다.
  직계자손이라는 뜻에서 더욱 구체적입니다. */
  background-color: orange;
}
.container p {
  /* 위와 비교해 보세요. */
  background-color: orange;
}
a[title] {
  /* a 요소 중에서 title 속성이 있는 모든 요소를 선택 */
  background-color: orange;
}

a[href="https://www.google.com/maps/place/일본+가가와현+다카마쓰시"] {
  /* href 속성값이 "https://www.google.com/maps/place/일본+가가와현+다카마쓰시"와 일치하는 a 요소 */
  background-color: orange;

천천히 하나씩 확인해보자!!! 좌절하지 말기

 

1. h1, h2 이렇게 tag를 묶어서 지정해도 html에 적용이 됩니다.

2. .korea,.japan,.china 이렇게 class selector도 묶어서 적용이 됩니다.

3. div.region p 는 div태그 안에 region selector가 있고, 그 하위에 p 태그에 적용할게! (띄어쓰기가 하위라는 개념)

4. .region .korea 는 .region class 를 가지는 모든 요소 하위에 .korea에 선택한 후 적용할게!!

5. .region.korea 는 region 과 korea class selector를 모두 가지는 요소를 선택할게!!

6. .container > p 는 div.region p 이 경우와는 다르게 container  바로 밑에 존재하는 p를 고쳐주세요! 이다.

7. a[title] 은 a 태그 중에서 title 이라는 속성이 있는 부분을 선택해!! -> 위에선 '제주' 부분이 선택된다.

8. a[href="https://www.google.com/maps/place/일본+가가와현+다카마쓰시"] 는 a 태그 중 href 속성을 가진 부분을 선택해!

 

Selector들의 기타 선택 방법

a {
  /* 모든 a 요소 */
  background-color: orange;
}
a:hover,
a:active,
a:focus {
  /* a 요소에 마우스가 올라가있거나, 활성화되어 있거나, 키보드로 선택되어 있을 때 */
  background-color: orange;
}
li:first-child {
  /* li 요소 중 첫 번째 li 요소 */
  background-color: orange;
}
.container div:last-of-type {
  /* container 선택자 요소의 하위 div 요소 중 마지막 요소 */
  background-color: orange;
}
h2::before {
  content: "👉 ";
  /* h2 요소 앞에 가상 요소를 넣어 '>'라는 콘텐트를 넣어줍니다. */
}

1. a:hover, a:active, a:focus 는 마우스 위에 올려두었을 때, background-color를 오렌지로 줘라 라는 의미

2. li.first-child 는 li 태그에서 첫 번째 부분을 선택해! -> last-child, nth-child(2) 이렇게도 가능

3. .container div:last-of-type 은 class container 인 부분에서 div 태그중 type 마지막을 선택해라

4. h2::before 는 h2에 content 를 집어넣는다.

 

CSS는 기본적으로 상위 태그의 스타일 속성을 상속 받습니다. 

상속이란 상위 요소에 적용된 속성을 하위 요소가 물려받는 것을 의미하고, 대표적으로는 font나 color 같은 속성이 있습니다. 

그 외에 position이나 box 관련 속성 등은 상속이 되지 않습니다. 상속이 된다고 생각하면 좀 이상하죠. 

하여튼 상속이 가능하기 때문에 혼란스럽기도 하지만, 각 요소를 따로 지정해줄 필요가 없어 효율적이라고도 할 수 있습니다.

 

이렇게 CSS는 기본적으로 상위 태그의 스타일 속성을 상속받고, 하위 태그에 중복된 스타일 속성이 있다면 상위 태그의 내용을 덮어씁니다. 또, 셀렉터 구체성 점수나 언제 어느 위치에서 선언이 되었는지 등에 따라서 달라집니다. 스타일이 겹치는 부분을 잘 살펴봐야 하죠.

 

결론 : CSS Selector를 사용해서 html 태그에 직접 넣지 말고, CSS에 적음으로써 큰 틀에 속성을 대입하고, 하위 태그들을 따로 설정해서 상속받는 이점을 활용하자.