일단.. 저는 디자이너는 아니구요.. 일단은 프로그래머.. 를 지향하는 인간입니다. 뭐 개인적인 소개는 필요 없고.. 본론으로 가죠 뭐.. 참고로 제가 쓴 강좌는 스크롤이 우주로 가니까 이런 경우 신체가 거부하는 증상이 있는 분들은 안보시는게 좋습니다.

1. CSS가 뭔데?

일단은 HTML은 간단히 이해하고 넘어갑시다. HTML은 여기저기 많이 말하지만 Hyper Text MarkUp Language 의 약자입니다.

 

대충 의미를 가지는 문서라고 아시면 됩니다. 많이 쓰시는 table 태그를 예로 들어보죠.

 

 <table border="1">
     <thead>
        <tr>
            <th>제목</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>내용</td>
        </tr>
    </tbody>
</table>

이것은 테이블을 구성하는 태그들을 좀 써본겁니다.

 

table 은 표라는 뜻을 가집니다. thead는 표에서 제목 부분이라는 말이구요 tbody는 표에서의 내용 부분이라는 말입니다.

tr는 table row 의 약어일겁니다만 사실상 html에서 약어 따위는 큰 의미가 없으니 다음부터는 언급안하겠습니다. 여튼 표에서 한 줄을 의미합니다. th는 표에서 제목을 나타내는(제목 부분이 아닙니다.) 칸을 말하고, td는 표에서의 내용이 들어가는 칸(엑셀에서의 cell)을 말합니다.

 

결론적으로 저 내용은 이렇게 나옵니다.

 

제목
내용

 

자 그럼 하나만 더 봅시다.

 

<ol>
    <li>리스트1</li>
    <li>리스트2</li>
    <li>리스트3</li>
</ol>

이것은 순서를 가지는 리스트를 나타내는 ol 태그입니다. li 태그는 ol이나 ul(순서가 없는 리스트, 일반적으로 홈페이지의 네비게이션을 위해 존재하는 메뉴들이 이것에 적당한 속성을 가졌다고 할 수 있습니다.)을 표현하는 내용이 되어 줍니다.

 

위의 html은 이렇게 표현됩니다.

 

1. 리스트1
2. 리스트2
3. 리스트3

 

위의 코드들을 자세히 보시면 공통점이 존재합니다. 여는 태그가 있었다면 반드시 닫는 태그가 존재한다는 겁니다. 뭐 그건 xhtml 어쩌고 저쩌고 하면서 설명해야되는데 여기선 상관 없으니 건너뛰겠습니다.

 

여튼 위에서 나온 내용들을 각기 다른 브라우저에서 보시면 미묘하게 차이가 납니다. 위에서는 아무런 스타일 시트를 선언하지 않고 브라우저의 디폴트로 보여주기 때문에 차이가 나는 것 입니다. 이건 나중에 브라우저별로 css를 다르게 읽는 부분에서도 설명을 하게 될 거고 지금은 기본 지식을 설명하려는 거니 넘기겠습니다.

 

여튼 css는 이렇게 html의 태그들을 보여주는 방법을 직접 바꿀 수 있는 편리한 방법입니다.

 

일단 저 ol을 보통 홈페이지의 메뉴를 표현하듯이 해보죠

 

 <style type="text/css">
.ol_css { }
.ol_css li {
    list-style-type : none;
    float : left;
    display : block;
    padding : 0.4em;
    font-weight : bold;
    background : #333;
    color : #fff;
}
</style>
<ol class="ol_css">
    <li>리스트1</li>
    <li>리스트2</li>
    <li>리스트3</li>
</ol>
<hr />
<ol>
    <li>리스트1</li>
    <li>리스트2</li>
    <li>리스트3</li>
</ol>

첫줄의 <style type="text/css"> 라는 말은 지금부터 css를 선언한다는 말입니다. 이것은 내부 css 선언이라고 하는 방법입니다. 이것도 나중에 설명하겠습니다. 여튼 그렇게 해서 ol_css 라는 css 클래스를 만들었고 ol_css 가 적용된 태그에서 li 태그에만 적용할 css를 선언해 주었습니다. 순서대로 설명하자면

 

list-style-type : none; // 리스트 표현할때 앞에 붙이는 것을 없앨 것 ( 여기서는 1. 리스트1 에서 1. 을 말합니다.)
float : left; // 떠있는 형식으로 표현하며 정렬은 왼쪽으로
display : block; // 표현 방식은 block
padding : 0.4em; // 안쪽 여백은 0.4em
font-weight : bold; // 글자는 굵게
background : #333; // 배경색은 rgb 컬러로 333333
color : #fff; // 글자의 색상은 rgb 컬러로 ffffff (흰색 > rgb 컬러 : 가산 혼합으로 빛으로 표현됩니다.)

이렇게 됩니다.

 

그리고 그 결과물을 실제로 보자면

 

1. 리스트1
2. 리스트2
3. 리스트3

---

1. 리스트1
2. 리스트2
3. 리스트3

이렇게 나옵니다. (style이 안먹혀서 걍 빼버리고, 그리고도 좀 깨져서 inline으로 직접 써버렸습니다. 일단 그냥 html 작성하실때 저렇게 하실때는 문제 없습니다.)

 

위에 써줬던 ol에는 ol_css 라는 클래스를 정의해주었고 밑에 써줬던 ol에는 아무런 css 선언을 해주지 않았습니다.

 

확연하게 차이가 나죠?

 

다만 주의하셔야될 점은 css의 맨 앞은 cascade 라는 약어입니다. 네이버에서 찾아봤더니 폭포수처럼 떨어지는 정도로 나오더군요. 그렇습니다. css는 밑으로 적용되어 나가는 특징을 가집니다. 절대로 위로는 안갑니다. 밑에 있는 ol에는 클래스가 적용되지 않는다는 말입니다.

 

대충 css는 이런 식으로 사용을 합니다.

 

2. css의 선언

기본적으로 css 선언은 총 3가지 방법이 있습니다.

 

1. external (외부 스타일시트 선언)

보통.. 홈페이지들 보면.. head 부분에

 

 <link rel="stylesheet" type="text/css" href="style.css" />

 

라고 쓴 부분을 보실 수 있을 겁니다. 이게 외부 css 선언입니다. css 선언을 별도의 파일에 선언하고 html 에서 그것을 부름으로서 css를 사용할 수 있게 하는 방법입니다. 보통 이 방법이 나중에 유지/보수(다 끝난 뒤에 수정을 가할 때) 측면에서 제일 나은 편입니다. 

2. internal (내부 스타일 시트 선언)

방금 위에서 제가 쓴 방법이 내부 스타일 시트 선언입니다. 이 방법은 유지/보수 측면에서 그다지 좋다고 할 수 없는 방법이며 덤으로 헤드 부분에 명시하지 않는 경우 html의 의미 표현적인 측면에서도 그다지 좋은 방법은 아닙니다.

3. inline (인라인 스타일 시트 선언)

보통.. 귀찮을때.. 나 일단 하고 보자는 때.. 또는 아무 생각 없을 때 주로 쓰이는 방법인데요.

  

<p style="color : red;">어쩌고 저쩌고</p> 

 

p 태그에 보시면 style 부분이 있는데 이렇게 css를 선언하는 것이 인라인 선언 방법입니다. 유지/보수 측면에서는 최악을 달립니다. 개인적으로 상당히 비추천합니다.

이렇게 3가지 방법으로 css를 사용할 수 있습니다.

저는 1번을 추천하는 데 그 이유는 css가 html에서 완전히 분리되기 때문에 html 쪽을 건들 필요 없이 css 파일에 대한 수정만으로 홈페이지의 모양을 완벽하게 바꿔버릴 수 있습니다.