기본 선택자

전체 선택자

  • 스타일을 문서의 모든 요서에 적용할 때 사용함. 
  • 표시할 때는 별표(*)로 표시함
* { 속성: 값; }
  • 마진과 패딩 : 브라우저 창에 바짝 붙지 않도록 문서 내용과 부라우저 테두리 사이에 여백을 약간 두는 것.

 

타입 선택자(요소 선택자)

  • 특정 태그를 사용한 모든 요소에 스타일을 적용함.
태그명 { 스타일 규칙 }

 

클래스 선택자

  • 특정 부분만 선택해서 스타일을 적용함.
.클래스명 { 스타일 규칙 }
  • 클래스 스타일 : 클래스 선택자를 사용해 만든 스타일
  • 이미 만들어둔 스타일을 적용할 때는 태그 안에 class="클래스명" 입력
  • 하나의 요소의 두개 이상의 클래스 적용도 가능함.
// 앞에 이미 .accent .bg라는 클래스가 선언이 되었다고 가정

<h1 class = "accent bg">내용입력</h1> // 클래스가 적용이 되었음.

 

id선택자

  • 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 수 있음.
  • 마침표(.)대신 샵(#)기호를 사용함. 
#아이디명 { 스타일 규칙 }
  • 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면, id선택자는 문서에서 한 번만 적용할 수 있다.
<style>
	#container {
    	(내용생략)
    }
</style>

<div id = "container"> // cotainer에 있는 스타일 적용됨

그룹 선택자

  • 같은 스타일을 가진 선택자를 하나로 합쳐서 선언하게 할 수 있게 함.
선택자1, 선택자2 { 스타일 규칙 }

 

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

CSS  (0) 2022.12.17
글꼴 관련 스타일  (0) 2022.11.25
캐스케이딩 스타일 시트(cascading style sheet)  (0) 2022.11.25
스타일과 스타일 시트  (0) 2022.11.25