Frontend/CSS

CSS 시작하기: HTML에 스타일을 입히는 3가지 방법

미니임 2026. 2. 10. 00:32

 

웹 페이지의 뼈대를 만드는 것이 HTML이라면, 그 뼈대에 옷을 입히고 디자인을 완성하는 것이 바로 **CSS(Cascading Style Sheets)**입니다. 똑같은 HTML 구조라도 CSS를 어떻게 적용하느냐에 따라 전혀 다른 느낌의 웹사이트가 탄생합니다.

오늘은 CSS를 공부할 때 가장 먼저 배우게 되는 **'HTML에 CSS를 적용하는 3가지 방법'**을 풍부한 예제와 함께 알아보겠습니다.

1. 인라인 스타일 (Inline Style)

인라인 스타일은 HTML 태그 안에 직접 style 속성을 사용하여 디자인을 입히는 방식입니다.

💡 특징

  • 해당 태그에만 즉각적으로 스타일이 적용됩니다.
  • 스타일 우선순위가 매우 높습니다.
  • 코드가 길어지면 유지보수가 어려워지므로, 아주 부분적인 수정이 필요할 때만 제한적으로 사용합니다.

📝 예제 코드

<p style="color: blue; font-size: 20px; font-weight: bold;">
  이 문장은 인라인 스타일로 파란색과 굵은 글씨가 적용되었습니다.
</p>
<button style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px;">
  클릭하세요
</button>

2. 내부 스타일 시트 (Internal Style Sheet)

HTML 문서의 <head> 섹션 안에 <style> 태그를 만들어 CSS 코드를 몰아서 작성하는 방식입니다.

💡 특징

  • 한 페이지 내에서 사용할 스타일을 한눈에 관리하기 좋습니다.
  • 페이지마다 별도의 스타일을 적용해야 할 때 유용합니다.
  • 하지만 여러 개의 HTML 페이지가 있는 웹사이트의 경우, 스타일을 수정하려면 모든 페이지를 하나씩 고쳐야 한다는 단점이 있습니다.

📝 예제 코드

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS 코드를 이곳에 작성합니다 */
    body {
      background-color: #f9f9f9;
    }
    .main-title {
      color: #333;
      text-align: center;
      border-bottom: 2px solid coral;
      padding-bottom: 10px;
    }
    .description {
      line-height: 1.6;
      color: #666;
    }
  </style>
</head>
<body>
  <h1 class="main-title">내부 스타일 시트 예제</h1>
  <p class="description">이 문서의 스타일은 head 태그 안에서 정의되었습니다.</p>
</body>
</html>

3. 외부 스타일 시트 (External Style Sheet)

가장 권장되는 방식으로, CSS 코드를 별도의 파일(.css)로 저장한 뒤 HTML 문서에서 불러오는 방식입니다.

💡 특징

  • 유지보수의 끝판왕: 하나의 CSS 파일만 수정하면 이 파일을 사용하는 수십, 수백 개의 HTML 페이지가 동시에 변경됩니다.
  • HTML 소스코드가 깔끔해져서 가독성이 좋아집니다.
  • 웹 페이지 로딩 속도를 최적화하는 데 유리합니다.

📝 예제 코드

1단계: style.css 파일 작성

/* style.css */
.card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  font-family: sans-serif;
}

.card-header {
  background-color: #007bff;
  color: white;
  padding: 15px;
  font-size: 1.2rem;
}

.card-body {
  padding: 20px;
}

2단계: HTML에서 연결하기

<!DOCTYPE html>
<html>
<head>
  <!-- <link> 태그를 사용하여 외부 파일을 불러옵니다 -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card">
    <div class="card-header">외부 스타일 시트</div>
    <div class="card-body">
      가장 전문적이고 효율적인 관리 방법입니다.
    </div>
  </div>
</body>
</html>

🚀 한눈에 비교하기

구분인라인 스타일내부 스타일 시트외부 스타일 시트

적용 위치 HTML 태그의 style 속성 <head>의 <style> 태그 별도의 .css 파일
권장 용도 아주 급한 일회성 수정 단일 페이지용 웹사이트 대부분의 프로젝트 (표준)
유지보수 매우 어려움 보통 매우 쉬움

결론

CSS를 처음 배울 때는 내부 스타일 시트로 연습하는 것이 직관적이라 편할 수 있습니다. 하지만 실제 웹사이트를 제작할 때는 반드시 외부 스타일 시트를 사용하는 습관을 들이는 것이 좋습니다.

여러분도 지금 바로 메모장을 열어 간단한 HTML 문장을 만들고, 위 세 가지 방법으로 색상을 바꿔보며 테스트해 보세요!

반응형