CSS 기본 개념

• 웹이 처음 세상에 등장했을 때는 HTML 만이 존재했다.
• 이 HTML을 이용해서 전자문서를 만들고 이 전자문서를 인터넷을 통해 전 세계의 누구나 볼 수 있게 할 수 있었다.
• 당시에는 혁명적인 일이었지만 사람의 욕심은 끝이 없었다. 그 중 하나가 미적인 부분이였다.
• 정보를 표현하는 것도 좋지만 좀더 아름답고 보기편하고 그림도 있으면 좋겠다는 것이었다.

▶ 그래서 해결 방법은 두가지가 있었는데

1.  HTML언어에 디자인과 관련됨 태그를 만들어 사용하는 것.
2.  디자인에 최적화된 새로운 언어를 만드는 것.

※ 사람들은 더 쉬운방법인 첫번째 방법을 쓰게 되었지만 결국  한계에 부딪혀서 새로운 언어를 만들게 되었다.

그게 바로  CSS(Cascading Style Sheets)이다.

---

 

• 첫번째 방법으로 HTML 자체에 <font> 라는 디자인을 위한 태그를 사용했다.
• 직접 색을 변경하길 원하는 태그에 <font> 태그를 붙여 쓰는 것.
• 그러다보니 웹페이지가 많아지고 정보의 양도 늘어나면서 작성했던 <font>태그들을 수정 해야할 때 일일히 다 수정을 해줘야 하니 시간도 오래걸리고 너무 힘이 드는 것이었다.
• 그리고 웹페이지라는 소중한 정보안에 <font>라는 색을 표현하기위한 정보가 아닌 코드가 섞이면서 웹페이지가 정보로서의 가치가 떨어지는 문제가 생겼다.

---

• 그래서 결국 두번째 방법으로 CSS라는 기술이 등장했다.
• CSS는 <style>이라는 태그의 안쪽에 디자인속성들을 모아서 작성하기 때문에 가독성이 좋으며, 중복된 코드를 단하나의 코드로 만들어 중복을 제거할 수 있다. 즉 유지보수가 편리하다.
• HTML이 정보 전달에만 전념하도록 HTML로부터 디자인에 대한 기능을 빼앗아 온 것이 바로 CSS라고 할 수 있다.
• CSS를 통해 웹페이지를 디자인하는 것이 HTML을 통해 디자인 하는 것보다 훨씬 더 효율적이기 떄문에 CSS라는 언어가 도입된 것이다.

 

웹페이지에 CSS를 삽입하는 두가지 방법

1. style 속성을 쓴다.

CSS효과를 주고 싶은 태그에 직접 style속성을 쓴다.

style=" " 은 HTML의 속성이다. 그리고 style이라는 속성은 값으로 반드시 CSS효과가 들어온다고 약속돼 있다.

  2. <style> 태그를 사용한다.

<style>태그는 CSS효과를 누구에게 지정할지를 설명할 수 없기에  대상을 지정해줘야하는데 이 대상을 지정(선택)한다고해서 선택자 라고 한다. 그리고 태그안에 어떤효과를 줄것인지 해당하는 부분을 선언 또는 효과 라고 한다.

color 은 속성(property)라고 부르고 ,  red는 값(value) 라고 한다. 그리고 하나의 선택자에 여러개의 효과를 지정할 수 있는데 그 경우에는 세미콜론으로 구분하기 때문에 효과를 지정한 후에는 항상 세미콜론을 적어준다.