css 기본 문법

css : style을 정의, 어떻게 렌더링하면 되는지 브라우저에 설명하기 위한 언어

html : 정보와 구조화/ css : styling의 정의

 

1. 셀렉터

스타일을 적용하고자 하는 html 요소를 선택

위와 같은 구문 Rule Set이라함

html 요소를 어떻게 렌더링할지 브라우저에 지시

body 요소 선택 후 선택된 body 요소의 스타일을 정의

 

2. 프로퍼티

셀렉터로 선택, {} 내에 프로퍼티(속성) 값 지정

여러개 연속 지정 가능, 세미콜론(;) 으로 구분

 

3. 값

프로퍼티에 사용할 수 있는 값 " 키워드", "크기 단위", "색상 표현 단위" 등 특정 단위로 지정해야

 

4. HTML과 CSS 연동

html은 css 포함 가능, 연동 방법 하단

 

4.1 Link style

head 부분에 서술

<link rel="stylesheet" href="style.css">

4.2 Emdedding style

html 내부에 css 포함, link style 권장

 

4.3 Inline style

html 요소의 style 프로퍼티에 css 기술

js가 동적으로 css 생성 시 사용 경우 존재, 다만 일반적인 경우 link style 권장

<h1 style="color:red">Hello</h1>

<p style="background : aqua">This</p>

5. Reset CSS

웹 브라우저마다 디폴트 스타일 상이>Reset CSS는 브라우저 별로 다른 디폴트 스타일 하나로 통일 시켜줌

- Eric Meyer's reset

- normalize.css

자주 사용