1. CSS - Style문법

[CSS 설명]
1. Casscading Style Sheets의 약자입니다
2. HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데, 사용되는 스타일 시트 언어라고 불립니다
3. HTML:4부터는 모든 서식 설정을 HTML문서로부터 분리하는 것이 가능해졌습니다
[CSS를 사용하는 이유]
1. HTML에서 제작할 경우 세부 스타일을 일일이 따로 지정해줘야하는 불편함이 있습니다
2. 작업 또한 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘듭니다
3. 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있습니다
4. 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 유지 보수도 훨씬 쉬워집니다
5. 외부 스타일 시트의 확장자는 .css 파일로 저장합니다
[CSS문법]
1. 선택자(selector)와 선언부(declaratives)로 구성됩니다
2. 선택자
  1. CSS를 적용하고자하는 HTML요소를 가리킵니다
3. 선언부
  1. 하나 이상의 선언들을 세미콜론( ; )으로 구분하여 포함할 수 있으며 중괄호({ })를 사용하여 전체를 둘러쌉니다
4. 선언
  1. CSS속성명(property)과 속성값(value)을 가지고 있으며, 속성명과 속성값을 사용해주기 위해서 콜론( : )으로 연결하여 사용합니다
  2. 그리고 선언을 다하였다면 마지막으로 세미콜론( ; )으로 마무리를 해준다는 의미로 사용하여 끝맺음을 지어줍니다
[CSS선택자]
1. HTML요소 선택자
  1. html요소의 이름을 직접 사용하여 선택할 수 있습니다
  2. [예제]
```
# CSS

h2 { color: teal; text-decoration: underline; }

# HTML
#<h2>이 부분에 스타일을 적용합니다.</h2>
```
2. ID 선택자
  1. 특정 요소를 선택할 때 사용하고, 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해줍니다
  2. [주의]
    1. 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생합니다
    2. 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋습니다
  3. [예제]
```
# CSS
heading { color: teal; text-decoration: line-through; }

# HTML
<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>
```
3. CLASS 선택자
  1. 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다
  2. 특정 집단을 클래스라 말하며 같은 클래스 이름을 가지는 요소들을 모두 선택해주는 역할을 합니다
  3. [예제]
```
# CSS
.headings { color: lime; text-decoration: overline; }

# HTML
<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>
	<p>class 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>
```
4. GROUP선택자
  1. 여러 선택자를 같이 사용하고자 할 때 사용합니다
  2. 여러 선택자를 쉼표( , )로 구분하여 연결합니다
  3. 코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만들어 줍니다
  4. [예제]
```
# CSS
h1 { color: navy; }
h1, h2 { text-align: center; }
h1, h2, p { background-color: lightgray; }
```
[CSS적용하는 법]
1. [3가지]
  1. 인라인 스타일(Inline Style)
    1. HTML요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다
    2. 해당요소에만 스타일을 적용할 수 있습니다
    3. [유의]
      1. 한 번 설정된 스타일을 변경하기가 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 됩니다
      2. 되도록이면 꼭 필요할 경우에만 사용을 권하며, CSS파일에 스타일을 적용하더라도 html에서 설정한 인라인 스타일이 우선권을 가지기 때문에 css파일에서 스타일을 설정하더라도 바뀌지 않는 다는 점 팁입니다
    4. [예제]
```
# HTML - Inline Style
<body>
    <h2 style="color:green; text-decoration:underline">
        인라인 스타일을 이용하여 스타일을 적용하였습니다.
    </h2>
</body>
```
  2. 내부 스타일 시트(Internal Style Sheet)
    1. HTML문서 내의 <head></head> 태그를 사용하여 CSS 스타일을 적용하는 방법입니다
    2. 해당 HTML스타일을 적용할 수 있습니다
    3. [예제]
```
# HTML - Internal Style Sheet
<head>
    <style>
        body { background-color: lightyellow; }
        h2 { color: red; text-decoration: underline; }
    </style>
</head>
```
  3. 외부 스타일 시트(External Style Sheet)
    1. 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 도와줍니다
    2. 스타일 시트 파일은 .css확장자를 사용하여 저장됩니다
    3. 스타일을 적용할 웹 페이지의 <head> 태그에 <link>태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용됩니다
    4. [예제]
```
# CSS file
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }

# HTML
<head>
    <link rel="stylesheet" href="/examples/media/expand_style.css">
</head>
```
[CSS 적용의 우선순위]
1. 인라인 스타일 (HTML 요소 내부에 위치함)
2. 내부 / 외부 스타일 시트 (HTML 문서의 head 요소 내부에 위치함)
3. 웹 브라우저 기본 스타일