WeniVooks

검색
북마크 이동

HTML/CSS 에센셜

CSS 적용하기

1. 인라인 방식

HTML 태그의 style 속성으로 스타일을 직접 지정하는 방식입니다. 소규모 테스트를 할 때 유용하게 사용될 수 있지만, 스타일 코드가 조금만 길어져도 코드의 가독성이 떨어지고, CSS의 가상 클래스와 가상 요소(: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의 head 요소 안에서, <style> 태그를 사용하여 스타일을 정의하는 방식입니다. 인라인 방식보다 코드의 재사용성과 가독성이 향상되지만, 코드가 길어질 수록 HTML 파일 길이가 길어지기 때문에 효율적이지 않습니다.

한 파일 내에서 스타일을 관리할 수 있다는 점에서 용이하게 사용될 수 있습니다. 국내에서는 Daum 포털이 한 동안 이 방식을 채택하여 사용했습니다.

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <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" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>내부 스타일</title>
    <style>
      p {
        color: yellow;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

3. 외부 스타일

HTML 파일에 외부 CSS 파일을 연결하는 방식입니다. 구조를 나타내는 HTML 파일과 스타일을 나타내는 CSS 파일을 분리해서 작성하기 때문에 보다 쉽게 코드를 관리할 수 있습니다. CSS 파일은 .css 확장자로 작성합니다.

CSS 파일을 연결할 때는 <link> 태그를 사용합니다. link 태그는 현재 문서와 외부 리소스의 연결하는 역할을 합니다. style 태그와 마찬가지로 head 요소 내부에 위치해야 합니다.

속성으로는 rel과 href를 사용합니다.

  • rel: 외부 리소스와의 관계를 나타냅니다. 스타일 파일은 stylesheet를 속성값으로 가집니다.
  • href: hyper-references로, 참조할 파일의 위치를 나타냅니다.

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

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <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" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <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;
}

꼭 head 안에만 작성해야 하나요?
내부 스타일 방식의 style 태그와 외부 스타일 방식의 link 태그는 모두 head 요소 안에 작성되어야 합니다. 이는 브라우저가 페이지를 화면에 그리는 렌더링 과정에서 스타일 정보를 미리 로드하기 위함이며, W3C HTML 표준에도 이를 명시적으로 규정하고 있습니다.

4. 다중 스타일 시트

HTML 문서에는 여러개의 스타일을 작성할 수 있습니다. style 태그를 여러개 작성할 수도, link 태그를 여러개 작성할 수도 있습니다. 실무에서는 기능별로, 페이지별로 css를 나누어 작성할 수 있습니다.

4.1 기본

link 태그를 사용하여 여러 개의 css 파일을 연결할 수 있습니다. 이때 태그를 작성한 순서대로 CSS가 적용되며, 나중에 작성한 스타일이 앞서 작성한 파일의 스타일을 덮어쓸 수 있습니다. 따라서 기본 스타일을 먼저, 구체적인 스타일을 나중에 배치하는 것이 좋습니다.

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>외부 스타일</title>
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="font.css" />
    <link rel="stylesheet" href="layout.css" />
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>
<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>외부 스타일</title>
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="font.css" />
    <link rel="stylesheet" href="layout.css" />
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>
4.2 css 파일 안에 css 포함하기

CSS 파일 내에서 @import 구문을 사용하여 다른 CSS 파일들을 포함할 수 있습니다. 하나의 CSS 파일에 여러 개의 CSS 파일을 import하여 HTML 문서에 연결하면, import된 모든 CSS 파일의 스타일이 HTML 문서에 적용됩니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <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" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>외부 스타일</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

@import는 문서 최상단에 위치해야 합니다. import 뒤에는 포함할 파일의 경로를 작성합니다.

/* style.css */
@import url('reset.css');
@import url('font.css');
@import url('layout.css');
@import url('main.css');
/* style.css */
@import url('reset.css');
@import url('font.css');
@import url('layout.css');
@import url('main.css');

위 코드는 reset.css, font.css, layout.css, main.css 네 개의 CSS 파일을 style.css에 포함합니다. 이 방식을 통해 CSS 파일들을 모듈화하고 깔끔하게 관리할 수 있습니다.

@ at-rule

@가 붙는 문법을 at-rule이라고 부릅니다! import만 있는 것은 아니고 다양한 엣룰이 있습니다!

@charset스타일시트에서 사용하는 문자 인코딩을 지정합니다. 문서에서 가장 먼저 선언합니다.
@import다른 스타일시트에서 스타일 규칙을 가져옵니다. @charset 바로 다음에 선언되어야 합니다.
@font-face디바이스에 없는 폰트를 다운받아 적용할 때 사용합니다.
@keyframes애니메이션을 만들 때 사용합니다.
@media사용자 디바이스에 따른 스타일을 분기 처리하고자 할 때 사용합니다.
@supports특정 CSS 속성을 브라우저가 지원하는지 확인하고 스타일을 선언하고자 할 때 사용합니다.
4.3 link vs @import

@import의 장점은 CSS 파일을 모듈화하여 관리할 수 있다는 점입니다. 하나의 메인 CSS 파일에서 여러 CSS 파일을 체계적으로 구조화할 수 있어 코드 유지보수성과 가독성이 향상됩니다.

성능 측면에서는 <link> 태그가 더 효율적입니다. <link> 태그는 HTML의 head에서 직접 CSS 파일을 불러와 브라우저가 즉시 병렬 다운로드할 수 있지만, @import는 CSS 파일 로드 후 연결된 파일을 순차적으로 다운로드하기 때문에 렌더링 속도가 느려집니다.

개발 단계에서 @import를 사용하는 경우 CSS 번들러(Webpack, Vite 등)를 사용하여 배포 시 하나의 파일로 합치거나, 성능이 중요한 프로젝트에서는 처음부터 link 태그로 직접 연결하는 것이 좋습니다.

9.1 CSS 기본9.3 CSS 상속