- 자주 사용하는 선택자 정리

1. 전체 선택자(universal selector)

모든 요소에 적용. 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다.
→ 전체 선택자로는 ＊를 사용한다.
* { 속성: 속성 값; ... }

2. 태그 선택자(tag selector)

특정 태그가 쓰인 모든 요소에 스타일을 적용한다.
/* 태그 { 스타일 } */
p {
    font-size:12px; /* 글자 크기 */
    font-family:돋움; /* 글꼴 */
}

3. 클래스 선택자(class selector)

특정 부분에만 스타일을 적용할 때 사용
→ 적용하려는 태그에 클래스를 붙여줘야 한다.
/* .클래스명 { 스타일 } */
.bluetext {
    color:blue; /* 글자 색 */
}

4. id 선택자

클래스 선택자와 같이 특정 부분에만 스타일을 적용한다.
→ 클래스 선택자와는 다르게 id 선택자는 문서 내에서 한 번만 적용할 수 있다.
/* #아이디명 { 스타일 } */
#container {
    width:600px; /* 너비 */
    padding:15px; /* 테두리와 내용 사이의 여백 */
    border:1px dotted gray; /* 테두리 스타일 */
}

5. 그룹 선택자

둘 이상 요소에 같은 스타일 적용하고 싶을 때 사용한다.
→ 쉼표(，)로 구분해 여러 선택자를 나열한다.
/* 이름1, 이름2, ... { 스타일 } */
h1, h2 {
    text-align:center; /* 가운데 정렬 */
}

 

참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱

티스토리툴바