CSS의 등장배경
HTML로 웹을 만들고 난 후 사람들은 여러가지 불만들을 제기하기 시작하였다.
폰트 크기를 조절하고, 배경에 색을 입히고, 가운데 정렬을 하고 . . . 이런 불만들을 해소하기 위해 웹페이지를 디자인하기 위한 기술이 필요했다.
웹페이지를 아름답게 디자인하기 위해서는 두 가지 갈림길이 존재했다.
첫 번째는 HTML의 문법에 태그를 추가하는 것이고,
두 번째는 어렵지만 더 근본적인 해결책인 CSS라는 전혀 다른 컴퓨터 언어를 만들어내는 것이다.
Tip. < !-- ... -- > 는 웹에서 주석역할을 한다. (무시)
우리는 < a >< /a > 태그 사이에 있는 내용의 색상을 빨간색으로 바꾸기 위해 < font >라는 태그를 사용해볼 것이다.(현재는 font라는 태그를 사용하지 않음)
<h1><a href="index.html"><font color="red">WEB</font></a></h1>
<ol>
<li><a href="1.html"><font color="red">HTML</font></a></li>
<li><a href="2.html"><font color="red">CSS</font></a></li>
<li><a href="3.html"><font color="red">JavaScript</font></a></li>
</ol>웹브라우저가 처음 나왔을 때는 HTML만을 해석해서 처리하는 프로그램이였기 때문에 기본적으로 코드들을 HTML이라고 생각한다.
또한 CSS는 HTML과는 완전히 다른 컴퓨터 언어므로 우리는 컴퓨터에게 html 문법으로 "우리가 CSS 코드를 쓸테니까 이 코드를 HTML이 아니라 CSS의 문법에 따라 해석해라"라고 말해주어야 한다.
그래서 우리는 < style > ... < /style > 이라는 태그를 쓰면 이 태그 안에 있는 내용들을 CSS라는 언어의 문법에 맞게 해석해서 처리하게 된다.
<style>
a {
color:red;
}
</style>위의 내용은 CSS라는 새로운 언어의 문법인데, 각 코드앞에 < font >라는 태그를 붙여주지 않아도 저 코드 하나만으로 모든 < a >태그의 코드들의 색상을 지배할 수 있는 폭발적인 효과를 얻을 수 있다.
저 < a >태그가 한두개가 아니라 몇 억개라면 수시로 바꿔주는 것은 힘들 것이다.
이 경우에는 HTML의 < font >보다 CSS의 위 기능이 훨씬 더 효율적이게 된다.
이것이 우리가 새로 탑재해야하는 어려운 언어이면서도 CSS를 사용하는 이유이다.
코딩을 잘하는 방법 중 하나는 '중복의 제거'이다.
우리는 CSS의 위 코드를 통해서 중복된 < font >코드를 제거할 수 있었다.
중복을 제거하면 효율성뿐만 아니라 유지보수와 가독성 또한 높여준다.
웹페이지에 디자인과 관련된 코드는 < style >이라는 태그 안에 갇혀있게 되는데, 그렇다면 웹페이지를 해석하는 기계들은 디자인과 관련된 것이 필요없다면 이 부분은 무시하고 정보만을 가지는 코드만을 분석해서 여러 가지 작업을 각자의 의도에 맞게 할 수 있다.
이 모든 것들을 종합했을 때 CSS라는 언어가 도입된 이유는 두 가지로 정리할 수 있다.
- HTML은 너무나 중요하기 때문에 HTML이 정보에 전념하게 하기 위해서 HTML로부터 디자인에 대한 기능을 따로 구분하기 위해
- CSS를 통해서 웹페이지를 디자인하는 것이 훨씬 더 효율적이기 때문
CSS의 기본 문법
우리는 CSS라는 언어라는 것을 표시하기 위해서 < style > < /style > 이라는 태그를 사용했었는데 이 방법 외에도 '속성'을 이용하는 방법이 있다.
웹브라우저 입장에서 HTML인지 CSS인지 구별해야하므로 CSS의 효과를 주기 위해 style이라는 속성을 사용하기로 약속했다.
<li><a href="2.html" style ="color:red">CSS</a></li>style="" 은 HTML의 속성이다. 또한 이 style이라는 속성은 ""안에 그 값으로 반드시 CSS의 효과가 들어온다는 약속이 되어있다.
<style> //속성
a { //선택자
color:red; //효과
}
</style>이 태그는 반대로 속성이 효과만 있어서는 저 color라는 효과를 누구에게 지정할지를 설명할 수 없기 때문에 a{}라는 코드가 추가적으로 더 필요하다.
여기서 a{}는 이 웹페이지에서 주고 싶은 '효과(declaration)'를 누구에게 줄 것인가를 선택한다는 점에서 이것을 '선택자(Selector)' 라고 부른다.
웹페이지 안에 CSS를 삽입하는 2가지 방법
1. style 태그를 사용(선택자 X)
2. style 속성을 사용
웹페이지에서 < a >태그에 있는 내용들의 밑줄을 지우고 싶다면 아까 배웠던 style 태그 안에 text-decoration: none; 라는 코드를 넣어주면 된다.
<style>
a {
color:black;
text-decoration: none;
}
</style>이렇게 효과를 하나의 선택자에 대해서 여러 개의 효과를 지정할 수 있는데, 이때는 이 효과들을 세미콜론(;)으로 구분한다.
그리고 특정 내용만 밑줄을 긋고 싶다면 style 속성안에 text-decoration:underline 라는 코드를 입력해주면 된다.
<a href="2.html" style ="color:red;text-decoration:underline">CSS</a>
우리는 선택자, 선언(효과), 속성, 값을 구분할 수 있고 무엇을 의미하는지 알았기 때문에 무엇을 모르는지 아는 상태가 되었다.
앞으로 우리는 이 CSS를 통해서 웹페이지를 디자인하는 어떤 Property(속성)이 존재하는가라는 과정과, 그 효과를 더 정확하게 선택하여 지정하기 위해 다양한 Selector(선택자)를 알아가는 두 가지 여정을 하게 된다.
