CSS 기본문법

FASTCAMPUS ST-FE 3기
Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 - Ch 7. CSS 개요

01. 기본문법, 주석

선택자{속성 : 값;}

---

02. 선언방식

2.1 내장 방식

html 파일안에서 작성하는 방식

<style></style>

2.2 인라인 방식

요소의 style속성에 직접 스타일을 지정하는 방식

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

2.3 링크 방식

html에 외부 css문서를 삽입

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

2.4 import 방식

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

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

---

03. 선택자

3.1 기본형

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

3.2 복합형

태그명.class
띄어쓰기 없이 연결되어있는 형태. 동시에 만족하는 요소를 선택

부모요소 > 자식요소
자식선택자. 부모요소의 자식요소를 선택

조상요소 자식요소
후손선택자. 띄어쓰기로 구분. 조상요소의 하위 요소를 선택

a요소 + b요소
인접선택자. a 요소 뒤에 오늘 같은 항렬의 b요소

a요소 ~ b요소
형제선택자. a요소 뒤에 있는 같은 항렬의 모든 요소

3.3 가상클래스

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

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

3.4 가상요소

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

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

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

3.5 선택자 속성

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

---

04. 스타일 상속

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

---

05. 선택자 우선순위

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

선택자	점수
!important	99999999점
id	100점
class	10점
tag	1점
*	0점