CSS는 무엇을 위해 나왔을까? 이미 언급한 바 있지만 웹페이지를 꾸미기 위해서다. HTML은 웹페이지의 정보를 구조화해서 정확하게 전달하기 위해서 나왔다. 이를 위해서 ‘태그’를 사용한 마크업 언어라는 특징을 갖고 있다. 반면 CSS은 정보를 전달하기 위해서가 아니라, 그 정보를 어떻게 이쁘게 장식해서 전달할까에 중점을 맞춘 언어이다.
HTML이 만들어진 초창기에는 CSS라는 것이 없었다. 하지만 사람의 욕심은 끝이 없어서 당시에도 웹페이지를 아름답게 디자인하고 싶었던 사람이 많았다. 그래서 웹페이지를 이쁘게 만들기 위해서 안타깝게도 디자인의 모든 것을 HTML안에 때려박았다. 그러다보니 HTML이 정보의 구조화라는 본래의 목적을 잃고 디자인을 위한 언어가 되어갈 때가 많았고, 결국엔 웹페이지 디자인을 위한 새로운 언어가 필요하게 되었다.
그래서 HTML표준을 관리하던 W3C가 CSS를 발표하고 스타일에 관련된 언어 표준으로 삼게 되었다. 이 CSS는 우리가 보는 사실상 모든 웹페이지에 적용 되어있다. 웹페이지가 뭔가 좀 꾸며져 있다 싶으면 이 언어가 사용되고 있다. 이렇게 널리 쓰이는 만큼 웹 프론트엔드를 공부하는 사람들이 반드시 거쳐가야 할 관문이라고 할 수 있다.
목차
1. CSS의 발생 배경과 'Cascading'
2. 선택자와 속성
1. CSS의 발생 배경과 'Cascading'
CSS는 어떤 특징을 갖고 있을까? 저번에 HTML의 주된 특징이 말 자체에 나와있었다. 하이퍼텍스트(Hypertext)와 마크업 언어(Mark Language)였다. CSS도 그 특징이 말뜻에 나와있다. CSS는 Cascading Style Sheets의 줄임말이다. 그럼 여기서 Cascading과 Style Sheets가 무엇인지 알아보면 되지 않을까 저절로 생각이 든다.
일단 뜻을 한국어로 한번 직역해보자. Cascading이란 말은 한국어로 폭포같이 떨어지는, 계속적인, 연속적이라는 의미로 쓰인다. 그리고 style sheets는 그냥 말 그대로 스타일 문서들이다. 이것만 봐서는 뭔가 감히 안 잡힌다. 연속적 스타일 문서? CSS는 언어라던데 왜 해석해보니까 문서라는 뜻으로 정의되는지. 그리고 특히 Cascading의 의미는 뭘 설명하려는 건지 모르겠다. 그렇다. 사실 CSS에서의 Cascading의 뜻은 회화에서 쓰이는 일반적인 의미와는 다소 어긋나 있다. 제대로 된 뜻 풀이는 영어로 되어있는 것을 보는게 맞다.
위키피디아에서 CSS를 검색하면 Cascading에 대해 설명한 부분이 있다.
The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element.
해석: cascading이라는 이름은 만약 둘 이상의 스타일 규칙이 특정 요소에 적용되었을 때, 어떤 스타일 규칙을 적용할지를 결정해주는 정해진 우선순위체계에서 비롯됩니다.
다시 정리하면 CSS는 스타일을 지정해주는 규칙이 중복되었을 때, 어떤 규칙을 우선적으로 적용할지 정해주는 순위체계를 가졌고 그런 특징때문에 cascading이라는 말을 붙였다는 것이다.
이 특징이 왜 중요한지 예를 들어보자. 당신이 친구들과 놀러가서 친구들과 먹을 라면을 끓인다고 하자. 내가 라면을 끓이기 시작하자 친구들이 하나 둘 훈수를 두기 시작한다.
친구1: 야 나는 무조건 물 500ml 넣고 끓여야 하는 거 알지? 아님 안 먹는다?
친구2: 물 500ml안돼. 정량대로 넣으면 라면 짜. 아 그리고 파 좀 썰어넣자.
친구3: 난 다 필요없고 계란 하나만 넣어. 몰라 나머진 알아서 해.
당신은 라면을 어떻게 끓일 것인가? 이럴 때는 나만의 룰을 만들어서 알아서 라면을 끓일 것이다. 사람마다 다양한 스타일의 라면을 끓여낼 것이다.
이 상황을 HTML과 CSS에 대입해보자. 우리가 <p>태그의 내용을 꾸미고 싶다고 하자. 웹브라우저는 HTML에서 정보를 얻고 스타일 문서(Style sheets)를 참조해서 웹페이지를 꾸며진 모습으로 보여준다. 근데 스타일 문서가 여러 개이고, 스타일 문서마다 지시하는 것이 서로 충돌될 수 있다. 한 문서는 <p>태그 내의 글자색을 빨간색으로 만들라고 지시하고 다른 문서들은 파란색이나 회색으로 만들라고 지시할 수도 있다.
라면의 경우에는 내 마음대로 만들어도 친구들이 맛있게 먹어줄 수 있지만, 웹브라우저의 경우는 웹브라우저마다 마음대로 스타일 문서를 해석할 경우 사람들이 보는 웹페이지의 모습이 많이 달라질 수 있다. 웹이 갓 등장한 시기에, 당시에 있었던 스타일 문서와 언어들은 이런 문제들이 실제로 발생했다.
그래서 만든 것이 우선순위에 대한 규칙이다. 각기 다른 스타일 문서에서(혹은 한 문서에서도) 충돌하는 지시가 들어왔을 때 어떤 말을 우선적으로 들을 것인가? 이것에 대한 순위체계를 만든 것이다. 이에 대한 체계를 통일된 규격으로 확립하고 나온 스타일 문서가 CSS이다. 이 문서에서 사용하는 언어는 CSS언어라고 한다. 현재는 CSS라고 하면 이 CSS언어까지 의미한다.
*아래 링크는 CSS가 무엇인지를 더 자세하게 알고 싶다면 참고하면 좋다.
*CSS를 발명한 Håkon Wium Lie의 논문.
CSS가 나오게 된 계기와 CSS의 특징에 대해서 정말 하나하나 자세하게 설명해놨다. 너무 길어서 다 읽기는 힘들다. (나도 조금만 읽었다.)
https://web.archive.org/web/20060906211843/http://people.opera.com/howcome/2006/phd/
PhD Thesis: Cascading Style Sheets
web.archive.org
*W3가 제공한 CSS에 관한 설명(영문)
위의 글 보다는 훨씬 간결하게 되어있다. 이 글은 보관해 뒀다가 나중에 라도 한 번쯤 읽어보면 좋을 것 같다.
https://www.w3.org/TR/html401/present/styles.html#h-14.1
Style Sheets in HTML documents
Style sheets represent a major breakthrough for Web page designers, expanding their ability to improve the appearance of their pages. In the scientific environments in which the Web was conceived, people are more concerned with the content of their documen
www.w3.org
2. 선택자와 속성
CSS가 무엇을 의미하는지, 그리고 가장 큰 특징이 무엇인지 대략적으로 알아보았다. 이제 세부적으로 들여다 볼 차례이다. CSS의 기본적인 문법에 대해서 알아보도록 하자. CSS를 실습하기에 앞서 HTML로 적당하게 웹페이지를 만들어보자.
만약 우리가 CSS를 만드는 사람이라고 해보자. CSS가 해야 할 일은 무엇일까? 일단 HTML이 웹브라우저에게 자신이 html소스코드를 사용한다는 정보를 전달해주기 위해 <html>이라는 태그를 썼듯이, CSS도 “나 이제 CSS 쓸거야” 라는 정보를 전달해주어야 한다. 그리고 어떤 부분을 이렇게 꾸며라라고 지시할 수 있어야 한다. 따라서 가장 먼저 할 일은 태그를 활용하여 웹브라우저에게 내가 이제 CSS를 쓸 것이라고 인식시키는 것이다.
그 태그가 바로 <style></style>이라는 태그이다. <style>태그는 <head>태그 안에 넣는다. 웹페이지가 실질적으로 담는 정보는 <body>에 넣어야 하지만, css는 디자인을 다루지 웹페이지가 가진 정보를 담진 않기 때문이다.
다음으로 할 일은 어떤 부분을 이렇게 꾸며라 지시하는 것이다. 예를 들어 <a>태그 안의 모든 글자의 색을 빨간색(red)로 바꾸고 싶다고 하자. 처음 할 일은 내가 가리키는 부분이 어디 부분인지 웹브라우저가 인식할 수 있도록 정의해주는 것이다. 그래서 나온 것이 선택자라는 것이다. 선택자는 중괄호를 이용해서 내가 어떤 부분을 선택했는지 정의하는 요소이다. 이런 식으로 쓴다.
- 선택할 부분 { }: 선택자(Selector)
가리킬 수 있는 부분은 다양하다. 어떤 부분까지 가리킬 수 있는가에 대해서는 다음 번에 본격적으로 다루도록 한다. 일단 나는 태그 a를 선택하고 싶으므로 a { }까지 써넣으면 된다.
다음으로는 글자색을 빨간색으로 바꾸라고 써줘야한다. 즉 바꾸고 싶은 속성과 구체적인 속성값을 정해주어야 한다. 이러한 것은 선택자의 중괄호 안에다가 써주면 된다.
- 속성:속성값;
CSS에서의 속성을 정의하기 위해서는 ‘:’와’;’을 활용한다. html에서 ‘=’의 역할을 ‘:’이 대신하며 ‘;’로 속성 정의가 끝났음을 웹브라우저에게 전해준다. 글자색을 빨간색으로 변화시키기 위해서 중괄호안에 color:red;를 써준다.
CSS의 등장(생활코딩): https://opentutorials.org/course/3086/18312
혁명적 변화(생활코딩): https://opentutorials.org/course/3086/18318
아주 간단하게 a태그내의 글자색이 바뀐 것을 알 수 있다. 여기서 잠깐 이러한 CSS의 문법이 얼마나 큰 혁신이었는지 보고가자. 과거에 똑같은 작업을 HTML로 하기 위해서는 어떤 짓을 했어야 했을까?
<a>태그가 달린 모든 내용에 글자의 색을 담당하는 태그를 일일이 달아서 처리해야 했다. 이런 작업이 지금처럼 간단한 문서라면 노력이 많이 필요하지 않겠지만, a태그가 html문서내에서 많이 쓰이면 쓰일수록 들여야 할 노력은 그에 비례할 것이다. 이것이 CSS가 가져온 혁신 중의 하나다.
과거에 html만 있던 시절엔 웹페이지 디자인을 한 번하고 나서 그것을 수정하기 위해선 그와 관련된 태그를 일일이 수정해야하는 노력이 필요했지만, CSS는 코드는 몇 줄로 끝낼 수 있게 된 것이다. 즉 유지보수 비용이 획기적으로 줄어들게 된다. 다음 글에서 클래스와 id를 배우면서 이러한 장점을 더 제대로 느낄 수 있게 될 것이다.
CSS 등장 이전의 상황(생활코딩): https://opentutorials.org/course/3086/18311
*생활코딩 학습일기 카테고리의 글들은 모두 2021년, 제 이전 블로그에서 작성한 글입니다.
*정확한 정보를 전달하기 위해서 일부 내용은 수정하였습니다.
'생활코딩 학습일기(Web 기초)' 카테고리의 다른 글
| 8) 박스모델과 그리드 (0) | 2022.08.12 |
|---|---|
| 7) CSS의 class와 id (0) | 2022.08.12 |
| 5) 웹페이지 탐방하기 (0) | 2022.08.11 |
| 4) 웹의 구조와 웹사이트 올리기 (0) | 2022.08.11 |
| 3) 기본적인 웹사이트 만들기 (0) | 2022.08.11 |
