생활코딩을 듣고 공부한 내용을 정리한 글입니다.
CSS의 등장 배경
1990년도 HTML의 탄생과 함께 웹이 널리 퍼지자, 웹페이지를 조금 더 예쁘게 꾸미고자 하는 수요가 발생했습니다.
처음으로 시도되었던 것은 HTML에 페이지를 꾸밀 수 있는 태그들을 추가하는 것이었습니다.
지금은 사용하지 않는 font 태그가 그 예시로, 웹의 스타일을 바꿀 수 있는 원초적인 HTML 태그 중 하나입니다.
<font color="red"> </font>현재도 HTML에 해당 코드를 입력하면, 가운데 있는 텍스트의 색이 바뀌는 것을 확인할 수 있습니다.
그러나 '해당 부분이 제목이다, 혹은 해당 부분은 링크이다'와 같이 기능과 역할에 대한 정보를 제공하는 다른 태그와 달리, 이러한 디자인 태그는 디자인만을 나타낼 뿐, 기능 동작에 필수적인 정보들을 제공하지는 않았습니다.
이로 인해 웹페이지는 기능에 대한 정보와 디자인에 대한 정보가 섞이는 상황이 되었고, 하이퍼텍스트라는 정보를 제공하는 문서로서의 기존 가치가 희석되었습니다. 유지보수에도 어려움이 생겼죠.
이에 따라 디자인과 관련된 정보를 따로 분리해야 할 필요성이 대두되었고, 그 도구로써 1996년에 CSS라는 스타일 언어가 탄생하였습니다.
CSS 코드의 기본 구성
style태그
style 태그는 웹브라우저로 하여금 해당 부분에 있는 코드를 CSS라고 인식하게 하는 태그입니다. HTML 문서 상에 <style> </style> 이라고 되어있다면, 이 안에 있는 코드는 CSS의 영역이 됩니다.
그 안에는 특정 선택자의 디자인 속성을 선언하는 코드들이 들어가게 됩니다.
(예시)
<style>
h1{
color:red;
}`
</style>와 같은 코드가 있다면, 문서상 모든 h1 태그에 빨간색 폰트가 적용됩니다. 예시에서 볼 수 있듯, style 하에 있는 선언문은 다음과 같은 구조를 지닙니다. (그림: 타 사이트 출처)
크게는 선택자+선언 블록의 형태입니다.
그리고 선언 블록은 다시 속성+속성값+선언 구분자(;), 즉 선언의 집합입니다.
h1은 선택자로 스타일을 선언할 대상입니다. {}로 둘러 싸인 {color:red;}는 선언 블록입니다. 그리고 선언 블록은 color:red;라는 선언으로 구성되어있고, 선언은 다시 color라는 속성과 red라는 속성값으로 이뤄져 있습니다.
만약 한 가지 태그에 여러 속성을 적용한다면, 이런 식으로 코드가 구성될 것입니다.
(예시)
<style>
h1 {
font-size: 45px;
color: #4CAF50;
text-shadow: 2px 2px #000000;
letter-spacing: 5px;
text-align: center;
margin:0;
padding-top: 10px;
border-bottom: 2px solid #4CAF50;
}
</style>id > class > 태그
위 예시에서는 h1이라는 태그에 스타일을 적용했지만, 선택자(selector)를 특정 id 혹은 class로 지정할 수도 있습니다. (id 지정: #xx, class 지정: .xx)
만일 동일한 대상에 여러 선언이 겹쳤을 경우, 1. id 2. class 3. 태그의 순서로 우선순위가 주어집니다. 예를 들어 하나의 대상이 A라는 id에 속해있고 h1이라는 태그에 속해있는데, id="A"에는 폰트 색상을 red, <h1> 태그에는 폰트 색상을 green으로 지정하라는 선언이 있다고 해봅시다. 그렇다면 위에서 말한 우선순위에 의해 id에 적용된 red가 적용될 것입니다.
이렇게 우선순위를 둔 기준은 포괄성입니다. 그림을 그릴 때 밑배경을 먼저 칠하고 그 위에 디테일을 덧입히는 것이 수월한 것과 유사합니다. 문서 전반적으로 영향을 미치는 태그를 깔아두고, 중간 층위는 class -> 세부 디테일은 id로 잡는 것입니다. 만일 같은 우선순위가 중복된다면 가장 마지막에 등장하는 선택자가 적용됩니다.
직접 특정 코드를 지정해서 스타일 속성을 적용할 수도 있습니다.
a href="xxx.html" style="color:red"> xxx 링크 </a>라는 코드가 있다면, a HTML 태그에 style 속성이 직접 적용됩니다. 여기서는 이미 특정 대상을 지정한 상황이기 때문에, 선택자를 따로 사용할 필요가 없습니다.
