HTML/CSS 베이스캠프

CSS 적용하기

1. 인라인 방식

인라인 방식은 HTML 태그 내 style 속성을 통해 스타일을 직접 지정하는 방식입니다. 이 방법은 소규모 테스트나 특수 목적에 유용할 수 있지만, 스타일이 조금만 길어져도 복잡도가 급격히 상승하며 뒤에서 배울 가상 클래스와 가상요소(:hover, ::before, ::after) 스타일을 적용할 수 없어 사용에 제한이 있습니다. 따라서 일반적인 실무 환경에서는 권장되지 않습니다.

<p style="color:yellow; background-color:black;">Hello world</p>

<p style="color:yellow; background-color:black;">Hello world</p>

2. 내부 스타일

내부 스타일은 HTML 파일 내 <style> 태그를 사용하여 스타일을 정의하는 방식입니다. 인라인 방식보다 코드의 재사용성과 가독성이 향상되지만, HTML 파일이 길어질수록 복잡도가 증가하여 효율성이 떨어질 수 있습니다. 한 파일 내에서 스타일을 관리할 수 있다는 점에서는 편리합니다. 국내에서는 Daum 포털이 한동안 이 방식을 사용한 바 있습니다.

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <title>내부 스타일</title>
    <style>
      p {
        color: yellow;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <title>내부 스타일</title>
    <style>
      p {
        color: yellow;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

3. 외부 스타일

외부 스타일은 HTML 파일에서 <link> 태그를 사용해 외부 CSS 파일을 연결하는 방식입니다. <link> 태그는 head 요소 내에 위치하며, 외부 스타일 시트는 .css 확장자를 가지며 HTML 파일과 분리하여 관리할 수 있습니다.

속성으로는 rel과 href를 사용합니다. rel은 relations의 약자로 대상 파일의 속성을 나타내며, href는 hyper-references의 약자로 연결 시 참조할 파일의 위치를 나타냅니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <title>외부 스타일</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <title>외부 스타일</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

/* style.css */
p {
  color: yellow;
  background-color: black;
}

/* style.css */
p {
  color: yellow;
  background-color: black;
}

실무에서 가장 많이 사용하는 방법입니다. HTML과 CSS를 분리하면 코드의 가독성과 효율성, 유지보수성이 높아집니다.