CSS 등장

CSS 등장 배경

디자인을 위해 사용한 태그 <font>

<h1><font color="red">Content</font></h1>

위 코드에서 <h1>이라는 태그는 ‘제목’이라는 정보를 담고 있습니다. 하지만 <font>라는 태그는 어떠한 정보를 담고 있지 않고, 단순히 빨간색이라는 디자인을 담고 있습니다.

이와 같이 디자인에 대한 코드가 섞이면서 웹 페이지가 정보로써의 가치가 현격히 떨어지는 문제가 발생합니다.

다른 문제는 디자인을 바꾸는 경우 입니다. 한 줄이 아니라 수만줄의 코드가 있는데 일부는 파란색으로 나머지는 핑크색으로 바꿔달라는 요청이 오면 아주 곤란합니다.

문제를 해결하기 위해 CSS가 등장합니다.

CSS

HTML내부에 <style>태그를 사용해서 디자인합니다. 이때 웹 브라우저에게 <style>태그의 내부 코드는 CSS문법으로 해석해야한다고 알려줍니다.

<style>
  h1 {
    color: red;
  }
</style>

• 단점

  • CSS라는 언어 학습
  • 웹 브라우저에 CSS 해석 기능 추가

• 장점

  • 중복의 제거
  • 유지보수에 좋다
  • 가독성이 좋다
  • 정보와 디자인의 분리

참고 사이트

생활코딩 CSS