1. Selector란? (Tag, 전체, 그룹)
1-1. Selector (선택자)란?
- 어떤 HTML 요소에 스타일을 입힐지 지정하기 위한 것
Selector { property1 : value1; property2 : value2; }
-
하나의 HTML 파일에서 Selector에 해당하는 모든 요소에 CSS를 적용할 수 있음
- CSS, Javascript 모두 사용되는 개념
-
학습 방법 : 모든 선택자를 다 외울 수는 없음. 주요 선택자를 학습하고, 개발자도구로 확인했을 때 선택자를 해석하고 이해할 수 있어야 함
1-2. 기본선택자
1) Type Selector (Tag 선택자, 요소(Element) 선택자, 유형 선택자)
-
HTML 요소 이름을 적어주면 된다
-
어떤 HTML 요소에 스타일을 적용할지 지정
2) Universal Selector (전체 선택자)
-
* -
모든 HTML 요소에 적용되는 스타일
- 모든 요소에 적용되기 때문에 주의해서 사용해야 함
-
그냥 *만 쓰는 경우는 거의 없고, 다른 요소에 상속시켜서 쓸 수 있다.
- 예) div > *
-
참고) 앞으로 배우는 모든 선택자는 기본적으로 앞에 *이 생략되어있는 형태이다
- 예) .red == *.red
3) Group Selector (그룹 선택자)
-
, -
여러개를 동시에 선택해서 동일한 스타일을 적용하고 싶을 때
-
and와 같은 의미
-
CSS Rule의 중복을 피할 수 있고, 코드의 양을 줄일 수 있음
2. Id & Class Selector(선택자)
-
가장 많이 사용하는 선택자
-
ID Selector
-
문법 :
#[아이디이름] -
id라는 HTML 속성(Attribute)에 따라 요소를 선택 -
한 문서 내에 id는 중복없이 유일해야 함. 단 하나만!
-
-
Class Selector
-
문법 :
.[클래스이름] -
class라는 HTML 속성(Attribute)에 따라 요소를 선택 -
class는 중복 가능. 한 문서 내에 여러개 있어도 된다
-
참고) HTML 요소에 class 속성을 적어줄 때, 공백(space)으로 구분해서 여러개의 class를 줄 수 있다
-
<div class=”box highlight”> </div>
-
참고) id,class는 숫자로 시작할 수 없음. 영문자로 시작해야 함
-
참고) id 와 class의 네이밍 규칙(naming convention)
-
id : camelCase (Javascript 표준)
-
class : kebab-case (CSS 표준)
-
3. Attribute selector
-
HTML의 attribute 값으로 특정 요소를 선택할 수 있음
- 자주는 아니지만 종종 사용된다
-
[attr]- 해당 attr을 갖고있는 요소 선택
- 예)
a[target]:<a>태그 중 target 속성을 갖고있는 요소만 선택
-
[attr=value]- attr 의 값이 특정 value 인 요소 선택
- 예)
input[type=”submit”]:<input>태그 중 type 속성의 값이 submit인 요소만 선택
-
[attr~=value]- attr 의 값이 특정 value 가 아닌 요소 선택
-
[attr^=value]- ^(캐럿) : value로 시작하는 요소 선택 (prefix)
-
[attr$=value]- $(달러) : value로 끝나는 요소 선택(postfix)
-
[attr*=value]- *(star) : value를 적어도 하나포함하고 있는 요소 선택
4. 결합 선택자: 상속, 형제
-
상속
-
자손 결합자 (공백)
- 하위에 있는 태그, 즉 자식 태그들로 범위를 좁혀서 선택
-
자식 결합자 (>)
- 바로 아래 자식 태그만 좁혀서 선택
-
-
형제
-
일반 형제 결합자 (~)
-
내 뒤에 있는 형제 선택
- 형제 = 같은 레벨
-
예) span ~ p : span 뒤에 있는 p
-
-
인접 형제 결합자 (+)
- 바로 뒤에 있는 형제만 선택
- 예) span + p : span 바로 뒤의 p만 선택
-
형제를 선택할때는 ‘순서'가 중요함!
- 선택자1의 ‘뒤에’ 있는 선택자2를 선택
- [선택자1] ~ [선택자2]
-
5. 가상 클래스 선택자
-
HTML 요소의 상태가 사용자의 동작에 따라 변경되었을 때, 그에 따라 스타일을 변경할 수 있게 한다
- javascript없이 구현 가능!
-
예) (브라우저에서 기본적으로) a태그를 한번 클릭해서 방문 했으면, 보라색으로 보임
-
문법 - selector:가상_클래스 { }
-
a:link : 아직 방문한 적이 없는 링크
-
a:visited : 방문한적이 있는 링크
-
:hover : 마우스를 올렸을 때
- 마우스를 올린 대상에 스타일이 hover에 있는 선언 블록으로 변경
-
:active : 마우스를 눌러서 활성화되었을 때. 즉, 마우스를 ‘누르는' 순간. 클릭하려고 (아직)누르기만 한 상태
-
마우스를 눌렀다가 떼기 전까지의 상태
-
a, button 등에 주로 사용
-
-
:focus : 키보드의 tab키로 특정 요소가 포커싱되었을 때 or input을 입력하기 위해서 클릭했을 때
-
LVHA 순서 (:link - :visited - :hover - :avtive)
input
-html- <input type="button" value="저를 클릭하세요"> <input type="button" value="저를 클릭하세요"> <input type="text"> css input[type=button] { background-color: skyblue; border: none; } /* LVHA 순서 (:link - :visited - :hover - :avtive) */ /* hover: 마우스를 올린 대상에 스타일이 hover에 있는 선언 블록으로 변경 */ input[type=button]:hover { background-color: teal; color: white; } /* active: 마우스를 눌렀다가 떼기 전까지의 상태 */ input[type=button]:active { background-color: red; } /* focus: 요소가 포커싱 됐을때 */ input[type=button]:focus { background-color: blue; } input[type=text]:focus { background-color: blue; color: yellow; }
output
-
:disabled, :enabled, :checked
- input에서 주로 사용
- :disabled : 요소에 disabled 속성을 줘서 비활성화된 input
- :enabled : 활성화된 (일반적인, default) input
- :checked : checkbox, radio 등에서 사용자가 선택한 요소
-
이 외에도 매우 많음. MDN 등 참고
6. 가상 요소 선택자 (Pseudo-Element Selector)
-
실제로 존재하지 않는 가상의 요소를 추가해서 스타일을 적용
-
:: -
문법 : selector::가상요소선택자 { }
- 참고) CSS 구버전에서는 ::이 아닌 :였음
1) ::before, ::after
-
앞 or 뒤에 가상의 요소를 추가하여 스타일을 적용함
-
문법 : content라는 CSS 속성을 반드시 함께 추가해서 가상 요소의 컨텐츠를 만들어줘야 함
- content에는 일반 텍스트, 이미지 등이 들어갈 수 있음
-
예) 인기있는 메뉴에 BEST를 붙이고 싶을 때
input
html <div class="movie">Toy Story</div> <div class="movie favorite">Zootopia</div> <div class="movie">Inside Out</div> <div class="movie favorite">Coco</div> <div class="movie">Finding Nemo</div> css .favorite::before { content: '⭐'; }output
2) ::first-letter, ::first-line, ::selection
2-1) ::first-letter :
- 첫번째 글자
- 주의) 만약, ::before와 함께 사용하면, ::before의 컨텐츠에 first-letter가 적용된다
input
html <p class="lorem"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> css .lorem::first-letter { color: red; font-size: 30px; } ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ .lorem::before { content: 'BEFORE'; }output
2-2) ::first-line :
- (브라우저에서 보이는 기준으로) 첫번째 라인
input
html <p class="lorem"> Lorem ipsum dolor sit <br/> amet consectetur adipisicing elit. </p> css .lorem::first-line { color: red; font-size: 30px; }
2-3) ::selection :
- 마우스로 드래그해서 선택한 영역
input
css .lorem::selection { background-color: red; color: white; }
7. CSS Cascading : 상속, 우선순위
-
Cascading : 폭포같은, 계단식의, 위에서 아래로 흐르는, 연속적인
-
CSS 개발을 할 때 흔히 겪을 수 있는 실수 : 요소에 CSS를 줬지만 적용되지 않을 때
7-1. 상속
-
부모 요소에 적용되는 스타일은 자식 요소로 상속된다.
- 예) body에 font를 적용하면 default로 전체 요소에 적용된다.
-
대부분의 요소가 기본적으로 상속되지만, 일부 속성은 자식에게 상속되지 않는다 (예 - 배경 색, 배경 이미지, margin, padding 등)
7-2. 우선순위
1) 선언된 위치 : 브라우저는 HTML/CSS 코드를 위에서 아래로 해석한다
- 예) 브라우저 기본 스타일 < 외부 스타일 시트 < 내부 스타일 시트 < inline 스타일
2) 코드 위치 : 제일 마지막에 선언된 코드(CSS rule)이 적용된다.
3) Specificity(명시도) : 적용 범위가 더 구체적일수록 우선적으로 적용된다.
-
단순 tag로 지정된 스타일 < id/class/attribute 등 직접 지정한 스타일
-
id는 class보다 우선이다.
-
부모로부터 상속받은 속성은 내가 지정한 속성이 따로 없을 때만 적용된다.
- 즉, 내 요소에서 구체적으로 CSS rule을 정해주면 부모의 것이 아닌 나의 것을 따른다.
7-3. 상속 제어를 위한 전역 속성 값
- CSS 속성의 값(value)으로 아래 특수값을 지정해주면, 상속되어 적용되는 CSS를 의도적으로 끊어줄 수 있음
1) initial : CSS를 기본값(브라우저 초기값)으로 지정
color: initial; all:initial;
2) inherit : 모든 rule을 무시하고 무조건 상속을 받아 부모의 값을 따라가고자 할 때
color : inherit; color 속성은 무조건 부모를 따라가게 된다
3) unset
-
지금까지 영향받은 여러 CSS를 없애고 깔끔하게 초기화하고싶을 때 사용
-
부모로부터 상속받을 값이 존재할 때 : inherit
-
부모로부터 상속받을 값이 없을 때 : initial
