준비중..
05 CSS 개요
# CSS 개요
웹페이지 스타일링을 더욱 쉽고 빠르게!!
<a name="css-overview"></a>
---
### CSS 개요
CSS란 Cascading Style Sheets의 약자로 HTML을 꾸며주기 위한 언어입니다. 예제를 통해 좀 더 알아봅시다. 아래 HTML 코드를 작성해주세요.
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자기소개</title>
</head>
<body>
<h1>나를 소개합니다</h1>
<img src="https://goo.gl/BFX4PW" />
<h2>좋아하는 음식</h2>
<ol>
<li>치 킨</li>
<li>보 쌈</li>
<li>샐러드</li>
</ol>
</body>
</html>
```
<a name="style-attribute"></a>
---
### Style 속성을 통한 꾸미기
CSS를 사용하기전, 먼저 style속성을 사용하여 페이지를 아래와 같이 꾸며보겠습니다.
어떻게 꾸미면 될까요? 맞습니다. 아래와 같이 배경색과 글자색을 변경해주면 되겠습니다.
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자기소개</title>
</head>
<body>
<h1 style="background-color: black; color: white;">나를 소개합니다</h1>
<img src="https://goo.gl/BFX4PW" />
<h2 style="background-color: green; color: white;">좋아하는 음식</h2>
<ol>
<li>치 킨</li>
<li>보 쌈</li>
<li>샐러드</li>
</ol>
</body>
</html>
```
<a name="styling-using-css"></a>
---
### CSS를 이용한 스타일링
이번에는 style 속성이 아닌, CSS 파일을 통해 동일한 효과를 나타내보겠습니다. 가장 먼저 head태그 속에 css파일을 연결해줍니다.
```
...
<head>
...
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
...
```
그 다음 html 파일과 같은 디렉토리(폴더)내에 stylesheet.css 파일을 생성해줍니다.(필자의 경우 자기소개라는 디렉토리 안에 index.html 파일과 stylesheete.css 파일을 생성하였습니다)
마지막으로 stylesheet.css 파일을 작성합니다.
```
h1 {
background-color: black;
color: white;
}
h2 {
background-color: green;
color: white;
}
```
결과화면 입니다~
<a name="css-syntax"></a>
---
### CSS 문법 구조
CSS의 문법은 선택자(selector), 속성(property) 그리고 값(values)으로 이루어져있습니다.
```
selector { property: value; }
```
선택자는 HTML 태그 중 꾸며줄 대상을 선택하며, 선택된 대상의 속성을 해당하는 값으로 꾸며주게 됩니다. 위에서 사용했던 코드로 예를 들어 봅시다.
```
h1 {
background-color: black;
color: white;
}
```
위 코드는 h1 태그를 선택 후, 배경색을 검은색으로 변경하며 글자색 또한 흰색으로 바꾸어 줍니다.
<a name="why-using-css"></a>
---
### CSS를 사용하는 이유
+ 웹페이지의 구조파악이 쉬워짐.
+ 웹페이지를 내용과 디자인으로 분리함으로써 유지보수 용이.
CSS의 탄생은 기존의 HTML코드에 sytle 속성으로 웹페이지를 꾸며주던 것에 대한 불편함으로부터 출발했습니다. 페이지 내용과 스타일링이 많아질수록, HTML 코드를 읽기 어려워졌기 때문입니다. 따라서 이러한 한계를 해소하기 위해 CSS가 등장하게 된 것입니다.
---
### 핵심 키워드
+ [CSS 개요](#css-overview)
+ [Style 속성을 통한 꾸미기](#style-attribute)
+ [CSS를 이용한 스타일링](#styling-using-css)
+ [CSS 문법 구조](#css-syntax)
+ [CSS를 사용하는 이유](#why-using-css)
---
### Next..
class 속성과 id 속성 그리고 선택자에 대해 좀더 알아봅시다.