[CSS] CSS란? + Selectors (선택자) 알아보기

 

CSS란?

정의

• HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다.
• Cascading Style Sheets의 약자이다. cascade는 '폭포'라는 뜻으로, cascading이란 정의되어 있는 세부적인 정의가 있다면 해당 값을 사용하고, 정의되어 있는 게 없다면 다음의 기본으로 지정되어 있는 것으로 넘어가는 것을 말한다.

 

 

웹 사이트의 스타일링

＊ 우선 순위는 ↓ 이 방향이다. 이 흐름이 바로 cascading!

Author style	개발자가 작성한 CSS 파일 ▪️ 태그 선택자 → 클래스 선택자 → 아이디 선택자 → 인라인스타일방식 → !important ▪️ cascading의 연결고리를 끊어내는 방법은 !important이지만, 가능하면 쓰지 않는게 좋다.
User style	darkmode를 쓸 것인지와 같이 유저가 커스터마이징한 스타일
Browser	브라우저 상에서 기본적으로 지정된 스타일

 

 

 

---

선택자 (Selectors)

HTML에서 어떤 태그를 고를 것인지 규정하는 문법

 

 

CSS의 기본 구성

selector {
  property: value;
}

/* 구체적으로 태그에 더 가깝게 적은 css가 우선순위가 더 높음 */

 

 

영역 관련 코드 예시

 

 

기본선택자

Universal	*	모든 태그 고르기
type	Tag	태그 고르기 (ex. div)
ID	#id	해당 id값 고르기
Class	.class	해당 class 고르기
State	:	태그 옆에 : fmf ekfdktj rhfmrl
Attribute	[]	해당 속성값 고르기

 

 

기본 선택자 예시

 

 

 

속성선택자

attr	▪️ attr이라는 이름의 특성을 가진 요소 선택
attr = value	▪️ attr이라는 이름의 특성값이 정확히 value인 요소 선택
attr ~= value	▪️ attr이라는 이름의 특성값이 정확히 value인 요소 선택 ▪️ attr 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있음
attr =| value	▪️ attr이라는 특성값을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 '-' 문자가 곧바로 따라 붙는 요소 선택 ▪️ 보통 언어 서브 코드(en-US, ko-KR, ...)가 일치하는지 확인할 때 사용
attr ^= value	▪️ attr이라는 특성값을 가지고 있으며, 접두사로 value가 포함되어있는 요소 선택
attr $= value	▪️ attr이라는 특성값을 가지고 있으며, 접미사로 value가 포함되어있는 요소 선택
attr *= value	▪️ attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 해당 요소 선택
attr operator value i|I	▪️ 괄호를 닫기 전에 'i' 혹은 'I'를 붙여주면 값의 대소문자를 구분하지 않음
attr operator value s|S	▪️ 괄호를 닫기 전에 's' 혹은 'S'를 붙여주면 값의 대소문자를 구분함

 

 

자손선택자와 후손선택자

a > b	a 요소의 자손들 중에서 b 요소들만 선택
a b	a 요소의 후손 (모든 하위 요소)들 중에서 b 요소들만 선택

 

 

동위선택자

a + b	a 요소 뒤에 b 요소 하나만을 선택
a ~ b	a 요소 뒤에 모든 b 요소 전부 선택

 

 

의사클래스(수도 클래스, pseudo-class)

선택하고자 하는 HTML 요소의 특별한 상태(state)를 명시할 때 사용한다.

✨ [예시]
　  선택자:의사클래스이름 { 속성: 속성값; }
　  선택자.클래스이름:의사클래스이름 { 속성: 속성값; }
　  선택자#아이디이름:의사클래스이름 { 속성: 속성값; }

 

 

CSS에서 자주 사용하는 의사 클래스

클래스 구분	의사 클래스	설명
동적 의사 클래스 (dynamic pseudo-classes)	:link	사용자가 아직 한번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함 (기본 상태)
	:visited	사용자가 한번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함
* :link와 :visited가 먼저 정의된 후 정의되어야 정상적으로 동작함	:hover	사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택함
* :hover가 먼저 정의된 후 정의되어야 정상적으로 동작함	:active	사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택함
	:focus	초점이 맞춰진 input 요소를 모두 선택함
상태 의사 클래스 (UI element states pseudo-classes)	:checked	체크된(checked) 상태의 input 요소를 모두 선택함
	:enabled	사용할 수 있는 input 요소를 모두 선택함
	:disabled	사용할 수 없는 input 요소를 모두 선택함
	:target	현재 활성화된 target 요소를 모두 선택함
	:in-range	특정 범위 내의 값을 가지는 input 요소를 모두 선택함
	:out-of-range	특정 범위를 벗어나는 값을 가지는 input 요소를 모두 선택함
	:read-only	readonly 속성을 가지는 input 요소를 모두 선택함
	:read-write	readonly 속성을 가지지 않는 input 요소를 모두 선택함
	:required	required 속성을 가지는 input 요소를 모두 선택함
	:optional	required 속성을 가지지 않는 input 요소를 모두 선택함
	:valid	유효한 값을 가지는 input 요소를 모두 선택함
	:invalid	유효하지 않은 값을 가지는 input 요소를 모두 선택함
구조 의사 클래스 (structural pseudo-classes)	:first-child	모든 자식(child) 요소 중에서 첫번째에 위치하는 자식 요소를 모두 선택함
	:last-child	모든 자식(child) 요소 중에서 마지막에 위치하는 자식 요소를 모두 선택함
	:nth-child	모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식 요소를 모두 선택함
	:nth-last-child	모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식 요소를 모두 선택함
	:first-of-type	모든 자식(child) 요소 중에서 첫번째에 위치하는 자식 요소를 모두 선택함
	:last-of-type	모든 자식(child) 요소 중에서 마지막에 위치하는 자식 요소를 모두 선택함
	:nth-of-type	모든 자식(child) 중에서 n번째로 등장하는 특정 요소를 모두 선택함
	:nth-last-of-type	모든 자식(child) 중에서 뒤에서부터 n번째로 등장하는 특정 요소를 모두 선
	:only-child	자식(child) 요소를 단 하나만 가지는 모든 요소의 자식 요소를 선택함
	:only-of-type	자식(child) 요소를 특정 요소 단 하나만 가지는 모든 요소의 자식 요소를 선택함
	:empty	아무런 자식(child) 요소도 가지지 않는 요소를 모두 선택함
	:root	문서의 root 요소를 선택함
기타 의사 클래스	:not	모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용함
	:lang	특정 요소를 언어 설정에 따라 다르게 표현할 때 사용함

 

 

의사 요소(pseudo-element)

• 해당 HTML 요소의 특정 부분만을 선택할 때 사용한다.
• CSS3에서는 의사 클래스의 표현과 의사 요소의 표현을 구분한다.
• 따라서 의사 클래스는 하나의 콜론(:)을, 의사 요소에는 두 개의 콜론(::)을 사용해야 한다.

✨ [예시]
　  선택자::의사요소이름 { 속성: 속성값; }

 

 

CSS에서 자주 사용하는 의사 요소 클래스

의사 요소 구분	설명	사용할 수 있는 속성
::first-letter	텍스트의 첫 글자만을 선택함 (블록 타입의 요소에만 사용 가능)	font, color, background, margin, padding, border, text-decoration, text-transform, line-height, float, clear, vertical-align(단, float 속성 값이 none일 경우에만)
::first-line	텍스트의 첫 라인만을 선택함 (블록 타입 요소에만 사용 가능)	font, color, background, word-spacing, letter-spacing, text-decoration, text-transform, line-height, clear, vertical-align
::before	특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용함 (<img>, <br> 등의 대체 요소에 적용 불가)
::after	특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용함 (<img>, <br> 등의 대체 요소에 적용 불가)
::selection	해당 요소에서 사용자가 선택한 부분만 선택

 

 

 

---

[참고 자료]

https://developer.mozilla.org/ko/docs/Web/CSS

CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

CSS 선택자 - CSS: Cascading Style Sheets | MDN

http://www.tcpschool.com/css/css_selector_pseudoClass

코딩교육 티씨피스쿨