전체 선택자
- 스타일을 문서의 모든 요서에 적용할 때 사용함.
- 표시할 때는 별표(*)로 표시함
* { 속성: 값; }
- 마진과 패딩 : 브라우저 창에 바짝 붙지 않도록 문서 내용과 부라우저 테두리 사이에 여백을 약간 두는 것.
타입 선택자(요소 선택자)
- 특정 태그를 사용한 모든 요소에 스타일을 적용함.
태그명 { 스타일 규칙 }
클래스 선택자
- 특정 부분만 선택해서 스타일을 적용함.
.클래스명 { 스타일 규칙 }
- 클래스 스타일 : 클래스 선택자를 사용해 만든 스타일
- 이미 만들어둔 스타일을 적용할 때는 태그 안에 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 |