CSS의 기본 선택자
전체 선택자 : *
웹 문서의 전체의 스타일을 초기화할 때 자주 사용한다. (주로 마진과 패딩을 없애거나 할 때)
<style>
* {
margin: 0;
}
</style>타입 선택자 (type selector)
<p>태그와 같이 특정 태그로 쓰여진 모든 요소에 일괄적으로 적용할 때 사용하는 선택자이다.
※ 타입 선택자(type selector)와 태그 선택자(tag selector), 요소 선택자(element selector)는 일반적으로 같은 의미다.
하지만 W3C 공식 문서에서는 type selector라는 명칭을 사용하니 참고.
p {
font-style: italic;
}클래스 선택자 (class selector)
특정 클래스에만 CSS를 적용할 때 사용한다.
.classname {
font-size: 10px;
}참고로 하나의 태그에 두 개 이 상의 클래스를 지정할 수 있고, 공백으로 이어나가면 된다. 이 경우 .classname처럼 두 가지 이상의 CSS의 영향을 받더라도 모두 적용된다.
<h1 class="classname noname"></h1>ID 선택자
클래스 선택자와 다르게 ID 선택자는 문서에서 한 번만 적용할 수 있다. #id {스타일규칙}과 같은 형태로 CSS를 사용할 수 있고, ID선택자는 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 자바스크립트를 적용할 때 요소를 구분할 용도로 사용한다.
<style>
#container {
width: 500px;
margin: 10px auto; /* 중앙 배치 */
padding: 10px;
border: 1px solid #000;
}
</style>
<body>
<div id="container">
</body>스타일 규칙은 한 번에 사용 가능
h1 {
text-align: center;
}
p {
text-align: center;
}
/* 위와 같이 타입 선택자는 다르지만 스타일 규칙이 같은 것은 중복을 피하기 위해 아래와 같이 쉼표로 구분해서 한 줄로 작성 가능 */
h1, p {
text-align: center;
}
참고 : 웹 표준의 정석 (고경희 저)
'Programing > CSS' 카테고리의 다른 글
| 글꼴 관련 스타일(font-famliy, font-size 등) (0) | 2024.02.26 |
|---|---|
| 케스케이딩 스타일 시트 (0) | 2024.02.26 |
| CSS (Cascading Style Sheets)의 의미 (0) | 2024.02.26 |
| CSS Grid (0) | 2024.02.24 |
| 부트스트랩 사용 (0) | 2024.02.22 |
댓글