220419) Part 1. HTML/CSS/JS ch7. CSS개요

01. 기본문법, 주석

선택자{속성 : 값;}

02. 선언방식

1. 내장 방식 : html 파일안에서 작성하는 방식

<style></style>

2. 인라인 방식 : 요소의 style속성에 직접 스타일을 지정하는 방식

<div style="color:red; margin:10px;"></div>

3. 링크 방식 html에 외부 css문서를 삽입

<link rel="stylesheet" href="./css/main.css">

4. import 방식 css에 @import규칙으로 css문서 안에 또 다른 css를 삽입,

@import url('./box.css');

03. 선택자_기본

* 모든 요소 선택
태그명 태그 이름으로 선택
.class명 클래스명으로 선택
#id명 id명으로 선택

04. 선택자_복합

태그명.class 띄어쓰기 없이 연결되어있는 형태. 동시에 만족하는 요소를 선택
부모요소 > 자식요소 자식선택자. 부모요소의 자식요소를 선택
조상요소 자식요소 후손선택자. 띄어쓰기로 구분. 조상요소의 하위 요소를 선택
a요소 + b요소 인접선택자. a 요소 뒤에 오늘 같은 항렬의 b요소
a요소 ~ b요소형제선택자. a요소 뒤에 있는 같은 항렬의 모든 요소

05. 선택자_가상클래스1

:hover 요소에 마우스커서가 올라가 있는 동안 선택
:active 요소를 클릭하고 있는 동안 선택
:focus 요소에 포커스되면 선택. (input 커서 활성화시)

06. 선택자_가상클래스2

부모요소 자식요소:first-child 형제요소 중 첫째.
부모요소 자식요소:last-child 형제요소 중 막내.
부모요소 *:nth(n)-child 형제요소 중 n번째. (2n : 짝수 / 2n+1 : 홀수)
a요소:not(b요소) a요소에는 속하면서 b요소는 아닌 요소.

07. 선택자_가상요소

a요소::before a요소의 내부 앞에 인라인 요소로 내용(content)를 삽입
a요소::after a요소의 내부 뒤에 인라인 요소로 내용(content)를 삽입

/* content 영역에 따로 내용값을 추가해줄수도 있다.*/
a요소:before{
	display:block;  
    content:'';
}

08. 선택자_속성

[disabled]비활성화 된 요소
[type="a"] 속성의 값이 a인 요소

09. 스타일 상속

글자/문자 관련 속성들은 부모에 sytle을 적용하면
거의 대체로 그 아래 자식요소에 까지 영향을 미친다.
inherit 강제상속시키기. 부모속성을 그대로 받는다.

10. 선택자 우선순위

1. 점수가 높을 수록
2. 점수가 같다면 가장 마지막에 해석된 선언이
   우선순위가 높다.