3D Web Developer/Web & MarkUp

[ Web & MarkUP ] CSS 선택자들.

안다미로 : 담은 것이 그릇에 넘치도록 많게. 2024. 10. 27. 17:02

 

 

[ Web & MarkUP ] CSS 선택자들.

 

 

 

∇ CSS의 선택자들.

목  차


1. 전체 선택자
2. 태그 선택자
3. 클래스 선택자
4. 아이디 선택자
5. 기본 속성 선택자
6. 조합 선택자 사용하기.
7. 가상 요소 선택자 사용하기
8. 가상 클래스 선택자 사용하기
9. 다양한 선택자 조합하기
10. 속성 선택자
11. 복습

 

 

 

 CSS 문법은 크게 선택자와 선언부로 구성이 됩니다.

 

그 중 선택자는 CSS를 적용할 태그(요소)를 지정하는 문법적인 영역이며

 CSS는 선택자를 지정하는 다양한 방법들을 제공합니다.

 

 

 

1. 전체 선택자.

      : 전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 

        한 번에 선택자로 지정하는 방법으로    * 기호를 사용합니다.

* {
	  color: red;
  }

 

 

2. 태그 선택자.

      : HTML 태그명으로 선택자를 지정하는 방법입니다.

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

<div>Test
  <div class="KK">KK</div>
</div>
div {
  width : 200px;
  height: 200px;
  background-color: royalblue;
  color: white;
}

 

 

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

      : 태그(타입) 선택자를 지정하면 그 태그를 사용한 모든 요소에 스타일을 적용 가능합니다.

         

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

 

                  . 클래스명 {스타일 규칙 }

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    p {
      font-style: italic;  /* 이탤릭체 */
    }
    .accent {
      border:1px solid #000;  /* 테두리 */
      padding:5px;  /* 테두리와 내용 사이의 여백 */
    }
    .bg {
      background-color:#ddd;    /* 배경색 */  
    }
  </style>
</head>
<body>
  <div>
    <h1 class="accent bg">레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
  </div>
</body>
</html>

 

 

4. 아이디 선택자

       : 아이디 선택자는 HTML 태그에서 사용할 수 있는 id 속성값을 이용해, 선택자를 지정하는 방법입니다.

 

       이 때 속성값 앞에는 #기호를 붙여서 구분 합니다.

        클래스 선택자가 문서에서 여러번 적용할 수 있는 반면에, 'id선택자는 문서에서 한 번만 적용' 가능합니다.

 

      즉, HTML에서 id 속성값은 하나의 HTML 문서 안에서 고유한 값이어야 합니다.

 

            #아이디명 { 스타일 규칙 }

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    #container {
      width:500px;  /* 너비 */
      margin:10px auto;  /* 바깥 여백 */
      padding:10px;  /* 테두리와 내용 사이 여백 */ 
      border:1px solid #000;  /* 테두리 */
    }    
  </style>
</head>
<body>
  <div id="container">
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
  </div>
</body>
</html>

 

 

5. 기본 속성 선택자.

       : 속성 선택자는 HTML 태그에서 사용 할 수 있는 속성과 값을 사용해, 선택자를 지정하는 방법입니다.

 

       √ a 태그에 href 속성이 사용된 요소만 선택해 색상 변경.

              :   [속성] {스타일 규칙}

<style>
	a[href]{
		color:red;
	}
</style>

...
<a href="http://naver.com">naver</a>

 

       √ a 태그에 target 속성값이 _blank인 요소에 적용.

              :   [속성=값] {스타일 규칙}

<style>
	a[target="_blank"]{
		color:red;
	}
</style>

...
<a href="http://naver.com" target="_blank">naver</a>
속성 선택자는 다른 선택자와 함께 사용 할 수 있습니다.   
속성 선택자는 아이디. 태그, 클래스 선택자와 함께 사용할 수도 있고, 단독으로 사용할 수고 있습니다.
a[href]{}
#title[href]{} : id 속성값이 title이면서 href 속성이 있는 요소 선택
.title[href]{} : class 속성값이 title이면서 href 속성이 있는 요소 선택

 

 

6. 조합 선택자 사용하기.

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

 

 

      ∇ 6 - 1. 그룹 선택자.

                      : 그룹 선택자는 여러 선택자를 하나로 그룹 지을 때 사용합니다.

                          선택자와 선택자 사이는    , 기호로 구분합니다.

                   @ 선택자1, 선택자2, .....선택자n   {CSS 코드}

p {
	color:red;
}
#title {
	color:red;
}
.red {
	color:red;
}
...
<!-- 선언부가 같기 때문데 한번에 선언 가능 -->
p, #title, .red {
	color:red;
}

 

      ∇ 6 - 2. 자식 선택자.

                      : 자식 선택자는 부모 요소의 하위에 있는 자식 요소에 스타일을 적용할 때 사용 합니다.

                          2개 이상의 선택자가 사용되며, 선택자와 선택자는   >기호로 구분합니다.

                   @ 부모 선택자 > 자식 선택자 {CSS 코드}

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>자식 선택자(Child Selector)</title>
  <style>
    .box > p{
      color:red;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>lorem 1</p>
    <div>
      <p>lorem 2</p>
    </div>
    <p>lorem 3</p>
  </div>
</body>
</html>

 

      ∇ 6 - 3. 인접 형제 선택자.

                      : CSS 인접 형제 선택자( Adjacent Sibling Selector)는   + 기호를 사용하여,

                         인접한 형제 요소를 선택하는 방법입니다.

 

                        이 선택자를 사용하면, 지정된 요소의 바로 다음 형제 요소만 선택 가능합니다.

                         ex ) **p  + span**은  **<p>**요소 바로 다음에 오는 **<span>** 요소를 선택합니다.

                   @ 이전 선택자 + 대상 선택자 {CSS코드}

<!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>

 

 

      ∇ 6 - 4. 일반 형제 선택자.

                      : 일반 형제 선택자는 이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정 합니다.

                        2개 이상의 선택자를 사용하며,  선택자와 선택는   ~기호로 구분을 합니다.

 

                        일반 형제 선택자를 사용하면, 특정 요소 이후에 오는 모든 형제 요소에 

                        스타일을 쉽게 적용 가능합니다.

 

                        이를 활용하면, 특정 요소를 기준으로 스타일을 적용하는 것이 가능해집니다.

 

                 @ 이전 선택자 ~ 대상 선택자 {CSS코드}

<!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>Test3</h2>
</body>
</html>

 

 

 

7. 가상 요소 선택자 사용하기

      CSS 가상 요소 선택자( Pseudo - element Selector)는 요소의 특정 부분에 스타일을 적용하는 방법입니다.

 

      가상 요소 선택자는 콜론(;)으로 시작하며, 요소의 내용이 아닌 요소의 특정 부분에 스타일을 적용합니다.

 

           @ 기준 선택자 :: 요소선택자{CSS 코드}

                   - 가상 요소 선택자에는 ::before,  ::after, ::first-letter, ::first-line 등이 있습니다.

 

                     -  ::before는 요소의 내용 시작 부분에 가상 요소를 추가하여 스타일을 적용합니다.

                     -  ::after는 요소의 내용 끝 부분에 가상 요소를 추가하여 스타일을 적용합니다.

<!DOCTYPE html>
<html>
<head>
	<title>Pseudo-element Selector Example</title>
	<style>
		h1::before {
			content: "★";
			color: red;
		}
	</style>
</head>
<body>
	<h1>Heading</h1>
</body>
</html>

 

 

8. 가상 클래스 선택자 사용하기

       가상 클래스 선택자는 요소의 상태를 이용해 선택자를 지정하는 방법입니다.

           @ 기준 요소 :가상클래스 선택자 {CSS코드 }

 

            √ 링크 가상 클래스 선택자.

                   : 링크 가상 클래스 선택자는 a 태그에서 발생할 수 있는 링크 상태를 이용해, 선택하는 방법.

<!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>

 

 

            √ 동적 가상 클래스 선택자.

                   : 동적 가상 클래스 선택자는 사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택자를 지정.!

 

동적 가상 클래스

 

<!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>

 

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

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

 

입력 요소 가상 클래스

 

 

 

             ○   : focus 

                      - 입력 요소에 커서가 활성화되면, 스타일을 적용.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>:active</title>
  <style>
   input:focus {
    color:red;
   }
  </style>
</head>
<body>
  <label>입력 <input type="text"></label>
</body>
</html>

 

             ○   : checked 

                      - 체크 박스가 선택되어 있으면 인접한 형제 요소인 label 태그의 텍스트에 스타일을 적용.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>:checked</title>
  <style>
	input:checked + label {
		color:red;
	}
  </style>
</head>
<body>
	<input type="checkbox" id="userid">
	<label for="userid">아이디</label>
</body>
</html>

 

             ○   : disabled

                      - 상호 작용 요소가 비활성화되어 있으면 스타일을 적용.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <style>
	input:disabled,
	button:disabled {
		background-color: #ccc;
	}
  </style>
</head>
<body>
	<input type="text" disabled>
	<button disabled>버튼</button>
</body>
</html>

 

             ○   : enabled

                      - 요소가 활성화되어 있으면 스타일을 적용

 

            √ 구조적 가상 클래스 선택자.

                   : CSS 구조적 가상 클래스 선택자(Structural Pseduo-class Selector)는

                     요소의 구조와 위치에 따라 스타일을 적용하는 방법입니다.

                       요소의 부모, 자식, 형제, 인접 요소 등을 기준으로 스타일을 적용합니다.

 

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

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

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

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

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

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

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

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

                        ◐ :nth-last-of-type(n) 는 동일한 태그명을 가진 형제 요소 중에서

                                                                 뒤에서부터 n 번째 요소에 스타일을 적용.

                        ◐ :only-of-type 는 동일한 태그명을 가진 형제 요소 중에서 유일한 요소에 스타일을 적용.

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

 

:first-child 선택자는 부모인 E 요소의 첫 번째 자식 요소를 선택하고, :last-child 선택자는 마지막 자식 요소를 선택 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <style>
	 li:first-child{
      color:red;
    }
    li:last-child{
      color:yellow;
    }
  </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) 선택자는 E 요소가 부모의 모든 자식 요소 중 n번째 자식 요소가 맞으면 선택 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>nth-child(n)</title>
  <style>
    p:nth-child(1){
      color:red;
    }
  </style>
</head>
<body>
  <p>lorem 0</p> /* 부모인 body 태그의 첫 번째 자식 요소가 p 태그이므로 스타일 적용 */
  <div>
    <p>lorem 1</p>  /* 부모인 div 태그의 첫 번째 자식 요소가 p 태그이므로 스타일 적용 */
    <p>lorem 2</p>
  </div>
  <div>
    <p>lorem 3</p> /* 부모인 div 태그의 첫 번째 자식 요소가 p 태그이므로 스타일 적용 */
    <p>lorem 4</p>
  </div>
</body>
</html>

 

:nth-of-type(n) 선택자는 부모 요소의 자식 요소 중 n번째로 등장하는 E 요소를 선택합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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>

 

:first-of-type 선택자는 부모의 자식 중에서 첫 번째로 등장하는 E 요소를 선택하고,

:last-of-type 선택자는 부모의 자식 중에서 마지막에 나오는 E 요소를 선택합니다.

 

<!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>

 

 

9. 다양한 선택자 조합하기.

 

div:hover button{}

div 요소 내부에 있는 모든 button 요소에 대해 마우스가 div 요소 위에 있을 때 스타일을 적용하는 선택자입니다.

이 선택자는 div 요소 내부에 있는 모든 button 요소에 대해 스타일을 적용하며,

div 요소와 button 요소 사이에 다른 요소가 있어도 스타일이 적용됩니다.

 

div:hover > button{}

 div 요소의 직계 자식인 button 요소에 대해 마우스가 div 요소 위에 있을 때 스타일을 적용하는 선택자입니다.

이 선택자는 div 요소의 직계 자식인 button 요소에 대해서만 스타일을 적용하며,

다른 요소가 있을 경우에는 스타일이 적용되지 않습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:hover > button{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>Text</p>
        <button>Button 1</button>
        <span>
          <button>Button 2</button>
        </span>
      </div>
</body>
</html>

 

 

 

 

9. 속성 선택자.

   속성 선택자는 태그 안에서 사용하는 속성값에 따라서 요소를 선택하는 역할을 합니다.

 

   속성값의 조건에 따라 특정 부분만 선택하기 쉬우므로 상황에 맞는 스타일을 지정하기 쉽습니다.

 

@  a[href] {…}

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
   ul {
		 list-style:none;
   }
	 li {
		 width:120px;	 
		 display:inline-block;
		 margin:10px;
	 }
		li a {
			padding: 5px 20px;
			font-size: 14px;
			text-decoration: none;
			font-weight: bold;
		}
	 a[href] {
		 background:yellow;
		 border:1px solid #ccc;
		 font-weight:normal;
	 }
</style>
</head>

<body>
	<ul>
		<li><a>메인 메뉴 : </a></li>
		<li><a href="#">메뉴 1</a></li>
		<li><a href="#">메뉴 2</a></li>
		<li><a href="#">메뉴 3</a></li>
		<li><a href="#">메뉴 4</a></li>
	</ul>
  </body>
 </html>

 

[속성 = 속성값]는 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일 지정

 

 

 

 

10. 복습

CSS 선택자는 HTML 문서 내의 요소를 선택하고, 해당 요소에 스타일을 적용하기 위한 방법입니다. CSS 선택자는 HTML 요소의 이름, 클래스, ID, 속성 등을 기반으로 요소를 선택할 수 있습니다.

 

  • 전체 선택자(*)는 HTML 문서 내의 모든 요소를 선택합니다.
  • 태그 선택자는 HTML 요소의 태그 이름을 기반으로 선택합니다.
  • 클래스 선택자는 HTML 요소의 **class**속성 값을 기반으로 선택합니다. 클래스 이름 앞에는 **.**을 붙여서 표현합니다.
  • ID 선택자는 HTML 요소의 **id**속성 값을 기반으로 선택합니다. ID 이름 앞에는 **#**을 붙여서 표현합니다.
  • 후손 선택자는 상위 요소와 하위 요소를 결합하여 선택합니다. 후손 선택자는 상위 요소 뒤에 빈 칸으로 구분하여 하위 요소를 표기합니다.
  • 자식 선택자는 상위 요소의 바로 아래에 있는 하위 요소만 선택합니다. 자식 선택자는 상위 요소와 하위 요소**>**기호로 구분하여 표기합니다.
  • 인접 형제 선택자는 같은 부모 요소를 가진 두 개의 요소 중, 첫 번째 요소의 바로 다음에 오는 두 번째 요소만 선택합니다. 인접 형제 선택자는 선택자들을 **+**기호로 구분하여 표기합니다.
  • 일반 형제 선택자는 같은 부모 요소를 가진 두 개의 요소 중, 첫 번째 요소 이후에 있는 모든 두 번째 요소를 선택합니다. 일반 형제 선택자는 선택자들을 **~**기호로 구분하여 표기합니다.

 

CSS 가상 요소 선택자는 HTML 문서에 존재하지 않는 가상의 요소를 선택하기 위한 방법입니다. 가상 요소 선택자는 콜론(:) 기호로 구분하여 표기합니다.

  • **::before**가상 요소 선택자는 선택한 요소의 가장 앞 부분에 새로운 내용을 추가합니다.
  • **::after**가상 요소 선택자는 선택한 요소의 가장 뒷 부분에 새로운 내용을 추가합니다.

 

CSS 가상 클래스 선택자는 HTML 요소의 특정 상태를 선택하기 위한 방법입니다. 가상 클래스 선택자는 콜론(: ) 기호로 구분하여 표기합니다.

  • :hover가상 클래스 선택자는 마우스 커서가 선택한 요소 위에 있을 때의 상태를 선택합니다.
  • :active가상 클래스 선택자는 선택한 요소가 활성화된 상태일 때를 선택합니다.
  • :focus가상 클래스 선택자는 선택한 요소가 포커스를 받았을 때의 상태를 선택합니다.
  • :link가상 클래스 선택자는 방문하지 않은 링크에 대해 선택합니다.
  • :visited가상 클래스 선택자는 방문한 링크에 대해 선택합니다.
  • :disabled가상 클래스 선택자는 입력 요소가 비활성화된 상태일 때를 선택합니다.
  • invalid가상 클래스 선택자는 입력 요소의 값이 유효하지 않을 때의 상태를 선택합니다.
  • :checked가상 클래스 선택자는 선택 가능한 입력 요소 중 체크되어 있는 상태를 선택합니다.
  • :nth-child(n)가상 클래스 선택자는 선택한 요소 중, n번째 요소를 선택합니다.
  • :first-child가상 클래스 선택자는 선택한 요소 중, 첫 번째 요소를 선택합니다.
  • :last-child가상 클래스 선택자는 선택한 요소 중, 마지막 요소를 선택합니다.
  • :nth-of-type(n)가상 클래스 선택자는 선택한 요소 중, 같은 타입의 요소 중 n번째 요소를 선택합니다.

 

'3D Web Developer > Web & MarkUp' 카테고리의 다른 글

[ Web & Mark UP ] HTML 입력 양식들.-[1]  (4) 2024.10.28
[ Web & Mark UP ] HTML 필수 태그 정리해보기 - [ 2 ]  (0) 2024.10.27
[ Web & Mark UP ] CSS 문법 정리  (5) 2024.10.23
[ Web & Mark UP ] CSS 기본 정리.  (1) 2024.10.23
[ Web & Mark UP ] HTML 필수 태그 정리해보기 - [1]  (5) 2024.10.22

'3D Web Developer/Web & MarkUp'의 다른글

  • 현재글[ Web & MarkUP ] CSS 선택자들.

관련글

티스토리툴바