오늘 수업에서는 CSS 선택자(Selector)를 집중으로 공부해보았다.
HTML을 꾸미려면 대상이 있어야 하는데 그 대상을 지정하는 방식이 선택자를 이용하는 것이다.
p {
color: red; /* 속성 : 속성값 - 선언 */
padding: 5px; /* 속성 : 속성값 - 선언 */
}단일 선택자
전체 선택자: 모든 요소를 선택
* {
color: red;
}태그 선택자: 태그 이름을 적어줌
클래스 선택자 (.)
- 한 요소에 여러 클래스를 사용할 수 있다. 그때는 공백으로 구분한다.
아이디 선택자 (#)
- 한 요소에 하나의 아이디를 사용한다.
한 요소가 여러 클래스와 하나의 아이디를 사용하는 것은 가능하다.
하지만 한 요소가 여러 개의 아이디를 사용하는 것은 불가능하다.
※ Emmet 팁
- li*5 하고 내용 적은 후 tab을 누르면 자동으로 생성된다.
- ul > li * 3 이렇게 치면 ul과 li를 한 번에 만들 수 있다.
복합 선택자
특수한 요소를 호출하고 싶을 때, 기본 선택자만으로는 선택이 불가능한 경우에 사용한다.
하위 선택자
후손 자식 요소들을 선택할 때 띄어쓰기를 사용한다.
div .orange {
color: red;
}- div에 있는 orange 클래스를 선택해준다.
자식 선택자
선택자 abc의 자식 요소 xyz를 선택한다.
ul > .orange=> 하위 선택자와 자식 선택자의 차이점
: 하위 선택자는 그 부모 아래에 있는 모든 하위 요소들을 일컫는다.
자식 선택자는 바로 아래 자식만 선택된다.
인접 형제 선택자 (+)
바로 옆의 형제 중 하나를 선택한다.
#tiger + li {
background-color: skyblue;
}예를 들어, 위와 같은 코드가 있으면 #tiger라는 아이디를 가진 요소 바로 다음에 오는 형제 요소 중 li 태그를 하나 선택하게 된다.
일반 형제 선택자 (~)
형제 중 지정한 아이디로부터 다음에 있는 형제들을 선택한다.
li.lion ~ li {
background-color: orange ;
}이 경우, 클래스가 lion인 li 요소 다음에 오는 모든 li 형제 요소들이 선택되어 배경 색상이 주황색으로 변경된다.
가상 클래스 선택자
사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소를 선택하는 것이다.
- 사용자의 행동에 따라 변화 (액션을 취할 때): :hover, :active, :focus, :visited
- 요소의 상황: :first-child, :last-child, :nth-child
- 부정 선택: :not
:hover: 선택한 요소에 마우스 커서가 올라가 있는 동안 선택한다.
:active: 선택한 요소에 마우스를 클릭하고 있는 동안 선택한다.
:focus: 선택한 요소가 포커스되면 선택한다.
:first-child 선택자가 형제 요소 중 첫째라면 선택.부모에서의 첫번째 요소만 선택된다.
:last-child 형제 요소중 막내라면 선택
:nth-child(2) 선택자가 형제 요소중 n번째라면 선택
:not(xyz) xyz가 아닌 요소 선택
.fruits:not(span) {
color:red;
} -> span이 아닌 요소를 선택할거야라는 뜻
가상 요소 선택자
선택된 요소의 앞뒤에 별도의 내용을 삽입하는 선택자이다. 반드시 content 속성을 사용해야 한다. html 문서의 특정 부분을 스타일링 하기 위해 사용한다. 실제로 html 문서에는 존재하지 않는 부분이지만 css통해 스타일 적용이 가능하다.예를 들어 쇼핑몰 페이지 메뉴에 hot이나 추천등을 넣기 위해 별도의 태그를 삽입하는 것이 아니라 이걸 활용하여 처리하면 편리하다.
.box::before {
content: "앞";
}
.box::after {
content: "뒤";
}가상 클래스 (:)와 가상 요소 (::)의 차이
CSS 사양이 발전하면서 가상 클래스와 가상 요소를 명확하게 구분할 필요성이 생겼다.
가상 클래스: 문서의 기존 요소 상태를 나타낸다.
가상 요소: 문서의 특정 부분을 생성하여 스타일링한다.
이 둘을 구분하기 위해서 ::로 표기하는 새로운 표기법을 도입하였다.
속성 선택자
지정한 특정 속성을 가지고 있는 태그를 선택하는 선택자이다.솔직히 이 선택자는 사용한 적이 없어서 매우 헷갈렸다. 영어 이름 찾아보니까 attribute selector라고 한다.
예를 들어 아래 코드에서 첫 번째 코드는 type 속성이 password로 설정된 요소들을 선택해주는 것이고, 두 번째는 disabled 속성이 있는 요소들을 선택해주는 것이다. 세 번째는 placeholder 속성이 "이름"으로 설정된 요소를 선택해주는 것이다. 네 번째는 placeholder 속성이 없는 input 요소를 선택해주는 것이다.
[type="password"] {
color: red;
}
[disabled] {
background-color: red;
}
[placeholder="이름"]{
background-color: orange;
}
input:not([placeholder]){
background-color: blue;
}실습에서 이렇게 checked되었을 때 각 색깔에 맞게 background-color바뀌는 기능을 만들었어야 했다.
내가 쓴 방식은 아래와 같다.
#red:checked + label{
background-color:red;
}#red라는 아이디를 가진 요소 중 checked 상태인 경우, 바로 다음에 오는 형제 label 요소의 background-color를 빨간색으로 바꾼다. 여기서 :는 특정 상태나 조건을 지정하는 가상 클래스 선택자를 도입하는 기호이다. 다른 분들이 한 코드 살펴보니까 이렇게도 작성 가능하다.
input[type="checkbox"]#red:checked + label {
background-color:red;
}type이 checkbox인 input를 고른뒤 red를 아이디로 가지고 checked가 되어있으면 그 옆의 label의 배경색깔을 빨간색으로 해준다라는 뜻이다.더 구체적으로 쓰는 방법이다.
CSS 색상
CSS에서는 색상을 표기할 때 세 가지 방법이 있다.
색상 키워드
red, blue, aqua, white16진수 코드
(#xxxxxx): 0~9, a, b, c, d, e, f로 표현한다.
#ffffff: red(ff), green(ff), blue(ff) → white
#000000: red(00), green(00), blue(00) → blackrgb
(0~255, 0~255, 0~255)
rgb(255, 255, 255) → white
rgb(0, 0, 0) → black
CSS 우선순위
동일한 요소에 여러 스타일이 적용될 때 우선순위 규칙이 있다.
!important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자
인라인 스타일이 제일 우선순위가 높다.
느낀점
복합 선택자를 어렴풋이 쓰고는 있었는데 이번에 정리하면서 명확히 개념이 정리되었다. 그리고 속성 선택자는 아예 공부한적이 없어서 실습시간에 관련 실습하는데 조금 헷갈렸었다.블로그 정리하면서 검색도 하고 공부해서 이제는 개념 이해하게 되어서 좋다.
