- 다양한 선택자는 CSS 핵심
- 선택자 : 기본적으로 태그, 클래스, 아이디 선택자 등이 있으며 그 외에
종속, 하위, 전체, 그룹선택자 등이 웹 개발 실무에서 많이 사용
선택자 { 속성: 속성값; }선택자 {
속성: 속성값;
속성: 속성값;
속성: 속성값;
}태그 선택자
HTML 태그를 선택자로 사용하여 속성을 지정하는 방식
html태그 { 속성: 속성값; }
실습
제목(h2) 의 폰트크기를 50px로 변경하세요.
font-size: 50px;
국가별 인터넷 속도 순위 테이블의 해더영역의 배경을 회색(#bfbfbf)으로 변경하세
요
<style>
h2 { font-size: 50px;}
table { background-color: #bfbfbf; }
</style>클래스 선택자
- 사용자가 직접 이름(class)을 만들어 선택자로 속성을 지정하는 방식
- 클래스 선택자 정의
- className { 속성: 속성값; }
- .(점)으로 시작하고 첫문자는 영문자로 시작해야 하며, 대소문자 구별
- 클래스 선택자는 클래스 속성에서 같은 클래스 이름을 가진 엘리멘트들이 적용 대상이 된다.
(태그 선택자는 페이지내 모든 태그에 적용)
아이디 선택자
- 사용자가 직접 이름(id)을 만들어 속성을 지정하는 방식
- 아이디 선택자 정의
#id { 속성: 속성값; }
- #(샵)으로 시작하고 첫문자는 영문자로 시작해야 하며, 대소문자 구별
클래스 선택자와 유사하나 차이점은 하나의 문서에 한번만 쓸 수 있다.
예) #container 라는 id는 한 문서에 한번만 쓸수있다.
#board 라는 id는 id이름이 다르므로 같은 문서에서 쓸 수 있다.
종속 선택자
- 태그, 클래스, 아이디 선택자가 결합된 형태의 선택자에 속성을 지정하는 방식
- 종속 선택자 예시
h1#head { … }
.headline.selected { … }
input#user-id.focused { …}
p.title { … }
- 태그에 결합된 형태는 태그중에 특정 아이디, 특정 클래스에만 적용 ulli(X) > ul 하고 li
- 클래스와 아이디에 모두 적용해서 스타일을 적용할 수 있지만, 너무 복잡한 조합은 피하는 것이 좋다.
하위 선택자
- 선택자 내부의 자손 선택자에 속성을 지정하는 방식
- 하위 선택자 예
p .txt1 { … }자식 선택자
- 선택자 내부의 자식 선택자에 속성을 지정하는 방식
- 자식 선택자 예
.red>.txt1 { … }하위 선택자 vs 자식 선택자
그룹 선택자
- 각각의 선택자를 그룹지어 속성을 지정하는 방식
- 선택자들 간에 공통적인 속성이 있는 경우 일괄 적용으로 편리하게 사용
- 그룹 선택자 예
.main h1, .main h2, .wrap p { … } 속성 선택자
- 특정 속성이나 특정 속성값을 가지고 있는 선택자에 속성을 지정하는 방식
input[type=“text”] {…}가상 클래스 (Pseudo)
a:hover -> 마우스의 커서가 올라가 있는 상태
a:active -> 마우스 커서를 클릭한 순간부터 놓기 직전까지 상태
a:link -> 링크를 클릭하지 않은 그냥 링크만 되어 있는 상태
a:visited -> 링크를 눌러서 방문한 후 상태
- hover, :active, :link, :visited 는 a 태그와 함께 링크를 데코레이션 할 때 많이 사용된다.
가상 요소 (Pseudo)
a:before -> 문장이 시작되기 전
a:after -> 문장이 끝난 다음
h2:before{content:"#"}
h2:after{content:"$"}
형제 선택자 (~) -> 덜엄격
- 어떤 요소의 형제 요소를 선택하는 선택자 입니다.
- h1의 뒤에 오는 형제 요소중 p 요소를 선택합니다.
h1 ~ p {…}인접 형제 선택자 (+) -> 엄격
- 어떤 요소의 형제 요소 중 첫번째 요소를 선택하는 선택자 입니다.
- h1의 뒤에오는 형제 요소 중 첫번째 p요소를 선택합니다.
h1 + p {…}전체 선택자
*(별표)
- 전체 엘리멘트를 뜻한다. (와일드 카드)
- 스타일이 적용되는 모든 엘리멘트에 일괄 적용하고자 할 때 사용한다.
예시 1)
* { margin:0; padding:0; } 예시 2)
body, div, ul, li, dl, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr,
textarea, button, form {
margin: 0; padding: 0;
}예시1과 예시2는 같은 표현.
