[CSS] CSS(Cascading Style Sheets)란 무엇인가?

 CSS란 무엇인가? (HTML과의 차이) 

CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념으로 웹 문서의 콘텐츠와 레이아웃, 글꼴과 같은 시각적 요소들의 디자인을 분리하기 위한 목적으로 등장하였습니다. HTML이 웹 문서의 텍스트나 이미지, 표와 같은 뼈대를 만드는 것이라면 CSS는 HTML로 만들어 놓은 텍스트의 색상이나 크기와 같은 웹 문서의 디자인을 담당한다고 생각하시면 됩니다. 이렇게 CSS를 사용하면 디자인 코드를 따로 뺄 수 있어 문서의 레이아웃을 효과적으로 할 수 있고, 간단한 코드만으로도 웹 문서 전체의 글자 크기나 글 자체, 줄 간격, 배경 색상 등도 자유롭게 디자인 할 수 있습니다.

 

CSS의 장점

• 한번 스타일을 정의해놓고 여러 개의 문서에서 여러 번 불러 사용할 수 있어 재사용성이 높다.
• 일관성 있는 웹 페이지의 제작이 가능하다.
• 스타일 수정 시 정의된 한 곳만 수정하면 되기에 유지보수가 쉽다.
• 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
• 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.

 

 CSS의 역사 

CSS1

CSS1은 1996년 12월 그래픽 시스템을 차용해서 만들어졌습니다. CSS가 없었을 때는 기존의 HTML 태그에 스타일을 입히기 위해서는 inline-style로 모든 HTML태그에 일일이 입력해주어야만 했습니다. 이는 수많은 반복작업을 양산하고 일관성 있는 웹 페이지를 만들기 힘들었는데요. 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS인 것입니다. 이 스타일 시트를 활용하여 우리는 웹 문서의 style만을 따로 코드로 분리하여 관리할 수 있게 되었습니다. CSS1에서는 CSS의 가장 초기버전이며 텍스트 서식, 폰트 설정, 마진 설정 같은 CSS가 가진 핵심 기능이 포함되어 있습니다.

 

CSS2

CSS2는 1998년 5월 W3C에 의해 발표되었으며 대부분의 브라우저에서 지원합니다.(IE6 이하에서는 일부 작동 X) CSS2는 CSS에 비해 사용자 환경이나 플러그인 등에 관계없이 홈 페이지를 출력, 인쇄할 수 있는 기능이 부가되었고, XML 및 HTML 4.0을 지원하며, 다양한 콘텐츠 배치 기능이 보다 강화된 것이 특징입니다. 또한 화면의 레이아웃을 조정할 수 있도록 미디어별 스타일 시트와 국제적인 접근성을 지원합니다.

 

CSS3

CSS3은 2005년 12월 시작하여 현재도 계속해서 발전 중인 가장 최신버전입니다. 지금 W3C가 채택하고 있는 표준이며 CSS3은 CSS1, CSS2와 달리 모든 사양을 포함한 단일 형태의 CSS3는 정의되지 않았습니다. 현재 W3C에서는 로드맵을 제공하고 있으며, CSS 각 모듈의 명세 정의 및 관련 사항은 사이트에서 확인이 가능합니다.

 

 CSS를 사용하는 방법 

CSS를 사용하는 방법은 일반적으로 3가지가 있습니다.

 

1. HTML 안에서 style 속성을 이용하는 방법
2. <style> 태그를 통해 HTML 문서 내부에서 이용하는 방법
3. 별도로 CSS 파일을 분리하여 link태그의 rel="stylesheet"을 활용하여 HTML의 문서에 연결하는 방법

 

참고로 1번 방법인 HTML안에서 style속성을 사용하면 하나의 태그밖에 적용이 안됩니다. 모든 HTML 태그들에 공통적인 스타일을 주기 위해서는 2번이나 3번 방식을 사용하시면 좋고 그중에서도 3번으로 작성하시는 것이 코드를 분리할 수 있기 때문에 유지보수 차원에서 좋습니다. 

 

 CSS 사용 예시 

H3 태그에 빨간색 이탤릭체를 지정하고 싶다면 어떻게 해야 할까요?

 

HTML 사용 시

<h3>
  <i>
    <font color = "red">빨간색 이탤릭체</font>
  </i>
</h3>

html로 <h3> 태그에 빨간색 이탤릭체를 구현하려고 한다면 각종 태그를 복잡하게 설정해주어 구현해야 합니다. 심지어 일회성입니다.

 

CSS 사용 시

h3{
  font-style:italic;
  color:red
}

위의 코드로 모든 h3 태그에 빨간색 이탤릭체를 한 번에 적용할 수 있습니다.

 

※ CSS 사용법이 궁금하시다면 아래 글을 참고해주세요.

[CSS] CSS 사용법 & 예제 총정리 (적용방법, 우선순위, 문법)