선택자 기초
1. 전체 선택자(*)
전체 선택자(universal selector)는 HTML 문서 내의 모든 요소를 선택합니다. html를 포함하는 모든 요소에 스타일을 적용합니다. *(별표, 애스터리스크)를 사용하여 지정할 수 있습니다.
보통 브라우저 마다 다른 사용자 에이전트 스타일에 적용되어있는 기본 스타일을 제거하기 위해서 주로 사용됩니다. 모든 요소에 스타일을 적용하기 때문에 페이지 로드 성능에 영향을 미칠 수 있습니다. 따라서 필요한 경우에만 사용하는 것이 좋습니다.
* {
margin: 0;
padding: 0;
}* {
margin: 0;
padding: 0;
}2. 타입(유형) 선택자 (<>)
타입 선택자(type selector)는 태그 선택자, 요소 선택자로도 불리며 특정 태그를 선택하여 스타일을 적용합니다. 아래 코드는 h1 태그와 p 태그를 선택하여 스타일을 적용합니다.
타입 선택자 또한 동일한 태그이면 모두 스타일이 적용되기 때문에 세부 스타일을 적용하기보다는 공통 스타일을 사용하는데 주로 사용됩니다. 따라서 디자인에 따라서 요소에 지정할 수 있는 클래스나 아이디 선택자를 사용하는 것을 권장합니다.
3. 아이디 선택자(#)
아이디 선택자(id selector)는 아이디를 사용하여 특정 요소를 선택합니다. # 뒤에 아이디를 작성하여특정 요소를 선택합니다. 아이디는 HTML 페이지 내에서 고유한 값을 가지기 때문에 한 개의 요소에만 스타일을 적용하기 때문에 재사용성은 떨어집니다.
아이디 속성은 주로 자바스크립트를 이용해서 기능을 추가하거나 해시 링크 이동에 사용됩니다.
라이브코로나스타일링을 위해 id 선택자를 사용하지 않습니다!
id는 문서 내에서 유일해야 하므로 같은 스타일을 여러 요소에 적용할 수 없습니다. 또한, id는 CSS에서 우선순위가 높아 나중에 스타일을 변경하거나 덮어씌우기 어려워 예상치 못한 결과를 불러올 수 있습니다. 따라서, 스타일을 적용할 때는 id 대신 class를 사용하여 유연하고 유지보수하기 쉬운 스타일링을 하는 것이 더 바람직합니다.
4. 클래스 선택자(.)
-
id, class는 숫자로 시작하면 안 됩니다!
.1class(X).class1(O)
-
하이픈(
-)과 언더바(_), 문자로만 시작할 수 있습니다..-class(O)._class(O).$color(X)
하나의 요소에 여러 개의 클래스를 적용하는 것도 가능합니다. 따라서 스타일을 세분화하고 여러 클래스를 적용하여 스타일을 추가할 수 있습니다.
5. 속성 선택자 ([])
속성 선택자는 HTML 요소의 속성을 기반으로 요소를 선택하는 강력한 도구입니다. 이를 통해 특정 속성을 가진 요소나 속성 값이 특정 패턴을 가진 요소를 선택할 수 있습니다.
[속성이름]: 해당 속성을 가진 모든 요소 선택[속성이름="속성값"]: 해당 속성의 속성값이 일치하는 모든 요소 선택[속성이름*="속성값"]: 특정 문자열을 포함하는 모든 요소를 선택합니다.
6. 그룹 선택자(,)
그룹 선택자(group selector)는 여러 개의 선택자를 쉼표(,)로 구분하여 한 번에 동일한 스타일을 적용할 수 있습니다. 이는 코드의 중복을 줄이고, 스타일을 일관되게 적용하는 데 유용합니다.
위 CSS는 아래와 동일한 코드입니다.
h1 {
color: blue;
}
h2 {
color: blue;
}
h3 {
color: blue;
}h1 {
color: blue;
}
h2 {
color: blue;
}
h3 {
color: blue;
}