Wrapping
요소를 어떤 요소로 묶어주는 행위
전역 속성 : 전체의 영역에서 모두 사용 가능한 속성
title 속성 : 요소의 정보나 설명을 지정, 마우스를 해당 요소에 올려 두면 설명 표시
style 속성 : 적용할 css 스타일 지정
class 속성 : 요소를 지칭하는 중복 가능한 이름 => . class
id 속성 : 요소를 지칭하는 고유한 이름 => # id
data-이름 속성 : 요소에 데이터를 지정
defer 속성
html 분석 후에 js 실행하도록 하는 속성
CSS 선언 방식
내장 방식 : style 태그 내부에 작성
인라인 방식 : 요소의 style 속성에 직접 스타일을 작성, 선택자 없음, 유지 보수 불리
링크 방식 : 외부 css 문서를 가져와 연결하는 방식 H <- C [병렬]
@import 방식 : css 문서 안에서 또 다른 css 문서를 가져와 연결하는 방식 H <- C <- C [직렬] => 연결이 지연될 수 O
CSS 선택자 : 기본 선택자
전체 선택자 * : 모든 요소를 선택
태그 선택자 ABC : 태그 이름이 ABC인 요소 선택
클래스 선택자 .ABC : class 속성의 값이 ABC인 요소 선택
아이디 선택자 #ABC : id 속성의 값이 ABC인 요소 선택
CSS 선택자 : 복합 선택자
일치 선택자 ABCXYZ: 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 => 태그 선택자 먼저
자식 선택자 ABC > XYZ : 선택자 ABC와 자식 요소 XYZ 선택
하위(후손) 선택자 ABC XYZ : 선택자 ABC와 하위 요소 XYZ 선택, '띄어쓰기'가 선택자의 기호
인접 형제 선택자 ABC + XYZ : 선택자 ABC와 다음 형제 요소 XYZ 하나를 선택
일반 형제 선택자 ABC ~ XYZ : 선택자 ABC와 다음 형제 요소 XYZ 모두를 선택
CSS 선택자 : 가상 class 선택자
css 가상 class 선택자로도 js처럼 일부 동작 제어 가능
ABC:hover : 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택
ABC:active : 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택
ABC:focus : 선택자 ABC 요소가 focus되면 선택
- focus가 될 수 있는 요소는 html 대화형 컨텐츠에 해당
- input, a, button, label, select 등
- tabindex 속성을 사용한 요소도 focus 될 수 있음
- focus 속성을 통해 focus 될 수 있는 요소를 만들 수 있음
- tab 키를 사용해 focus할 수 있는 순서를 지정하는 속성
- 순서로 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않음
ABC:first_child : 선택자 ABC가 형제 요소 중 첫째라면 선택
ABC:last_child : 선택자 ABC가 형제 요소 중 막내라면 선택
ABC:nth_child(n) : 선택자 ABC가 형제 요소 중 (n)째라면 선택
- 2n, 2n+1, 3n, n+2 ... 등을 통해 특정 요소 선택 가능
ABC:not(XYZ) : 선택자 XYZ가 아닌 ABC 요소 선택
CSS 선택자 : 가상 요소 선택자
ABC::before : 선택자 ABC 요소의 내부 앞에 내용을 삽입, 가상 inline 요소
ABC::after : 선택자 ABC 요소의 내부 뒤에 내용을 삽입, 가상 inline 요소
- display : inline과 block 속성 지정 가능
CSS 선택자 : 속성 선택자
[ABC] : 속성 ABC를 포함한 요소 선택
[ABC="XYZ"] : 속성 ABC를 포함하고 값이 XYZ인 요소 선택
[ABC] : 속성 ABC를 포함한 요소 선택
[ABC] : 속성 ABC를 포함한 요소 선택
스타일 상속 : 부모/상위 요소 css가 자식/후손 요소에 영향을 미침
모두 글자/문자 관련 속성
강제 상속 : "속성: inherit"
부모 요소 스타일 따름
선택자 우선순위 (명시도)
!important : 99999999999999점
id 선택자 : 100점
class 선택자 : 10점
tag 선택자 : 1점
전체 상속자 : 0점
inline 선언 : 1000점
상속 : X
🐭 점수가 같으면 나중에 쓴 게 적용됨
