CSS - ② 선택자

CSS 선택자

CSS 문법은 크게 선택자와 선언부로 나뉩니다.
선택자는 CSS를 적용할 태그(요소)를 지정하는 문법적인 영역이며, CSS는 선택자를 지정하는 다양한 방법이 있습니다.

전체 선택자

HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로 * 기호를 사용 합니다.

* {
    margin: 0; /* margin 초기화 */
    padding: 0; /* padding 초기화 */
    box-sizing: border-box; /* 중요! */
}

태그 선택자

HTML 태그명으로 선택자 지정
태그 선택자는 선택자에 지정된 태그명과 일치하는 모든 요소를 한번에 선택 합니다.

div {
  width : 200px;
  height: 200px;
  background-color: royalblue;
  color: white;
}

특정 부분에 스타일 적용하는 클래스 선택자

같은 태그라도 일부는 다른 스타일을 사용하고 싶을 때 클래스 선택자를 사용 합니다.

👉 .클래스명

.accent {
	border: 1px solid black;
    	padding: 5px;
}
...
<h1 class="accent"> ... </h1>
...

아이디 선택자

HTML 태그에서 사용할 수 있는 id 속성값을 이용해 선택자를 지정하는 방법
클래스 선택자가 문서에서 여러번 적용할 수 있는 반면, id선택자는 문서에서 한 번만 적용할 수 있습니다.
즉, HTML에서 id 속성값을 하나의 HTML 문서 안에서 고유한 값이어야 합니다.

👉 #아이디명

#accent {
	border: 1px solid black;
    	padding: 5px;
}
...
<h1 id="accent"> ... </h1>
...

기본 속성 선택자

속성과 값을 사용해 선택자를 지정하는 방법

a[href] {
    color: red;
}
a[target="_blank"] {
    color: green;
    font-weight: bold;
}
#google[href] {
    color: blue;
    font-style: oblique; /* 기울임체 */
}

예시)
a[href]{} : a 태그에 href 속성이 있는 요소 선택
#title[href]{} : id 속성값이 title이면서 href 속성이 있는 요소 선택
.title[href]{} : class 속성값이 title이면서 href 속성이 있는 요소 선택

특정 접미사

출처 : https://dasima.xyz/css-attribute-selector/

조합 선택자

조합 선택자는 기본 선택자와 함께 사용했을 때 선택자의 의미를 더욱 풍부하게 해주는 선택자 방법

그룹 선택자

여러 선택자를 하나로 그룹 지을 때 사용 합니다.
선택자와 선택자는 , 기호로 구분 합니다.

👉 선택자1, 선택자2, ... 선택자n {}

p, #title, .red {
            color : #f3a;
}

자식 선택자

부모 요소의 하위에 있는 자식 요소에 스타일을 적용할 때 사용
2개 이상의 선택자가 사용되며, 선택자와 선택자는 > 기호로 구분 합니다.

👉 부모 선택자 > 자식 선택자 {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .box > p {
        color: red;
    }
</style>
<body>
    <div class="box">
        <p>1번 항목 입니다.</p>
        <div>
            <p>2번 항목 입니다.</p>
        </div>
        <p>3번 항목 입니다.</p>
    </div>
</body>
</html>

자식 항목만 적용되기 때문에 중간에 div로 감싼 p 태그는 style에서 제외 된다.

인접 형제 선택자

+ 기호를 사용하여 인접한 형제 요소를 선택하는 방법
지정된 요소의 바로 다음 형제 요소만 선택할 수 있습니다.
예를 들어, p + span은 <p> 요소 바로 다음에 오는 <span> 요소를 선택합니다.
즉, 지정된 요소의 바로 다음 형제 요소'만' 선택!!!

👉 이전 선택자 + 대상 선택자 {}

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
   h1 + h2 {
    color:red;
   }
  </style>
</head>
<body>
  <h1>Test1</h1>
  <h2>Test2</h2>
  <h3>Test3</h3>
</body>
</html>

일반 형제 선택자

이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정
2개 이상의 선택자를 사용하며, 선택자와 선택자는 ~ 기호로 구분 합니다.
특정 요소 이후에 오는 모든 형제 요소에 스타일을 쉽게 적용할 수 있습니다. 이를 활용하면 특정 요소를 기준으로 스타일을 적용하는 것이 가능해집니다.

👉 이전 선택자 ~ 대상 선택자 {}

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
   h1 ~ h2 {
    color:red;
   }
  </style>
</head>
<body>
  <h1>Test1</h1>
  <h2>Test2</h2>
  <h2>Test2-1</h2>
  <h3>Test3</h3>
</body>
</html>

가상 요소 선택자

요소의 상태를 이용해 선택자를 지정하는 방법

👉 기준요소:가상 클래스 선택자 {}

링크 가상 클래스 선택자

a 태그에서 발생할 수 있는 링크 상태를 이용해 선택하는 방법

👉 :link : 한번도 방문하지 않은 링크일 때 선택

👉 :visited : 한번이라도 방문한 적이 있는 링크

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>링크 가상 클래스</title>
    <style>
      a:link {
        color:orange;
      }
      a:visited {
        color:green;
      }
    </style>
  </head>
  <body>
    <a href="https://www.naver.com">네이버</a>
    <a href="https://www.google.com">구글</a>
  </body>
</html>

동적 가상 클래스 선택자

사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택자를 지정하는 방법

👉 :hover : 요소에 마우스를 올리면 스타일 적용

👉 :active : 요소를 마우스로 클릭하고 있는 동안 스타일 적용

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>:active</title>
  <style>
    button:active{
      color:red;
    }
    button:hover{
      color:green;
    }

  </style>
</head>
<body>
  <button>active</button>
</body>
</html>

입력 요소 가상 클래스 선택자

입력 요소의 특정 상태를 이용해 선택자로 지정하는 방법

👉 input:focus : 입력 요소에 커서가 활성화되면 선택자로 지정

👉 input:checked : 체크 박스가 표시되어 있으면 인접한 형제 요소인 label 태그의 텍스트에 스타일 적용

👉 input:disabled : 상호작용 요소가 비활성화되어 있으면 스타일 적용

👉 input:enabled : 요소가 활성화되어 있으면 스타일 적용

input:focus {
            color: red;
        }
    
        input:checked + label {
            color: red;
        }
        input:disabled {
            background-color: #ccc;
        }
        input:enabled {
            background-color: gray;
        }

구조적 가상 클래스 선택자

요소의 구조와 위치에 따라 스타일을 적용하는 방법
요소의 부모, 자식, 형제, 인접 요소 등을 기준으로 스타일 적용

:first-child : 부모 요소의 첫 번째 자식 요소에 스타일을 적용

:last-child : 부모 요소의 마지막 자식 요소에 스타일을 적용

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <style>
	 li:first-child{
      color:red;
    }
    li:last-child{
      color:violet;
    }
  </style>
</head>
<body>
	<ul>
		<li>test 1</li>
		<li>test 2</li>
		<li>test 3</li>
		<li>test 4</li>
	  </ul>
</body>
</html>

:nth-child(n) : 부모 요소의 n번째 자식 요소에 스타일을 적용

:nth-last-child(n) : 부모 요소의 뒤에서부터 n번째 자식 요소에 스타일을 적용

:only-child : 부모 요소의 유일한 자식 요소에 스타일을 적용

:first-of-type : 동일한 태그명을 가진 형제 요소 중에서 첫 번째 요소에 스타일을 적용

:last-of-type : 동일한 태그명을 가진 형제 요소 중에서 마지막 요소에 스타일을 적용

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    p:first-of-type{
      color:red;
    }
  </style>
</head>
<body>
  <p>lorem 0</p>
  <div>
    <p>lorem 1</p>
    <p>lorem 2</p>
  </div>
  <div>
    <p>lorem 3</p>
    <p>lorem 4</p>
  </div>
</body>
</html>

:nth-of-type(n) : 동일한 태그명을 가진 형제 요소 중에서 n번째 요소에 스타일을 적용

:nth-last-of-type(n) :동일한 태그명을 가진 형제 요소 중에서 뒤에서부터 n번째 요소에 스타일을 적용

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>nth-of-type(n)</title>
  <style>
    p:nth-of-type(2){
      color:red;
    }
  </style>
</head>
<body>
  <p>lorem 0</p>
  <div>
    <p>lorem 1</p>
    <span>span 1</span>
    <p>lorem 2</p>
  </div>
  <div>
    <p>lorem 3</p>
    <span>span 2</span>
    <span>span 3</span>
    <p>lorem 4</p>
  </div>
</body>
</html>

:only-of-type : 동일한 태그명을 가진 형제 요소가 유일한 경우에 스타일을 적용

:root : 문서의 루트 요소에 스타일을 적용

다양한 선택자 조합

자주 사용하는 선택자 조합

div.box{}
=> class 속성값이 box인 div 태그

section#main{}
=> id 속성값이 main인 section 태그

가상 클래스와 하위 선택자, 자식 선택자 조합

(1) div:hover button{} 은 div 요소 내부에 있는 모든 button 요소에 대해 마우스가 div 요소 위에 있을 때 스타일을 적용하는 선택자 입니다. 이 선택자는 div 요소 내부에 있는 모든 button 요소에 대해 스타일을 적용하며, div 요소와 button 요소 사이에 다른 요소가 있어도 스타일이 적용됩니다.

(2) div:hover > button{} 은 div 요소의 직계 자식인 button 요소에 대해 마우스가 div 요소 위에 있을 때 스타일을 적용하는 선택자 입니다. 이 선택자는 div 요소의 직계 자식인 button 요소에 대해서만 스타일을 적용하며, 다른 요소가 있을 경우에는 스타일이 적용되지 않습니다.

Dinner 게임

https://flukeout.github.io/

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

저작자표시 비영리 변경금지 (새창열림)

'🎨 Frontend > HTML & CSS' 카테고리의 다른 글

CSS ⭐ ③ 필수 속성 - (2) 화면 배치 (1)	2023.03.15
CSS ⭐ ③ 필수 속성 - (1) 텍스트, 박스 모델 속성 (0)	2023.03.14
CSS - ① 기본 (0)	2023.03.13
HTML - ③ 웹 문서 구조를 만드는 시맨틱 태그 (0)	2023.03.13
HTML - 연습 문제(지원서, 주문하기 폼 만들기) (0)	2023.03.09