HTML 페이지에 CSS를 포함하는 3가지 방법 (인라인·내부·외부)

웹 개발에서 HTML 페이지에 CSS 스타일을 적용하는 방법은 크게 세 가지입니다. 각 방식은 용도와 장단점이 뚜렷하므로, 상황에 맞게 선택하는 것이 중요합니다.

CSS를 포함하는 세 가지 방식

인라인(Inline) 방식
HTML 요소의 style 속성에 직접 CSS 스타일을 작성하는 방법입니다. 간단한 테스트나 일회성 스타일 적용에는 편리하지만, 코드 재사용성이 떨어지고 유지보수가 어려워 실무에서는 내부 또는 외부 방식으로 CSS 파일을 모듈화하는 것이 권장됩니다.
내부(Internal) 방식
HTML 문서의 <head> 태그 안에 <style> 태그를 두고 그 안에 CSS 규칙을 작성하는 방법입니다. 하나의 문서 안에서만 사용되는 스타일을 관리할 때 유용합니다.
외부(External) 방식
.css 확장자를 가진 별도의 스타일시트 파일을 만들고, <link> 태그로 연결하는 방법입니다. CSS 파일은 로컬에 두거나 서버에 업로드할 수 있습니다. 외부 링크 방식을 활용해 파일을 리팩토링하면 여러 웹페이지에서 공통으로 사용할 수 있는 단일 CSS 파일을 유지할 수 있어 관리 효율이 크게 향상됩니다.

기본 문법

HTML에 CSS를 포함하는 기본 문법은 다음과 같습니다.

/* 인라인(inline) */
<element style="/* 선언부 */"></element>

/* 내부(internal) */
<head>
<style>
/* 선언부 */
</style>
</head>

/* 외부(external) */
<head>
<link rel="stylesheet" href="#파일경로">
</head>

예제 1: 인라인 CSS

다음 예제는 요소의 style 속성에 직접 스타일을 지정하는 인라인 방식을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:mistyrose; height: 50px;"></div>
<p style="letter-spacing: 16px; font-size: 1.3em;">
<u>데모 텍스트</u>
</p>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML 페이지에 CSS를 포함하는 3가지 방법 (인라인·내부·외부)

예제 2: 내부 스타일시트 연결

다음 예제는 <head> 안의 <style> 태그에 테이블 관련 스타일을 정의하고, 문서 내 테이블에 일괄 적용하는 내부 방식입니다.

<!DOCTYPE html>
<html>
<head>
<style>
table, table *{
    border: 5px double green;
    margin: auto;
    padding: 20px;
}
tr {
    box-shadow: 0 0 0 3px red;
}
td {
    border-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML 페이지에 CSS를 포함하는 3가지 방법 (인라인·내부·외부)

예제 3: 외부 스타일시트 연결

외부 방식은 HTML 파일과 CSS 파일을 분리한 뒤 <link> 태그로 연결합니다. 아래 예제를 살펴보겠습니다.

HTML 파일

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

CSS 파일(style.css)

div {
    margin: auto;
    padding: 15px;
    width: 33%;
    border: 2px solid;
    border-radius: 50%;
}
div > div {
    border-color: green;
}
div > div > div {
    border-color: red;
}

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML 페이지에 CSS를 포함하는 3가지 방법 (인라인·내부·외부)

정리

세 가지 방식을 비교하면 다음과 같습니다.

인라인: 빠르게 적용할 수 있지만 재사용이 불가능하고 코드가 지저분해지기 쉽습니다.
내부: 한 문서 안에서 스타일을 일괄 관리하기 좋지만, 다른 페이지와 공유할 수 없습니다.
외부: 초기 설정이 필요하지만 여러 페이지에서 하나의 CSS 파일을 공유할 수 있어 유지보수와 성능 측면에서 가장 권장되는 방식입니다.

실무 프로젝트에서는 대부분 외부 스타일시트 방식을 기본으로 사용하고, 필요에 따라 내부 방식을 보조적으로 활용하는 것이 일반적입니다.