티스토리 스킨 만들기 (4) - CSS 개요

HTML문서에 페이지의 구조와 컨텐츠를 담는 과정을 간략하게 살펴봤습니다. 이제부터는 스타일과 배치를 고려하면서 HTML 문서를 편집합니다. 종속형 스타일시트(Cascading Style Sheets) 짧게 스타일 시트(CSS)라고 부르는 문서는 HTML로 작성한 구조를 보기좋게 꾸미고 배치하기 위한 것입니다. STYLE태그를 이용해서 HTML문서 안에 포함시킬 수도 있지만 CSS파일을 별개로 두어 스타일을 따로 관리하는 것이 유지관리하기 더 편합니다.

기본 사용법

<div class="box"> 상자 </div >

위와 같은 HTML코드가 있으면, 웹브라우저에서는 다음과 같은 모양으로 보이게 됩니다.

상자

아래와 같이 `box`클래스를 가지는 `div`요소에 스타일을 추가합니다. 별개의 문서로 만들거나 `style`태그를 사용할 수 있습니다. 여기서는 후자의 방법을 사용합니다.

<style>
div.box {
    border: 2px #000 solid; /* 각 변을 2픽셀 두께의 검정색 실선으로 칠합니다 */
    border-radius: 5px; /* 모서리를 5칙셀만큼 둥글게 만듭니다 */
    display: inline-block; /* 표시 형태를 줄안 블록으로 정합니다. */
    margin: 5px; /* 바깥쪽 여백을 5픽셀 줍니다 */
    padding: 3px; /* 안쪽 여백을 3픽셀 줍니다 */
}
</style>
<div class="box"> 상자 </div>

상자

CSS 문법은 `선택자 {옵션}`으로 이루어져 있습니다. 각 옵션은 세미콜론(`;`)으로 끝냅니다. 주석은 `/*`로 시작하여 `*/`로 끝납니다. 요소별로 가능한 스타일 옵션에 차이가 있습니다. CSS는 굉장히 많은 옵션을 지원합니다.

선택자

선택자를 이용해 요소를 지정하고 스타일을 변경할 수 있습니다.

<div id="box1" class="bg-red tx-white" ></div>

위의 HTML 코드에서 div, id, class는 해당 요소를 선택할 때 도움을 줄 수 있는 기본 속성들입니다.

id는 페이지안에서 유일한 요소로 작동하는 요소의 이름을 지정합니다.
같은 ID값을 가지고 있는 요소가 둘 이상 있으면 웹페이지가 원활하게 동작하지 않을 수 있습니다.

class는 같은 패턴을 가진 요소들을 다룰 때 사용할 수 있습니다.
태그의 종류에 관계없이 같은 클래스를 가지는 속성의 스타일을 조정합니다.
공백으로 구분하여 한 요소에 여러 클래스를 부여할 수 있습니다.

div { /* 모든 div 태그 요소에 적용 */ }
#box1 { /* id가 "box1"인 요소에 적용 */ }
.bg-red { /* bg-red 클래스를 가진 요소에 적용 */ }
div.tx-white { /* div요소이면서 .tx-white클래스를 가지는 요소에 적용 */ }
div .bg-red { /* div요소 안에 bg-red 클래스를 가지는 요소에 적용 */ }

첫 줄은 div, span등 태그의 이름을 지정하는 형태입니다.
해당하는 ID값을 가진 요소를 선택하는 경우 #으로 시작합니다.
CLASS값을 이용해 요소를 선택한다면 .으로 시작합니다.

관계를 이용해 요소를 선택하는 방법도 있습니다.
선택자를 붙여쓰는 경우 두 조건을 모두 만족하는 요소를 선택하게 됩니다.
선택자 사이에 공백이 있는 경우 앞에 있는 선택자 아래에 있는 모든 요소를 선택합니다.
다음과 같은 방식 또한 사용할 수 있습니다.

선택자	기능
A B	A안에 있는 모든 B요소들을 선택
A>B	A 바로 아래에 있는 B요소들만 선택
A+B	A 바로 다음에 있는 B 요소 선택
A~B	A 다음에 있는 모든 B요소 선택

고급 응용을 위한 가상 클래스 선택자도 있습니다.
나중에 필요할 때마다 다루도록 하겠습니다.