[CSS] CSS 활용 - 선택자

CSS 활용 - 선택자

기본 선택자

선택자는 HTML의 특정한 요소를 선택하는 사인(sign)입니다.

전체로 찾기

전체 글자색을 아래와 같이 바꿀 때 * 태그의 이름을 입력한다.

* {
  color: red;
}

태그로 찾기

선택자를 입력하는 부분에 적용하려는(찾으려는) 태그의 이름을 입력합니다.

/*<h1>은 글자색이 빨강이야!*/
h1 {
  color: red;
}
/*<p>는 글자색이 파랑이야!*/
p {
  color: blue;
}

<h1>제목1</h1> <!--red-->
<h1>제목2</h1> <!--red-->
<p>본문1</p> <!--blue-->
<p>본문2</p> <!--blue-->

만약 ‘제목1’과 ‘본문1’에만 색상을 추가하고 싶다면 어떻게 해야 할까요? ‘태그 선택자’만 가지고는 어렵겠네요..

클래스로 찾기

좀 더 명확하게 원하는 요소를 찾기 위해서 ‘클래스 선택자’라는 것이 존재합니다. 예제를 봅시다.

/*class="title"은 글자색이 빨강이야!*/
.title {
  color: red;
}
/*class="main-text"는 글자색이 파랑이야!*/
.main-text {
  color: blue;
}

<h1 class="title">제목1</h1> <!--red-->
<h1>제목2</h1>
<p class="main-text">본문1</p> <!--blue-->
<p>본문2</p>

class라는 HTML 속성에 원하는 별명을 입력합니다.

제목에는 title을 본문에는 main-text라는 별명을 지정했네요.

이제 CSS에서 이 별명을 기준으로 요소를 찾을 수 있습니다.

단, 주의할 점은 선택자에 앞에 .이 붙는다는 것입니다.

.은 클래스를 나타내며 CSS의 .title은 HTML의 class="title"와 동일합니다.

.이 없는 선택자 title은 태그 <title>를 의미하게 되니 전혀 다른 뜻으로 인식됩니다.

이처럼 .과 같은 특수한 기호들을 이용해서 HTML과 CSS를 매칭하므로 누락하기 쉽습니다.

따라서 꼼꼼한 선택자 작성이 중요합니다.

아이디로 찾기

좀 더 명확하게 원하는 1가지 요소를 찾기 위해서 ‘아이디 선택자’라는 것이 존재합니다.

#orange {
  color: red;
}

<div>
  <ul>
    <li>사과</li>
    <li>딸기</li>
    <li id="orange">오렌지</li>	<!-- 이 부분만 변경 됨 -->
  </ul>
</div>

복합 선택자

일치 선택자

E와 F를 동시에 만족하는 요소 선택

EF

태그 선택자와 클래스 선택자 2가지를 복합적으로 사용했을 때를 우리는 일치 선택자라고 한다.

그래서 두개 모두를 만족하는 것만 변경한다.

span.orange {		/* span 태그 선택자, .orange 클래스 선택자 = 이것을 일치 선택자라고 한다.*/ 
  color: red;
}

<div>
  <ul>
    <li>사과</li>
    <li>딸기</li>
    <li class="orange">오렌지</li>
  </ul>
  <div>당근</div>
  <p>토마토</p>
  <span class="orage">오렌지</span>	<!--선택--->
</div>

자식 선택자

E의 자식 요소 F를 선택

E > F

ul 태그 선택자에서 .orange 클래스 선택

ul > .orange {		 
  color: red;
}

<div>
  <ul>
    <li>사과</li>
    <li>딸기</li>
    <li class="orange">오렌지</li>		<!--선택--->
  </ul>
  <div>당근</div>
  <p>토마토</p>
  <span class="orage">오렌지</span>
</div>

후손(하위, 자손) 선택자

E의 후손(하위, 자손) 요소 F를 선택

‘띄어쓰기’가 선택자의 기호로 사용됩니다.

E F

div .orange {		 
  color: red;
}

<div>
  <ul>
    <li>사과</li>
    <li>딸기</li>
    <li class="orange">오렌지</li>		<!--선택--->
  </ul>
  <div>당근</div>
  <p>토마토</p>
  <span class="orage">오렌지</span>		<!--선택--->
</div>

인접 형제 선택자

E의 다음 형제 요소 F 하나만 선택

E + F

.orange + li {		 
  color: red;
}

  <ul>
    <li>사과</li>
    <li>딸기</li>
    <li class="orange">오렌지</li>
    <li>망고</li>		<!--선택--->
    <li>사과</li>
  </ul>

일반 형제 선택자

E의 다음 형제 요소 F 모두 선택

E ~ F

.orange ~ li {		 
  color: red;
}

  <ul>
    <li>사과</li>
    <li>딸기</li>
    <li class="orange">오렌지</li>
    <li>망고</li>		<!--선택--->
    <li>사과</li>		<!--선택--->
  </ul>

가상 클래스 선택자

: hover

E에 마우스(포인터)가 올라가 있는 동안에만 E 선택

E:hover

<a href="https://google.com">Google</a>
<div class="box">
  
</div>

a:hover {
  font-weight: bold;
  font-size: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  transition: 0.4s;
}

.box:hover {
  width: 200px;
}

: active

E를 마우스로 클릭하는 동안에만 E 선택

E:active

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  transition: 0.4s;
}

.box:active {
  width: 200px;
  background: yellowgreen;
}

: focus

E가 포커스 된 동안에만 E 선택

대화형 콘텐츠에서 사용 가능

E:focus

<input type="text">

input {
  width: 100px;
  outline: none;
  border: 1px solid lightgray;
  padding: 5px 10px;
  transition: 0.4s;
}

input:focus {
  border-color: red;
  width: 200px;
}

: first-child

E가 현제 요소 중 첫번째 요소라면 선택

E:first-child

.fruits li:first-child {
  color: red;
}

  <ul class="fruits">
    <li>사과</li>		<!--선택--->
    <li>딸기</li>
    <li>오렌지</li>
    <li>망고</li>
    <li>사과</li>
  </ul>
	<li>수박</li>

: last-child

E가 형제 요소 중 마지막 요소라면 선택

E:last-child

.fruits li:list-child {
  color: red;
}

  <ul class="fruits">
    <li>사과</li>
    <li>딸기</li>
    <li>오렌지</li>
    <li>망고</li>
    <li>사과</li>		<!--선택--->
  </ul>
	<li>수박</li>

: nth-child(n)

E가 형제 요소 중 n번째 요소라면 선택(n 키워드 사용시 0부터 해석)

E:nth-child(n)

.fruits li:nth-child(2) {
  color: red;
}

  <ul class="fruits">
    <li>사과</li>
    <li>딸기</li>		<!--선택--->
    <li>오렌지</li>
    <li>망고</li>
    <li>사과</li>
  </ul>
	<li>수박</li>		<!--X-->

‘짝수’번째 요소들만 선택할 수도 있다.

.fruits li:nth-child(2n) { /* 짝수만 선택 할 수도 있다. */
  color: red;
}

  <ul class="fruits">
    <li>사과</li>
    <li>딸기</li>		<!--선택--->
    <li>오렌지</li>
    <li>망고</li>		<!--선택--->
    <li>사과</li>
  </ul>
	<li>수박</li>		<!--X-->

3번째 요소부터 이후 요소들을 선택할 수도 있다.

.fruits li:nth-child(n+3) { /* 3, 4, 5, ... */
  color: red;
}

  <ul class="fruits">
    <li>사과</li>
    <li>딸기</li>
    <li>오렌지</li>		<!--선택--->
    <li>망고</li>		<!--선택--->
    <li>사과</li>		<!--선택--->
  </ul>
	<li>수박</li>		<!--X-->

: xxx-child 주의사항

이 .fruits의 첫번째 자식 요소가 <p></p> 가 아니기 때문에 선택되지 않습니다.

.fruits p:nth-child(1) {
  color: red;
}

<!--선택된 요소 없음-->
<div>
  <div>
    <p>사과</p>
    <p>망고</p>
    <span>오렌지</span>
  </div>
</div>

: nth-of-type(n)

E의 타입(태그 이름)과 동일한 타입인 형제 요소 중 E가 n번째 요소라면 선택

(n 키워드 사용시 0부터 해석)

.fruits {
  font-size: 40px;
}

.fruits p:nth-of-type(1) {
  color: red;
}

<div class="fruits">
  <div>딸기</div>
  <p>사과</p>
  <p>망고</p>
  <span>오렌지</span>
</div>

: not 부정 선택자

S가 아닌 E 선택

E:not(S)
E 검색
S 선택자

.fruits {
  font-size: 40px;
}

.fruits li:not(.strawberry) {
  color: red;
}

<ul class="fruits">
  <li>오렌지</li>
  <li class="strawberry">딸기</li>
  <li>망고</li>
  <li>사과</li>
</ul>

가상 요소 선택자

:: before

E 요소 내부의 앞에, 내용을 삽입

E::before

<!--ul>li{$}*10-->
<!--빠르게 작성법 -->

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

ul li::before {
  content: "";		/* content를 꼭 작성해야 함 */
  width: 30px;
  height: 30px;
  background: tomato;
  margin-right: 20px;
  display: include-block;
  border-radius: 50%;
}

:: after

E 요소 내부의 뒤에, 내용을 삽입

E::after

<!--ul>li{$}*10-->
<!--빠르게 작성법 -->

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

ul {
  font-size: 400px;
}

ul li::after {
  /* content: ""; */
  content: url("http://heropy.blog/css/images/logo.png");		/* 이미지도 삽입이 가능하다. */
}

속성 선택자

[attr]

속성 attr을 포함한 요소 선택

<input type="text" value="KANGPRO">
<input type="password" value="1234">

<!--클래스로 찾는 방법(좋지 않음)-->
<input class="disabled" type="text" value="disabled text" disabled>

<!--[attr] 속성선택자로 사용-->
<input type="text" value="disabled text" disabled>

/*클래스로 선택*/
.disabled {
  opacity: 0.2; /* 20% */
}

/*속성 선택자로 선택*/
[disabled] {
  opacity: 0.2; /* 20% */
  color: red;
}

[attr=value]

속성 àttr을 포함하며 속성 값이 value인 요소 선택

[attr=value]

<input type="text" value="KANGPRO">
<input type="password" value="1234">
<input type="text" value="disabled text" disabled>

/*선택자 중 값을 선택*/
[type="password"] {	/*큰따옴표 생략해도 됨*/
  opacity: 0.5; /* 20% */
  color: red;
}

[attr^=value]

속성 àttr을 포함하며 속성 값이 ``value`로 시작하는 요소 선택

[attr^=value]

<button class="btn-succcess">Success</button>
<button class="btn-danger">Danger</button>
<button>Normal</button>

[class^="btn-"] {
  font-weight: bold;
  border-radius: 20px;
}

[attr$=value]

속성 àttr을 포함하며 속성 값이 ``value`로 끝나는 요소 선택

[attr$=value]

<button class="btn-success">Success</button>
<button class="btn-danger">Danger</button>
<button>Normal</button>

[class^="btn-"] {
  font-weight: bold;
  border-radius: 20px;
}

[class$="success"] {
  color: green;
}

[class$="danger"] {
  color: red;
}

상속

상속되는 속성들

글자들에 관련된 속성은 상속 된다고 보면 된다.

font
- font-size
- font-weight
- font-style
- line-height
- font-family

color
text-align
text-indent
text-decoration
letter-spacing
opacity

etx

강제 상속

상속되지 않는 속성(값)도 ìnherit 이라는 값을 사용하여 ‘부모’에서 ‘자식’으로 강제 상속 시킬 수 있습니다.

‘자식’을 제외한 ‘후손’에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아닙니다.

<div class="parant">
  <div class="child"></div>
</div>

.parent {
  position: absolute;		/* 상속되지 않는 속성과 값 */
}

.child {
  position: inherit;		/* 강제 상속 받아 position: absolute; 와 동일 */
}

우선순위

우선순위란?

하나의 요소를 가리키는 7개의 색상이 있습니다. Hello world!라는 문자는 어떤 색상이 될까요?

결과는 브라우저 규칙에 정해지며 그 규칙이 바로 우선순위라고 한다.

<body>
  <!--인라인 선언방식-->
  <div id="color_yellow" class="color_green" style="color: orange;"> Hello world!
  </div>
</body>

/* !important */
div {
  color: red !important;
}

/* 아이디 선택자 */
#color_yellow {
  color: yellow;
}

/* 클래스 선택자 */
.color_green {
  color: green;
}

/* 태그 선택자 */
div {
  color: blue;
}
/* 전체 선택자*/
* {
  color: darkblue;
}

/* 상속 */
body {
  color: violet;
}

우선순위 결정

같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성(property)을 우선 적용할지 결정하는 방법

우선수위에는 ‘중요도, 명시도, 선언순서’의 개념이 있습니다. 각 개념이 의미하는 것을 기억하세요.

명시도 점수가 높은 선언이 우선(명시도)
점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선(선언 순서)
명시도는 '상속' 규칙보다 우선(중요도)
!important가 적용된 선언 방식이 다른 모든 방식보다 우선(중요도)

1. 가장 중요(!important)

모든 선언을 무시하고 가장 우선

점수: ∞ pt

div {
  color: red !important;	/* 가장 우선 */
}

2. 인라인 선언 방식

인라인 선언(HTML style 속성을 사용)

점수: 1000 pt

<div style="color: orange;">Hello world!</div>

3. 아이디 선택자

점수: 100 pt

#color_yellow {
  color: yellow;
}

4. 클래스 선택자

점수: 10 pt

.color_green {
  color: green;
}

5. 태그 선택자

점수: 1 pt

span {
  color: blue;
}

6. 전체 선택자

점수: 0 pt

* {
  color: darkblue;
}

7. 상속

상속 받은 속성은 항상 우선하지 않음

점수: 계산하지 않음

body {
  color: violet;
}

예제

이 :hover처럼 ‘가상 클래스’는 ‘클래스’ 선택자의 점수(10pt)를 가지며,

::before 처럼 ‘가상 요소’는 ‘태그’ 선택자의 점수(1pt)를 가집니다.

부정 선택자 :not()은 점수를 가지지 않습니다.

.list li.item { color: red; }	/* 21pt(클래스, 태그, 클래스) */
.list li:hover { color: red; }	/* 21pt(클래스, 태그, 가상클래스) */
.box::before { content: "Good"; color: red }	/*11pt(클래스, 가상요소(태그)) */
#submit span { color: red; }	/* 101pt(아이디, 태그) */
header .menu li:nth-child(2) { color: red; }	/* 22pt(태그, 클래스, 태그, 가상클래스) */
h1 { color: red; }	/* 1pt(태그) */
:not(.box) { color: red; }	/* 10pt(부정, 클래스) */  /* 부정선택자는 점수 계산하지 않음 */
:not(span) { color: red; }	/* 1pt(부정, 태그) */  /* 부정선택자는 점수 계산하지 않음 */

참고

패스트캠퍼스(박영웅 강사님) : 올인원 패키지 : 프론트엔드 개발 with React.js

https://heropy.blog/2019/04/24/html-css-starter/

개발자님들 덕분에 많이 배울 수 있었습니다. 감사의 말씀 드립니다.