본문으로 바로가기



HTML 과 CSS 의 개념이 확립되지 않으셨다면 http://donghoon.me/23 에서 그 개념을 확립해보세요!


이번 시간에는 CSS 강좌를 시작하기 전 알고 있어야 할 상식에 대해 정리해 보았습니다. 이번 시간부터는 코드의 결과를 보여드리기 위해 JSFiddle 이라는 코드 테스트 사이트를 이용하도록 하겠습니다.


선택자를 사용하는 이유


선택자를 사용하는 이유는 간단합니다. 우선 아래 코드를 비교해 보세요. style="color: red" 부분은 글자 색을 빨간색으로 정하는 스타일 입니다. 추후에 배우게 될 것이지만 예제에서 보다 더 좋은 코드를 선택하기 위해 미리 설명해 드리는 것입니다.


1. 선택자를 사용하는 방법 ▶ https://jsfiddle.net/yoonano/Lkuqw3wb/


2. 선택자를 사용하지 않는 방법 ▶ https://jsfiddle.net/yoonano/yn5vm79z/


이제 비교가 되시나요? 결과는 같지만 코드의 길이가 다릅니다. 물론 저렇게 짧은 스타일 코드를 가지고 있다면 선택자를 사용하지 않아도 좋습니다. 그렇다면 이런 경우에는 어떨까요? ▶ https://jsfiddle.net/yoonano/mx39cj25/


저런 복잡한 코드가 있다면 당연히 선택자를 사용해야 할 것입니다. 반복되는 코드를 여러번 작성하는 것은 효율적이지 못하니까요.


CSS 를 사용하는 방법 3가지


CSS 를 사용하는 방법에는 3가지의 형태가 있습니다. 방법을 소개하는 순서는, 나노가 추천하는 순서대로 작성해 보도록 하겠습니다.


1. 외부 스타일을 불러오는 방법 ▼


1
2
3
4
5
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./style.css" />
        ...
cs


이 방법은 외부에 별도의 파일로 존재하는 스타일을 불러오는 방법입니다. 페이지마다 긴 스타일 코드를 작성할 수는 없기 때문에 외부에 1개만 만들어두고 각 페이지가 불러와서 스타일을 적용하게 됩니다. 이 때 style.css 안에는 CSS 로 작성된 스타일 코드가 존재하게 됩니다.


2. HTML 에 스타일을 작성하는 방법 ▼


1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
    <head>
        <style>
            ...
        </style>
    ...
cs


이 방법은 내부에 스타일을 작성하는 방법입니다. 간단하게 하나의 페이지만 있다면 간편하게 코딩이 가능하니 추천드리고 싶지만, 전문적인 코딩을 위해서는 1번 방법을 사용하는 것이 더 낫습니다.


3. 각 태그에 스타일을 적용하는 방법 ▼


1
2
3
4
...
<body>
    <p style="color: red">텍스트</p>
    ...
cs


이 방법은 한번만 사용할 스타일이라면 사용하는 것이 좋습니다. 같은 스타일을 여러번 적용하는 것은 클래스로 하는 것이 효율적이라는 것에 대해서는 위에서 알아보았으니 적절히 사용하도록 합니다.



선택자 총 정리


그러면 본격적으로 선택자를 어떻게 사용하는지 총 정리를 해 보도록 하겠습니다. 효율적이진 못하지만, 예제를 위해 CSS 를 사용하는 방법 중 2번째를 사용해 보았습니다.


1. 태그 선택 ▼


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTPYE html>
<html>
    <head>
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>빨간색 텍스트 1</p>
        <p>빨간색 텍스트 2</p>
    </body>
</html>
cs


태그는 저의 지난 HTML 강좌에서도 아실 수 있지만 <태그> 로, < 와 > 안에 쌓여있는 것을 말합니다. 그러한 태그에 스타일을 적용하는 방법 입니다.


2. 클래스 선택 ▼


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTPYE html>
<html>
    <head>
        <style>
            .text-is-red {
                color: red;
            }
        </style>
    </head>
    <body>
        <p class="text-is-red">빨간색 텍스트 1</p>
        <p class="text-is-red">빨간색 텍스트 2</p>
    </body>
</html>
cs


클래스 선택은 .<클래스> 의 형태로 입력합니다. 스타일 적용시 주로 클래스를 사용합니다. 클래스는 이렇게 중복 사용도 가능합니다. ▼


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTPYE html>
<html>
    <head>
        <style>
            .text-is-red {
                color: red;
            }
            .underline {
                text-decoration: underline;
                /* underline 은 밑줄을 뜻합니다. */
            }
        </style>
    </head>
    <body>
        <p class="text-is-red">빨간색 텍스트 1</p>
        <p class="text-is-red underline">빨간색 텍스트 2 + 밑줄</p>
    </body>
</html>
cs


3. ID 선택 ▼


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTPYE html>
<html>
    <head>
        <style>
            #text-is-red {
                color: red;
            }
        </style>
    </head>
    <body>
        <p id="text-is-red">빨간색 텍스트 1</p>
        <p id="text-is-red">빨간색 텍스트 2</p>
    </body>
</html>
cs


ID 를 선택할 때는 class="<클래스>" 가 아닌 id="<ID>" 의 형태로 사용합니다. 그리고 스타일에는 #<ID> 의 형태로 입력합니다. 하지만 클래스와 다르게 중복 사용은 불가능 합니다.



다음 시간부터는 스타일 속성과 사용 예제에 대해 알아보도록 하겠습니다.



댓글을 달아 주세요