[CSS] 1. CSS의 기본 개념(1) - CSS란?

 

 

 

HTML과 마찬가지로, 웹 문서의 스타일을 결정하는 CSS(Cascading Style Sheet) 역시 웹 표준 요소입니다. HTML로 내용을 구성한 후, CSS를 이용해 웹 문서의 디자인과 레이아웃, 배치, 배경 요소 등을 지정해 줄 수 있게 되죠. HTML과 CSS를 분리해 구성하기 때문에 서로 영향을 주지 않고 내용만을 수정하거나, 반대로 디자인 요소만 변경해 주는 것도 가능하게 되죠. 예를 들어, 이러한 속성을 이용해 디바이스나 브라우저에 따라 같은 내용이 다른 디자인으로 보이게 만드는 반응형 웹 디자인을 구현할 수도 있게 되는 것입니다. 

 

우선 이번 아티클부터 CSS를 공부하면서, 기성의 웹 사이트의 CSS 미적용와 CSS 소스 파일을 간단하게 확인할 수 있도록 크롬의 확장 프로그램 중 하나인 [Web Developer]를 사용하겠습니다. 

 

Web Developer

 

 

---

 

 

'스타일'의 형식

 

스타일을 지정하기 위한 CSS 소스에서의 형식은 기본적으로 선택자와 해당 선택자에 적용할 속성값 정보로 구성하게 됩니다. 이 한 줄의 스타일이 하나의 스타일 단위가 된다고 생각합시다. 선택자에 지정할 스타일 정보는 중괄호( { } ) 단위로 묶여서 작성하게 되죠. 여기서 선택자는 일단 현재 단계에서는 HTML 파트에서 배운 특정 '태그'라고 생각해 주세요.

 

선택자 { 속성1: 속성값1; 속성2: 속성값2; }

 

 

예를 들어 작성해 보겠습니다. <p> 태그로 구분되는 텍스트 단락에 대해, [가운데 정렬]을 적용하고 글자색을 [파란색]으로 지정하겠다고 가정하겠습니다. 이를 CSS 스타일로 표현하면 다음과 같습니다. 

 

p {
   text-align: center;
   color: blue;
}

 

위의 양식에서 보다시피, 단락을 구분하는 <p> 태그에 적용하는 스타일이므로 선택자에 'p'를 작성하고 여기에 적용할 속성에 대해서 text-align 속성에 center, 그리고 color 속성에 blue를 적용했습니다. 앞으로 CSS에서는 이러한 방식으로 선택자에 대한 속성과 속성 값을 지정할 것입니다. 개념 자체는 HTML에서 배운 태그와 속성과 크게 다르지 않습니다. 

 

참고로 /* */를 이용해 CSS에서도 주석을 삽입할 수 있으며, 향후 cssminifier 등의 서비스를 이용해 이러한 CSS 파일을 경량화 할 수도 있습니다. 

 

 

CSS Minifier & Compressor | Toptal®