CSS 선언방식
1. 내장방식
<style></style>- 인라인 방식
<div style="color: red; margin: 20px;"></div>- 링크방식(병렬연결)
<link rel="stylesheet" href="./css/main.css">-
import 방식(직렬연결)
css파일에서 @import url("./box.css");
CSS 선택자
1. 기본
- * 전체 선택자
- 태그 선택자
- 클래스 선택자
- 아이디 선택자- 복합
- 일치 선택자 ABC와 SYZ를 동시에 만족하는 요소 선택 ex) span.orange
- 자식 선택자 ul > .orange
- 하위(후손) 선택자 div .orange
- 인접 형제 선택자(다음 형제 하나) .orange + li
- 일반 형제 선택자(다음 형제 모두) .orange ~ li- 가상 클래스
- :hover
- :active 마우스를 클릭하고 있는 동안
- :focus focus 가능하지 않은 요소에 속성으로 tabindex="-1" 추가해주면 포커스 가능해진다.
- :first-child
- :last-child
- :nth-child(n)
- ABC:not(XYZ선택자) 부정선택자 선택자 XYZ가 아닌 ABC 요소 선택- 가상 요소
::before { content: "앞!";} inline요소
::after- 속성
ATTR 속성ABC를 포함한 요소 선택 [ABC] ex) [disabled]
ATTR=VALUE 속성 ABC를 포함하고 값이 XYZ인 요소 선택 ex) [type="password"]
