티스토리 뷰

CSS란 무엇인가?

CSS는 Cascading Style Sheets의 약자이다. 한글로 하면 '계단식 양식 문서들' 이란 어색한 해석이 된다. 왜 이런 이름이 지어 졌는지 궁금하면 지난 포스팅 글인 'CSS는 왜 Cascading Style Sheet일까?'를 참고하도록 하자. CSS는 다음의 특징들을 갖는다.

  • CSS는 HTML 요소를 화면, 종이 또는 다른 매체에 표시하는 방법을 설명한다.
  • CSS는 많은 작업을 저장하여, 한 번에 여러 웹 페이지의 레이아웃을 제어 할 수 있다.
  • HTML 내부에 삽입된 CSS가 아닌 외부 스타일 시트는 CSS 파일에 저장된다.

CSS를 어디에 쓰지?

CSS는 디자인, 레이아웃 및 다양한 장치 및 화면 크기에 대한 디스플레이의 변형을 포함하여 웹 페이지의 스타일(양식)을 정의하는 데 사용된다.

CSS가 없던 시절의 문제

초기 HTML은 웹 페이지의 형식을 지정하기위한 태그를 포함하지 않았다. HTML은 다음과 같이 웹 페이지의 내용을 설명하기 위해 작성되었다.

<h1> 제목 </ h1>
<p> 단락 </ p>

하지만 <h1>font</ h1>와 같은 태그와 색상 속성이 HTML 3.2 사양에 추가되면 웹 개발자에게는 악몽이 시작된다. 모든 단일 페이지에 글꼴과 색 정보가 추가 된 대형 웹 사이트 개발은 야근과 노가다의 연속이 되버린다. 가령 500개 페이지의 글자 색상 하나만 변경하려고 한다고 해도 모든 페이지에 대해 일일이 작업해야 하는 것이다.

이 문제를 해결하기 위해 W3C(World Wide Web Consortium)에서 CSS를 만들었다. 이렇게 만들어진 CSS는 HTML 페이지에서 스타일 서식을 가차없이 제거해버렸다. 오~ 굿~! 내용과 스타일을 분리한 것이다.

CSS로 많은 작업을 절약 할 수 있다!

스타일 정의는 일반적으로 외부 .css 파일에 저장된다. 물론 HTML의 헤더 부분이라던가 태그 안에 쓸 수도 있지만 보통은 외부 파일에 따로 만들어서 쓰는게 작업하기 편리하고 관리도 용이하다. 

외부 스타일 시트 파일을 사용하면 하나의 파일만 변경하여 전체 웹 사이트의 모양을 변경할 수 있다! 위에서 얘기했던 500개 페이지를 모두 변경할 필요가 없는 것이다. 500개 HTML에서 참조된 단지 1개의 CSS파일만 변경하면 되는것이다.

정리

CSS는 HTML에서 내용과 스타일을 분리하기 위해 만들어진 웹페이지의 스타일 서식이다.

신고
공유하기 링크
TAG
,
댓글
댓글쓰기 폼
Total
7,142,121
Today
249
Yesterday
1,370
«   2017/12   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
글 보관함