css 기초 여러가지 문법 만들기

 

css 기초 여러가지 문법 만들기

---

---

1. 문법

가장 간단한 CSS 코드 입니다.

h1 { color: red }

h1, color, red 세가지의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다.

- 선택자 : 무엇을 꾸밀지 정합니다. h1은 h1요소를 꾸미겠다는 말입니다.

- 속성 : 어떤 모양을 꾸밀지를 정합니다. color는 색상을 꾸미겠다는 말입니다.

- 값 : 어떻게 꾸밀지를 정합니다. red는 빨강색으로 만들겠다는 말입니다.

 

CSS 코드는 아래와 같이 구성됩니다.

selector { property: value }

이때에 property 와 value를 합쳐 선언(declaration)이라고 부릅니다.

 

2. 여러개의 선언

세미콜론( ; )으로 구분하며 선언을 여러개 넣으실 수 있습니다. 

h1 {   color: red;   font-size: 20px; }

는 h1 요소의 색상을 빨강색으로 하고 글자 크기를 20px로 만들겠다는 말입니다. 마지막 선언에는 세미콜론을 붙여도 되고 붙이지 않아도 됩니다.

h1 {   color: red;   font-size: 20px }

이처럼 하여도 됩니다.

 

 

3. 값에 공백이 있을 경우

값에 공백이 있다면 작은 따옴표 또는 큰 따옴표로 감쌉니다.  아래의 예를 들어 문단의 글꼴을 Times New Roman으로 하고 싶다면

p {   font-family: 'Times New Roman'; }

또는

p {   font-family: "Times New Roman"; }

와 같이 합니다.

 

 

4. 공백

여러 개의 연속한 공백이나 줄바꿈은 하나의 공백으로 인식을 합니다. 

selector {   property: value;   property: value; }

와

selector { property: value; property: value; }

는 같은 결과값을 만듭니다.

 

5. 주석

주석(Comment)는 /*과 */ 사이에 씁니다.

/* Comment */

/*과*/ 사이에 줄바꿈이 있어도 전부 주석으로 인식을 합니다.

/*   Comment 1   Comment 2 */

여러개의 줄 주석은 다음처럼 하기도 합니다.

 

/*  * Comment  * Comment  * Comment  */

 

CSS 표만들기 및 테두리 꾸미는 방법

 

CSS 표꾸미기, 정렬하는 방법

CSS 테이블 꾸미기, 표 크기 설정하는 방법

 

CSS를 HTML에 적용하는 방법 및 설명