[CSS] 선택자

HTML,CSS

RegisterJ 2023. 10. 27. 02:55

기록의 목적 : 잊으면 다시 보기 위해서, 하찮은 내 정보가 누군가한테 도움이 되기를 바라며 정리합니다.

CSS 선택자

CSS는 꾸며주는 역할을 합니다. 그런데 어떤걸 꾸며줘야 하는지 지정을 해줘야 합니다. 근데 그 역할을 하는 것이 선택자 입니다. 그만큼 중요하면서 기본 입니다.

◯ 선택자 종류

▶ 클래스 선택자 : HTML 태그 속성으로 class 붙인 것을 뜻합니다.

▶ id 선택자 : HTML 태그 속성으로 id 붙인 것을 뜻합니다.

▶ HTML 태그 선택자 : HTML 태그 자체를 선택자로 사용한 것 입니다.

▶ 전체 선택자 : * 사용하여 모든 태그에 CSS를 적용할 수 있습니다.

▶ 모든 하위 선택자 : HTML 하위 태그들을 선택할 수 있습니다.

▶ 자식 선택자 : HTML 하위 태그들 중 바로 직계 자식 태그를 선택할 수 있습니다.

◯ 사용 방법

▶ 클래스 선택자 : 맨 앞 . 붙이고 클래스명을 사용하면 됩니다.

.클래스명{ CSS: 속성 };

▶ id 선택자 : 맨 앞 # 붙이고 아이디명을 사용하면 됩니다.

#아이디명{ CSS: 속성 };

▶ HTML 태그 선택자 : HTML 태그 자체를 선택자로 사용한 것 입니다.

/* HTML p태그에 CSS 속성을 적용하면 */

p{ CSS: 속성 };

▶ 전체 선택자 : * 사용하여 모든 태그에 CSS를 적용할 수 있습니다.

*{ CSS: 속성 };

▶ 모든 하위 선택자 : 스페이스바를 이용하여 HTML 하위 태그들을 선택할 수 있습니다.

<head>

  <style>
  
  	div p{ CSS: 속성};
    
  </style>
 
  
</head>
<body>

  <div>
  	<p>안녕하세요</p>
  </div>
  
</body>

▶ 자식 선택자 : HTML 하위 태그들 중 바로 직계 하위 태그를 선택하려면 > 사용하면 됩니다.

<head>

  <style>
  
  	div > p{ CSS: 속성};
    
  </style>
 
  
</head>
<body>

  <div>
    <p>
    	안녕하세요 <p>봉쥬르</p>
    </p>
  </div>
  
</body>

=> 이러면 '안녕하세요' 한테만 CSS 속성이 적용됩니다.