CSS 기본 문법

HTML이나 XML과 같은 구조화 된 문서를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어. HTML의 각 요소의 style(design, layout etc)을 정의하여 화면등에 어떻게 렌더링 하면 되는지 브라우저에게 설명하기 위한 언어.

HTML과 CSS는 각각의 문법을 갖는 별개의 언어. HTML은 CSS를 포함할 수 있다. 그러나 HTML없이 단독으로 전재 하는 CSS는의미가 없다.

1. 셀렉터 (Selector, 선택자)

스타일을 적용하고자 하는 HTML요소를 선택하기 위해 CSS에서 제공하는 수단.

아래와 같은 구문을 Rule set이라고 하며 셀렉터에 의해 선택된 특정 HTML요소를 어떻게 렌더링 할 것인지 브라우저에 지시하는 역할을 함.

이러한 Rule set의 집합을 스타일시트Style seet라고 한다.

2. 프로퍼티 (Property, 속성)

셀렉터로 HTML 요소를 선택하고 {}내에 프로퍼티(속성)와 값을 지정하는 것으로 다양한 Style을 정의할 수 있음.

프로퍼티는 표준 스펙으로 이미 지정되어 있는 것을 사용. 사용자가 임의로 정의 불가.

여러개의 프로퍼티를 연속해서 지정할 수 있으며 세미콜론(;)으로 구분

color:...;
font size:...;

3. 값 (Value, 속성값)

셀렉터로 지정한 HTML요소에 style을 적용하기 위한 프로터피의 값은 해당 프로퍼티에 사용할 수 있는 값을 "키워드" 나 "크기단위" 또는 "색상 표현 단위" 등의 특정 단위로 지정.

color: orange;
font-size: 15px;

4. HTML과 CSS 연동

4.1 Link style

외부에 있는 CSS파일을 로드하는 방식. 가장 일반적으로 사용됨

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

h1 { color: orange; }
p { background: blue; }

4.2 Embedding style

HTML내부에 CSS를 포함시키는 방식

4.3 Inline style

HTML요소의 style 프로퍼티에 CSS를 기술하는 방식. JavaScript가 동적으로 CSS를 생성할 때 사용하는 경우가 있지만, 일반적으론 Link style을 사용하는 편이 좋다.

<body>
<h1 style="color: red">Hello World</h1>
<p style="background: aqua">This is a web page.</p>
</body>

5. Reset CSS 사용하기 (추후 다시 공부할 것)

기본적인 HTML요소의 CSS를 초기화 하는 용도로 사용.

브라우저 별로 제각각인 디폴트 스타일을 하나의 스타일로 통일시켜주는 역할을 함.

Selector (0)	2020.04.20

M U R A S A K I *