코딩스쿨

CSS How_To

1. CSS를 HTML에 적용하는 방법

CSS는 웹 페이지의 스타일을 정의하며, HTML 문서에 다양한 방식으로 적용할 수 있습니다. CSS를 적용하는 방법은 크게 인라인 CSS(Inline CSS), 내부 스타일 시트(Internal CSS), 외부 스타일 시트(External CSS) 세 가지로 나눌 수 있습니다. 각 방법은 상황에 따라 적절하게 사용되며, 각기 다른 장점과 단점을 가지고 있습니다.

2. 인라인 CSS (Inline CSS)

인라인 CSS는 HTML 태그 내에서 style 속성을 사용하여 CSS를 직접 적용하는 방법입니다. 이 방법은 특정 요소에만 빠르게 스타일을 적용할 수 있지만, 여러 요소에 동일한 스타일을 적용할 때 비효율적일 수 있습니다.

예시:

<p style="color: blue; font-size: 16px;">This is a blue paragraph with inline styling.</p>

장점: 빠르게 특정 요소에 스타일을 적용할 수 있습니다.
단점: 유지 관리가 어렵고, 여러 요소에 동일한 스타일을 적용하기에는 비효율적입니다.

3. 내부 스타일 시트 (Internal CSS)

내부 스타일 시트는 HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 CSS를 작성하는 방법입니다. 이 방법은 한 문서 내에서 여러 요소에 일관된 스타일을 적용할 수 있습니다.

예시:

<head>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>This is a paragraph with internal CSS styling.</p>
</body>

장점: 여러 요소에 같은 스타일을 쉽게 적용할 수 있으며, 한 문서 내에서 스타일을 관리할 수 있습니다.
단점: 스타일이 다른 HTML 문서에 적용되지 않으며, 여러 페이지에 일관된 스타일을 적용할 때는 비효율적입니다.

4. 외부 스타일 시트 (External CSS)

외부 스타일 시트는 별도의 .css 파일에 CSS 규칙을 작성하고, HTML 문서에서 해당 파일을 링크하는 방식입니다. 여러 HTML 문서에서 동일한 CSS 파일을 사용할 수 있으므로, 유지 관리가 매우 용이합니다.

HTML에서 외부 스타일 시트를 연결하는 방법:

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>This paragraph is styled using an external CSS file.</p>
</body>

외부 스타일 시트 파일(`styles.css`)의 내용:

p {
    color: red;
    font-size: 20px;
}

장점: 여러 HTML 문서에 동일한 스타일을 적용할 수 있어 유지 관리가 용이합니다.
단점: 외부 CSS 파일을 로드해야 하므로, 로딩 시간이 약간 더 걸릴 수 있습니다.

5. CSS 적용 우선순위 (CSS Specificity)

여러 스타일이 같은 요소에 적용될 경우, CSS는 우선순위에 따라 어떤 스타일을 적용할지를 결정합니다. 우선순위는 다음과 같은 순서로 적용됩니다:

인라인 스타일: HTML 태그에 직접 지정된 스타일이 가장 높은 우선순위를 가집니다.
ID 선택자: #으로 시작하는 ID 선택자가 그 다음으로 높은 우선순위를 가집니다.
클래스, 속성 선택자, 의사 클래스: .으로 시작하는 클래스 선택자, 속성 선택자, 의사 클래스가 그 다음입니다.
요소 선택자: 태그 이름을 사용한 선택자가 가장 낮은 우선순위를 가집니다.

우선순위 예시:

<head>
    <style>
        p {
            color: green;  /* 요소 선택자 */
        }
        .highlight {
            color: blue;  /* 클래스 선택자 */
        }
        #unique {
            color: red;  /* ID 선택자 */
        }
    </style>
</head>
<body>
    <p class="highlight" id="unique">This paragraph will be red due to ID selector priority.</p>
</body>

위의 예시에서, <p> 요소는 ID 선택자인 #unique에 의해 스타일이 빨간색으로 적용됩니다.

6. @import 규칙

CSS 파일을 여러 개 연결할 때, @import 규칙을 사용하여 다른 CSS 파일을 가져올 수 있습니다. 이 방법은 한 CSS 파일에서 다른 CSS 파일을 불러오거나, 여러 스타일 시트를 계층적으로 관리할 때 유용합니다.

예시:

/* styles.css 파일 */
@import url("reset.css");

body {
    font-family: Arial, sans-serif;
}

위의 예시에서, reset.css 파일이 먼저 로드된 후 styles.css의 스타일이 적용됩니다. @import는 보통 외부 스타일 시트를 연결할 때보다 느리기 때문에, 필요한 경우에만 사용하는 것이 좋습니다.

7. 미디어 쿼리 (Media Queries)

미디어 쿼리는 화면 크기, 해상도, 장치 유형에 따라 서로 다른 CSS 스타일을 적용할 수 있게 해줍니다. 반응형 웹 디자인을 구현하는 데 필수적인 도구입니다.

예시:

/* 화면 너비가 600px 이하일 때 */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

위의 예시는 화면 너비가 600픽셀 이하일 때, 배경색을 lightblue로 변경합니다. 이를 통해 다양한 장치에서 최적화된 사용자 경험을 제공할 수 있습니다.

8. CSS 적용 방법 선택 기준

인라인 CSS: 한두 개의 요소에 빠르게 스타일을 적용할 때 사용.
내부 스타일 시트: 한 문서 내에서만 스타일을 관리할 때 사용.
외부 스타일 시트: 여러 문서에 일관된 스타일을 적용할 때 사용.

각 방법은 상황에 맞게 사용되어야 하며, 대규모 프로젝트에서는 유지 관리가 용이한 외부 스타일 시트가 가장 일반적으로 사용됩니다.

코딩 스쿨 CSS