나도 꾸밀 수 있다 CSS

###1. CSS 등장 이전의 상황

HTML문서 글꼴, 문자크기, 색상, 정렬 등 웹페이지를 아름답게 꾸미는 것을 요구하기 시작.

1) easy but HTML 자체에서 디자인과 관련된 새로운 태그를 만듦  
   장 :  
   단 :  
   예시 : 
2) difficult but 디자인과 관련된 새로운 언어를 만듦(CSS)  
  장 :  
  단 :  
  예시 :

###2.CSS의 등장 및 혁명적 변화

배경
HTML언어 자체에서 디자인과 관련된 새로운 태그를 활용할 시 많은 문제점들이 발생. *문제점 : 너무나 많은 태그들이 중복돼서 나타남, 많은 태그를 수정할 때 바꾸면 안되는 것도 바뀔 수 있음, Google 및 NAVER같이 큰 회사 웹페이즈 사이즈도 커질 것. =>유지 및 보수가 힘들고 코드 가독성이 떨어진다.
영향
1. 디자인과 관련된 내용은 style tag에 갇히고 관련없는 코드는 무시가능하다. HTML이 정보에만 전념할 수 있도록
2. CSS라는 디자인과 관련된 새로운 언어를 만듦으로써 디자인을 효율적으로 할 수 있음.

CSS와 HTML은 애초에 다른 언어. 따라서 HTML의 문법으로 앞으로 CSS의 문법을 따라 해석해야한다고 알려줘야함.

혁명적 변화

  <style>
 a{                  #Selector(선택자)
   color : red       #Declaration(효과, 선언) | property(속성) : value(값)
   }
 </style>

<무엇을 모르는지도 모르는 상태> --> <무엇을 모르는지 아는 상태>

무엇을 모르는지 아는 상태 : 효과, 선택자, 값 등을 검색할 수 있고 질문할 수 있고 이에 대해 궁금증이 생길 수 있다.

앞으로 CSS에 대해서 공부할 것 : 1) 어떤 property(속성)들이 있을까 = 어떤 효과들이 웹페이지를 design할 수 있을까 2) 어떤 선택자들이 있을까 = 효과를 정확하게 선택 및 지정하기 위해

###3.CSS 속성

웹페이지에 CSS를 삽입하는 방법
1. CSS속성을 이용
```
<style>
a{
 color : black;
 text-decoration : none;
}
</style>
```
1. 'style' 태그를 이용
```
  style= "abc;text-decoration:underline"
```
구글에 ###4.CSS 선택자

목표 : 선택자들을 조합함으로써 원하는 효과를 정교하게 특정한 태그에 적용시킬 수 있다. 코드 양이 적어질 뿐만 아니라 한 부분 수정시 많은 부분을 바꾸는 것이 가능해지므로 매우 효율적이다.

###5.박스모델

#과제 : 링크를 버튼으로 만들기