외부 CSS

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

외부 CSS는 CSS 스타일을 별도의 CSS 파일에 작성하고 <link> 태그를 사용하여 해당 파일을 HTML 문서에 연결함으로써 HTML 문서에 스타일을 추가하는 방법입니다. 이 방식은 여러 HTML 페이지에 동일한 스타일을 적용할 수 있게 해주어, 웹사이트의 디자인을 유지 관리하고 업데이트하는 것을 더 쉽게 만들어 줍니다. 외부 CSS는 일관성과 효율성이 중요한 대규모 프로젝트에 이상적입니다.

외부 CSS를 사용하는 방법은 다음과 같습니다:

CSS 규칙이 포함된 CSS 파일(예: styles.css)을 생성합니다:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

2. <head> 섹션에 <link> 태그를 추가하여 CSS 파일을 HTML 문서에 연결하세요:

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

이 예제에서 <link> 태그는 styles.css 파일을 HTML 문서에 연결합니다. rel 속성은 HTML 문서와 연결된 파일(스타일시트) 간의 관계를 지정하며, href 속성은 CSS 파일의 경로를 지정합니다.

챌린지

쉬움

HTML 및 CSS 파일(index.html 및 styles.css)이 주어집니다. 파일을 연결하고 HTML 파일에 스타일을 적용하려면 HTML 파일에 link 태그를 추가하세요!

치트 시트

외부 CSS를 사용하면 CSS 스타일을 별도의 파일에 배치하고 <link> 태그를 사용하여 HTML 문서에 연결할 수 있습니다.

스타일이 포함된 CSS 파일을 생성합니다:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

HTML <head> 섹션에 CSS 파일을 연결합니다:

<link rel="stylesheet" href="styles.css">

rel 속성은 관계(stylesheet)를 지정하고 href는 CSS 파일의 경로를 지정합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>