CSS란 무엇인가?
CSS(Cascading Style Sheets)는, HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일, 즉 디자인을 지정하는 데 사용하는 언어입니다.
CSS를 사용하면 글꼴, 색상, 배경 이미지, 레이아웃 등을 조정하여 웹 페이지를 사용자의 취향에 맞게 디자인할 수 있습니다.
화면상의 웹 페이지뿐만 아니라 다양한 매체, 예를 들어 프린트할 때 종이에 어떻게 디자인할지 지정할 수 있으며, 시각장애인을 위한 스크린리더의 음성 스타일도 일부 디자인할 수 있습니다.
사전에 필요로 하는 지식
HTML에 대해 알고 있어야 합니다.
CSS는 HTML로 작성된 웹 페이지를 스타일하는 언어이기 때문입니다. 최소한 HTML이 무엇인지 정도라도 파악하고 있어야 CSS 코딩을 시작할 수 있습니다.
CSS를 소개합니다.
CSS는 "Cascading Style Sheets( 흐름이나 계단식으로 스타일 규칙들이 적용되도록 정의(혹은 지정)하는 스타일 문서)"의 약어로, 웹 페이지의 디자인과 레이아웃을 정의하기 위해 사용되는 스타일 시트(문서) 언어입니다.
HTML이 웹 페이지의 구조와 콘텐츠의 의미를 정의(지정)하기 위해 사용되는 것과 달리, CSS는 웹 페이지의 시각적인 표현 방식을 지정합니다. 즉, 웹 페이지의 (일반적으로 '디자인'이라 말하는) 스타일을 위해 사용하는 언어입니다.
잠깐! CSS는 웹 페이지를 스타일하는 언어이지만, 브라우저에서 표시하는 웹 페이지에 대한 시각적인 스타일 뿐만 아니라 다양한 매체, 예를 들어 프린트할 때 종이에 어떻게 디자인할지 지정할 수 있으며, 시각장애인을 위한 스크린리더의 음성 스타일도 일부 디자인할 수 있습니다.
CSS는 마크업한 HTML 요소들을 스타일하는 언어입니다.
CSS는 웹 페이지의 콘텐츠를 시각적인 표현 방식에 대해 스타일하는 언어입니다.
웹 페이지의 콘텐츠는 HTML 요소를 마크업하여 구성합니다. HTML 요소로 구성된 웹 페이지를 디자인하는 언어가 CSS입니다.
즉, CSS는 HTML 요소들을 스타일하는 언어입니다.
잠깐! HTML 요소 이외에도 XML 요소(XML도 HTML처럼 요소로 구성되어 있습니다.)도 브라우저에 표시되고 CSS는 XML 언어도 디자인합니다. 차차 다룰 예정입니다.
HTML은 마크업 언어이지만 CSS는 마크업 언어가 아닙니다. 프로그래밍 언어도 아닙니다. Style sheets(스타일 문서)에 HTML 문서에 마크업되어 있는 요소들을 선택해서 스타일을 적용하는 언어입니다. 웹페이지의 스타일을 CSS로 구현하는 것입니다. JavaScript 언어로도 디자인을 구현할 수 있지만, JavaScript도 스타일을 구현하기 위해서는 CSS 언어를 같이 사용해야 가능합니다. JavaScript 언어 자체로 웹 페이지의 스타일을 직접 다루는 것이 아니라는 의미입니다.
그럼 CSS 예제로 살펴 보겠습니다.
웹 페이지의 텍스트를 빨간색으로 스타일링하고 싶다고 가정해봅시다. 다음은 CSS를 사용하여 HTML 요소에 해당 스타일을 적용하는 간단한 예제입니다:
p: <p> 요소를 선택해서 스타일한다는 의미입니다.color: red;: 글자색을 빨간색으로 스타일하겠다는 의미입니다.- 이렇게 CSS 언어로 HTML로 마크업한 요소를 선택해서 스타일을 지정하면 브라우저는 스타일이 적용된 웹 페이지를 표시합니다.
위 예제는 CSS 언어로 HTML의 <p> 요소의 글자색을 스타일한 것입니다. CSS를 활용하여 웹 페이지의 다양한 요소에 스타일을 적용할 수 있습니다. 글자색뿐만 아니라 배경 이미지, 레이아웃 등 원하는 스타일을 지정할 수 있습니다.
CSS의 주요 특징에 대해 알아보겠습니다.
CSS는 웹 페이지의 디자인, 레이아웃, 스타일을 지정하려고 작성하는 코드로 된 스타일 시트(Style sheet) 언어입니다. 스타일 시트 언어란 문서의 스타일과 서식을 정의하는 언어를 말하는데 CSS는 HTML 문서의 스타일과 서식을 정의하는 언어입니다. 스타일 시트 언어 중에는 CSS 이외에도 Sass, Less, Stylus 등 다양한 언어가 있으며, 이들은 CSS를 확장하거나 간소화하여 개발자들이 스타일링 작업을 더욱 편리하게 할 수 있도록 도와줍니다. HTML로 작성된 웹 페이지에 CSS를 적용하면 웹 페이지의 모양과 느낌을 세밀하게 제어할 수 있습니다. CSS는 웹 개발에서 필수적인 기술로 사용되며, 웹 페이지의 시각적인 표현을 개선하고 사용자 경험을 향상시킬 수 있는 강력한 도구입니다.
CSS는 다음과 같은 주요 특징을 가지고 있습니다.
CSS 구문과 서식은 매우 간단하고 쉽습니다.
정말로 CSS의 구문과 서식은 매우 간단합니다. 몇 가지만 익히면 그만입니다.
다양하고 강력한 스타일을 지정하는 속성들이 있습니다.
CSS는 다양하고 강력한 스타일 속성을 제공하여 웹 페이지의 다양한 요소를 스타일링할 수 있습니다. 예를 들어, 색상, 크기, 여백, 텍스트 스타일, 배경, 그림자 등을 조정할 수 있습니다. 이 뿐만이 아닙니다. 애니메이션도 구현할 수 있습니다.
반응형 웹 디자인을 구현할 수 있습니다.
CSS는 반응형 웹 디자인을 구현하는 데에도 사용됩니다. 브라우저의 크기, 종류, 특성뿐만 아니라 다양한 매체 등에서 각각의 상황에 맞추어 스타일할 수 있습니다. 데스크탑과 모바일에서 웹 페이지를 각각의 스타일로 구현하고 조정할 수 있습니다.
CSS는 계속 발전하고 있으며, 업데이트되고 있습니다.
CSS는 인터넷에 기반한 개방적이고 자유로운 오픈 웹(Open Web)의 핵심 언어 중 하나입니다.
오픈 웹은 모든 사람들이 접근 가능하고 참여할 수 있는 웹 환경을 지향하며, 웹 표준과 개방형 플랫폼을 기반으로 구축되는데, 다양한 운영 체제와 장치에서 동작할 수 있도록 웹 표준을 준수합니다. 웹 표준은 웹 기술과 프로토콜을 정의하는 규약이며, 주요한 웹 표준 기술로는 HTML, CSS, JavaScript 등이 있습니다.
CSS도 구문과 서식, 구현 방식 등의 표준을 개발하고 장려하기 위해 W3C에서 명세서를 관리하고 있습니다.
모던한 웹에서 디자인은 매우 중요하게 다루어지고 있습니다. 브라우저의 발달과 기술의 진보와 더불어서 CSS도 계속 발전해가고 있으며 업데이트되고 있습니다. HTML이나 다른 언어와 마찬가지로 CSS도 버전을 관리하는 명세서가 있으며, CSS1, CSS2.1, CSS3로 버전을 붙입니다. 현재 최신 버전은 CSS3 버전입니다.
CSS4 버전은 앞으로도 없을 것 같습니다. 이러한 이유는 CSS3가 지속적으로 업데이트되며, 새로운 기능이나 개선된 기능이 필요할 때마다 해당 모듈이 독립적으로 개발되고 표준화되기 때문입니다. CSS4라는 개념은 처음부터 전체적인 버전으로 개발되는 것이 아니라, CSS3에서의 모듈 개발과 업데이트 방식을 유지하면서 새로운 기능이나 모듈이 추가되는 형태로 진행되고 있습니다. 이러한 모듈화된 개발 방식은 더 빠르고 유연한 업데이트를 가능하게 하고, 브라우저 제작자와 개발자들이 필요한 기능을 더 빠르게 채택하고 구현할 수 있도록 돕습니다. 또한, CSS3의 모듈화 방식은 호환성과 일관성을 유지하면서 새로운 기능을 지속적으로 도입할 수 있는 장점을 가지고 있습니다. CSS3는 기존 CSS2의 확장된 기능과 새로운 기능을 도입한 버전입니다. CSS3는 모듈화된 구조로 개발되어 각 모듈마다 독립적으로 업데이트할 수 있는 특징을 가지고 있습니다. 따라서, CSS4가 앞으로도 없을 것 같은 것은 CSS를 모듈별로 개발하고 업데이트하는 방식을 유지하기 때문입니다.
이러한 이유로 W3C는 CSS 명세의 버전을 올리지 않고, 주기적으로 특정 시점에서의 CSS 표준의 상태를 정의한 CSS Snapshot을 제공합니다. CSS Snapshot은 개발자와 브라우저 제작자에게 현재 CSS 표준의 핵심 기능과 지원 범위에 대한 정보를 제공하여 일관된 개발과 호환성을 유지하는 데 도움을 줍니다. 이는 CSS의 사용과 구현에 있어 표준 준수와 호환성을 보장하는 데 중요한 참고 자료가 됩니다.