스타일 선언 방식
- 인라인 방식 (너무 우선순위가 높아서 권장하지않음)
- 링크(병렬로 연결) : link css
- 내장 :
- \@import : 직렬로 연결, 링크방식의 css 파일 내에서 \@import url("주소"); 하는 것
- ⇒ 직렬연결은 병렬에 비해 로딩이 오래걸린다
CSS 선택자
기본
⇒ *
: 전체 선택자, 모든 요소를 선택
⇒ (태그)
: 태그 선택자, 태그이름을 명시하면 선택(ex, div, li ...)
⇒ .(클래스)
: 클래스 선택자, 클래스속성값 요소를 선택
⇒ #(아이디)
: 아이디 선택자, 아이디 속성값 요소를 선택
복합
⇒ ABCXYZ
: 일치 선택자, 선택자 ABC, XYZ 를 동시에 만족하는 요소 선택 (태그선택자를 먼저 써야 구분자로 구분가능)
⇒ ABC>XYZ
: 자식 선택자, 선택자 ABC의 자식요소 XYZ 를 선택
⇒ ABC XYZ
: 하위(후손) 선택자, 선택자 ABC 의 하위요소 XYZ 를 선택 (띄어쓰기가 선택자 기호)
⇒ ABC+XYZ
: 인접 형제 선택자, 선택자 ABC 의 다음 형제 요소 XYZ 하나를 선택
⇒ ABC~XYZ
: 일반 형제 선택자, 선택자 ABC 다음 형제요소 XYZ 모두를 선택
가상 클래스
행동을 했을 때 동작하는것
⇒ ABC:hover
: 선택자 ABC 요소에 마우스 커서를 올라가 있는 동안 선택
⇒ ABC:active
: 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택
⇒ ABC:focus
: 선택자 ABC 요소가 포커스 되면 선택 (포커스가 가능한 요소에만 가능 : input ...)
- 태그 속성에 tabindex="-1" 을 넣으면 focus 가 될 수 있는 요소로 만듦
- 포커스는 한 페이지에 하나만 가능
⇒ ABC:first-child
: 선택자 ABC의 형제 요소 중 첫째라면 선택
⇒ ABC:last-child
: 선택자 ABC의 형제 요소 중 막내라면 선택
⇒ ABC:nth-child(n)
: 선택자 ABC의 형제 요소 중 (n)번째라면 선택
- (2n) 으로 표시 한다면 2의 배수 선택 ( 여기서 n은 0부터 시작, 2, 4, 6 번째..)
- 2n + 1(1, 3, 5 ..), n+2(2, 3, 4 ...) 등으로도 표시 가능
⇒ ABC:not(XYZ)
: 부정 선택자, 선택자 XYZ 가 아닌 ABC 요소 선택
가상 요소
⇒ ABC::before
: 가상 요소 선택자, 선택자 ABC 요소의 내부 앞에 내용을 삽입(인라인으로 추가됨).
(콜론이 하나여도 실행이 되지만 표준이 아님)
꼭 있어야하는 세트 : content : "내용";
그 외의 속성들을 넣을 수 있다.(인라인 요소인데 블럭요소로 바꿀수 있음, display: block; 으로)
⇒ ABC::after
: 가상 요소 선택자, 선택자 ABC 요소의 내부 뒤에 내용을 삽입(인라인으로 추가됨).
속성
⇒ \[ABC\]
: 속성 선택자, 특정 속성 ABC를 포함하는 요소 선택 (type, disabled ... )
⇒ \[ABC="XYZ"\]
: 속성 선택자, 속성 ABC를 포함하고 값이 XYZ인 요소 선택
'웹공부 > CSS' 카테고리의 다른 글
CSS 속성 - 1 (width, height, 단위, margin, padding ... 등) (0) | 2022.02.05 |
---|---|
스타일 상속과 선택자 우선순위 정리 (0) | 2022.02.04 |
CSS - 태그 종류 (0) | 2021.09.28 |
CSS - 인라인(inline)요소와 블록(block)요소 (0) | 2021.09.28 |
CSS - float 기반 레이아웃 (0) | 2021.09.28 |