[CSS3] 자주 사용하는 선택자 정리 [selector : 태그, 클래스, id, 그룹 등]

728x90

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

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

* { 속성: 속성 값; ... }

특정 태그가 쓰인 모든 요소에 스타일을 적용한다.

/* 태그 { 스타일 } */
p {
    font-size:12px; /* 글자 크기 */
    font-family:돋움; /* 글꼴 */
}

특정 부분에만 스타일을 적용할 때 사용
→ 적용하려는 태그에 클래스를 붙여줘야 한다.

/* .클래스명 { 스타일 } */
.bluetext {
    color:blue; /* 글자 색 */
}

클래스 선택자와 같이 특정 부분에만 스타일을 적용한다.
→ 클래스 선택자와는 다르게 id 선택자는 문서 내에서 한 번만 적용할 수 있다.

/* #아이디명 { 스타일 } */
#container {
    width:600px; /* 너비 */
    padding:15px; /* 테두리와 내용 사이의 여백 */
    border:1px dotted gray; /* 테두리 스타일 */
}

둘 이상 요소에 같은 스타일 적용하고 싶을 때 사용한다.
→ 쉼표(，)로 구분해 여러 선택자를 나열한다.

/* 이름1, 이름2, ... { 스타일 } */
h1, h2 {
    text-align:center; /* 가운데 정렬 */
}

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

728x90