어제 오늘 내일

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

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을 열면,

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

 

반응형
저작자표시

'IT > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] div와 span의 차이  (0) 2025.02.28
[HTML/CSS] div와 div 사이 간격 조정하기  (0) 2025.02.28
[CSS] div에 대각선 그리기 (linear-gradient)  (1) 2025.02.24
[HTML/CSS] div 가로로 나란히 정렬하는 4가지 방법  (0) 2024.01.18
[HTML/CSS] 가로 세로 스크롤바 항상 보이게 설정하기  (0) 2024.01.12
공유하기 링크
'IT/HTML&CSS' Related Articles more
Comments