내부 CSS

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 7번째.

내부 CSS(Internal CSS)는 HTML 문서의 <head> 섹션 내에 <style> 태그를 배치하여 CSS 스타일을 추가하는 방법입니다. 이 방식은 외부 스타일시트 없이도 단일 페이지의 여러 요소에 스타일을 적용할 수 있게 해줍니다. 내부 CSS는 단일 문서를 스타일링하거나 스타일을 빠르게 변경할 때 유용합니다.

내부 CSS를 사용하기 위한 기본 구문은 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

이 예제에서 <style> 태그는 body의 배경색을 연한 파란색(light blue)으로, p (단락)의 색상을 파란색으로, 그리고 글꼴 크기를 16 픽셀로 설정하는 CSS 규칙을 포함하고 있습니다. 이 스타일은 HTML 문서 내의 모든 요소에 적용됩니다.

챌린지

쉬움

HTML 문서가 주어집니다. 내부 CSS를 사용하여 다음 속성으로 문서를 스타일링하세요:

body의 배경색을 lightgreen으로 설정하세요.
모든 h1 제목의 텍스트 색상을 red로 설정하세요.
모든 단락(p)의 글꼴 크기를 18px로 설정하세요.

이를 위한 시작 CSS 코드가 제공됩니다.

치트 시트

내부 CSS는 HTML 문서의 <head> 섹션 내에 있는 <style> 태그 안에 추가됩니다:

<head>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

내부 CSS를 사용하면 외부 스타일시트 없이도 단일 페이지의 여러 요소에 스타일을 적용할 수 있습니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            
        }
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>