# 기본 문법 & 스타일 방법

> CSS 문법, CSS 기본 문법,&#x20;

## CSS 기본 문법

* css는 html 문서 내에 포함시킬 수 있다
* **`<head>` 내부에서만 사용 가능**하고 `<style>` 태그를 사용해서 css코드 넣기
* `<text/css>` MIME type 지정, 하지만 html 5 에서는 **생략 가능**

```css
선택자(대상) {     /* 대상 선택자, { 선언구간 시작 */
  속성1: 값;      /* ; 선언문 구분 */
  속성2: 값2;     /* : 속성, 값 구분 */
}               /* 선언구간 종료 */
```

## CSS 스타일 방법

CSS 코드를 HTML 문서에 적용하여 스타일링하는 3가지 방법

* 인라인 스타일 (inline style)
* 인터널 스타일 (internal style)
* 익스터널 스타일 (external style)

### 인라인 스타일

* 요소에 직접 스타일링을 추가하는 방법이다.&#x20;
* 요소 내부에 style 속성을 이용하여 css 코드 작성 한다. &#x20;

```markup
<body>
    <section style="color: #903000">
    <h1 style="color: tan">
        <abbr
        style="cursor: help; text-decoration: none"
        </abbr>
     언어란?
    </h1>
</body>
```

### 인터널 스타일

* CSS 코드를 HTML 문서에 포함

```markup
<head>
  <style>
    section {
      color: #903000;
    }
    h1 {
      color: tan;
    }
    abbr {
      cursor: help;
      text-decoration: none;
    }
  </style>
</head>
```

### 익스터널 스타일

* CSS 파일을 HTML 문서에 연결한다.  (Link 요소를 사용하여 외부에 있는 css 파일을 적용한다.)  &#x20;

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

```css
section {
  color: #903000;
}
h1 {
  color: tan;
}
abbr {
  cursor: help;
  text-decoration: none;
}
```

## 참고&#x20;

* [CSS 작동 원리 - CSS를 HTML에 적용하는 방법](https://goo.gl/tQX1vF) → MDN
