[부스트코스 강의] 4. (1) CSS ( 문법 / 구성 요소 / 문서 연결법 )

CSS

Cascading Style Sheet

 

 

html = 웹 페이지의 정보  /  css = html을 보기 좋게 디자인하는 역할

 

---

 

 

 CSS 문법 

h1 { color: yellow; font-size: 2em; }

 

- 선택자 (selector) = "h1"

- 속성 (property) = "color"

- 값 (value) = "yello"

- 선언 (declaration) = "color: yello", "font-size: 2em"

- 선언부 (declaeration block) = "{ color: yellow; font-size: 2em; }"

- 규칙 (rule set) = "h1 { color: yellow; font-size: 2em; }"

 

html에서의 속성 = Attribute : 어떤 구체적인 값을 가지는 객체

css에서의 속성 = Property : 객체의 특성을 설명하는 정의같은 개념

 

 

 

 CSS 주석 

/* 주석 내용 */
/* 주석은 여러 줄로도
    선언 할 수 있습니다.
*/

 

 

 

 CSS와 문서 연결법 

1. Inline

해당 요소에 직접 스타일 속성을 이용해 규칙 선언

선택자 X / 선언부에 속성 값만 삽입

<p style = "color: red;">내용</p>

 

2. Internal

문서에 <style> 활용

<style> p {color: red;}</style>

 

 

3. External

외부 스타일 시트 파일 이용

 

  (1) css 파일 하나 만들고 스타일 규칙 선언

(스타일 파일).css
p {color: red;}

 

  (2) <link> 이용해 css 파일 연결

(적용할 파일)
<link rel = "stylesheet"  href "(스타일 파일).css">

*rel : 연결되는 파일이 문서와 어떤 관계인지 명시하는 속성

 

 

4. Import

스타일 시트 내 다른 스타일 시트 파일 불러오는 방식

@import url("css/style.css");