HTML을 통해서 문서를 만들 수 있게 됐지만, 불평이 넘쳐날 수 밖에 없었다. 예쁘지 않기 때문이다.
그래서 웹 페이지를 꾸미는 방법에 고민이 생겼다. 그래서 두가지 방법을 고안했다.
HTML에 디자인 관련 태그를 만드는 것과 새로운 디자인 언어를 만드는 것이었다.
처음에는 HTML에서 디자인과 관련된 태그를 만드려고 애를 썼다. 하지만 이내 한계를 깨닫고 CSS라는 언어를 만들었다.
우선 지금은 사용하지 않지만 한계에 부딪혔던 HTML이 만든 태그를 알아보자
<font>라는 태그이다.
<h1><a href="index.html"><font color="red">뜨거운 감자 - 노래</font></a></h1>
색깔이 바꼈다.
검색엔진은 위의 코드를 보고 이렇게 해석한다.
뜨거운 감자 - 노래는 h1이므로 중요한 키워드로 쓰였다.
뜨거운 감자 - 노래는 a이므로 href의 해당 주소로 연결되어있다.
하지만 뜨거운 감자 - 노래의 폰트가 가진 색상을 '정보'라고 보기는 힘들다. 따라서 웹 페이지가 정보로서 갖지 않아도 되는 정보를 태그로 가지고 있으면 웹페이지의 격이 떨어진다. 그래서 CSS라는 새로운 언어로 디자인을 분리한다.
처음에는 HTML이 <font>와 같이 무분별하게 디자인 태그를 추가했었다.
우리가 작성했던 코드에서 <a>태그가 있는 코드의 색을 모두 red로 바꾼다고 하자.
<h1><a href="index.html"><font color="red">뜨거운 감자 - 노래</font></a></h1> 태그처리
<ol>
<li><font color="red"><a href="1.html">청춘<font></a></li>
<li><font color="red"><a href="2.html">고백<font></a></li>
<li><font color="red"><a href="3.html">비눈물<font></a></li>
</ol>
<!-- <a>태그가 달린 코드를 모두 <font> 처리 -->위의 코드와 같이 작성이 될 것이다.
***<!-- --> 는 주석처리이다.
하지만 딱봐도 너무 많은 태그를 사용해야하고 지저분하다. 이를 정리하기 위해 CSS 문법을 사용하는 <style>태그를 만들었다.
<style>은 HTML의 태그이면서 "<style></style> 안의 문법 CSS로 만들어진 내용이니깐 CSS로 처리를 해야해!" 라는 뜻이다.
<style>을 사용해서 폰트의 색을 바꿔보자. <style>은 <head>안에 집어넣는다.
<style>
a {
color : red;
}
</style>이렇게 간단하게 <a>가 들어간 색깔을 바꿀 수 있다.
만일 HTML으로 작성으로 했다면 <a>태그가 들어간 글이 1억개라고 했을 때, 하나하나 다 바꿔야한다.
하지만 CSS는 1번에 수정을 할 수 있다. 또한 <a>에 대한 디자인이라는 것을 코드가 명시하고 있기 때문에굉장히 효율을 더해주는 언어이다. 유지보수를 훨씬 편리하고 가독성이 높아진다.
또한 웹페이지를 해석하는 기계들은 style 코드와 정보 코드를 분류해서 해석한다.
HTML은 너무 중요하기 때문에 HTML이 정보에 전념하게 하기 위해서 디자인 기능을 분류해놓는다.
CSS가 훨씬 효율적으로 디자인을 할 수 있다.
'HTML & CSS > 생활코딩 - CSS' 카테고리의 다른 글
| CSS 기초 개념 - 그리드 #05 (0) | 2020.09.26 |
|---|---|
| CSS 기초 개념 - 박스 모델 활용 #04 (0) | 2020.09.25 |
| CSS 기초 개념 - 박스 모델 #03 (0) | 2020.09.24 |
| CSS 기초 개념 - 구글링 요령 #02 (0) | 2020.09.23 |
| CSS 기초 개념 - 기본 문법 #01 (0) | 2020.09.22 |
