IT/HTML&CSS

[HTML/CSS] html에 외부 css 파일 불러와서 적용하기

hi.anna 2025. 2. 27. 18:31

 

HTML에 외부 CSS 파일 불러와서 적용하기

 

HTML에서 외부 CSS 파일을 불러오려면 <link> 태그를 사용합니다.

이 태그는 보통 <head> 태그 내부에 작성합니다.

 

 

1. CSS 파일 생성
먼저, CSS 파일을 생성합니다.

예를 들어, style.css 파일을 다음과 같이 만듭니다.

/* style.css */
h1 {
    color: #FF0000;
    text-align: center;
}

 

 

2. HTML 파일에 외부 CSS 파일 연결

<link> 태그를 사용하여 CSS 파일을 연결합니다.

보통 <head> 태그 내부에 다음과 같이 작성합니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>외부 CSS 불러오기 예제</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>외부 CSS 불러오기 예제</h1>
</body>
</html>

 

 

 

  • <link rel="stylesheet" href="styles.css">
    • href 속성에 외부 CSS 파일의 경로를 작성합니다.
    • 여기서는 style.css가 HTML 파일과 같은 디렉토리에 있다고 가정합니다.
  • rel="stylesheet"
    • 이 속성은 링크된 파일이 스타일시트임을 나타냅니다.

 

3. 결과

 

브라우저에서 index.html을 열면,

가운데 정렬되고, 글자색이 빨간색인 글자가 표시됩니다.

 

반응형
저작자표시 (새창열림)