• TOC {:toc}

이 글은 생활코딩의 CSS 소개 강의내용을 복습하기 위해 강의 자료를 기반으로 작성한 글입니다.

  • 제가 필요한 부분 위주로 확인하면서 정리하고 있어 글에 덜 작성된 부분이 있을 수 있습니다.
  • 글 작성 후 원 강의의 내용이 수정되거나 내용을 이해하기 위한 개인적인 설명이나 해석이 있을 수 있습니다. 되도록 원 강의를 참고해주시길 바랍니다.
  • 잘못된 부분이 있다면 댓글이나 그 외 편하신 방법으로 알려주시면 감사하겠습니다.

CSS는 HTML을 토대로 하기 떄문에 CSS를 쓰기 위해서는 HTML이 필수적이다.

CSS의 등장 배경

HTML이 생긴 이후, 다양한 불만족들이 발생했고 대표적으로 사이트를 좀 더 아름답게 만들고자 하는 욕구가 있었다.

이를 위해 우선 HTML에 디자인을 위한 태그를 만들기 시작한다.

  • Example: <font>, 폰트를 변경하기 위한 태그.
  • 기존에 HTML을 사용하던 사람과 브라우저가 쉽게 익숙해질 수 있다는 장점이 있다.

하지만, 웹이 활성화 되면서 HTML이 담고있는 정보는 중요해지는데 반해 <font>와 같은 의미없는 design 태그가 많아지면서 HTML의 ‘정보를 담는’ 코드로서 가치가 급락하게된다.

  • <li> 태그는 ‘list’라는 웹 자체에 대한 정보를 지니지만 <font> 태그는 그렇지 않기 때문에 웹을 파악하는데 도움이 되지 못한다.

결국 어렵지만 근본적인 해결책으로 디자인을 위한 새로운 언어인 CSS를 만들게 된다.

  • HTML: 웹의 정보에 집중
  • CSS: 디자인에 효율적인 문법 체계

CSS의 이해

CSS는 HTML과 ‘다른’ 언어이다. → 이는 웹 브라우저에게 CSS를 CSS로 인식하기 위해 HTML의 문법으로 알려주어야 한다는 것을 의미한다.

<!-- 감싸진 코드를 CSS의 문법으로 읽어라 -->
<style> CSS Code </style>

<!-- Example: 모든 li의 색상을 빨간색으로 지정 -->
<style>
    li {color: red;}
</style>

이처럼 CSS를 따로 사용하면

  • 정보와 디자인의 분리가 확실하고
  • 반복적으로 적용된 효과를 일괄적으로 바꾸기가 수월하다.