WeniVooks

검색
북마크 이동

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

속성으로는 rel과 href를 사용합니다. rel은 relations의 약자로 대상 파일의 속성을 나타내며, 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;
}

4. 다중 스타일 시트

4.1 기본
<!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 포함하기
<!-- 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 파일 내부에서 여러 개의 CSS 파일을 불러올 수도 있습니다. 이를 위해 @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에 포함하는 방식입니다. 이를 통해 스타일을 역할별로 분리하여 관리할 수 있습니다.

@import 사용 시 주의할 점

  • @import는 문서 최상단에 있어야 합니다. 다른 스타일 규칙보다 먼저 선언하지 않으면 예상대로 동작하지 않을 수 있습니다.
  • 여러 개의 CSS 파일을 가져와 코드의 가독성을 높이고 유지보수를 용이하게 만드는 장점이 있습니다. 특히 대규모 프로젝트에서 특정 기능이나 디자인 요소를 별도의 파일로 분리하여 관리하는 데 유용합니다.
  • 하지만 성능 측면에서는 @import보다는 태그를 사용하는 것이 더 효율적입니다. 태그는 HTML의 에서 직접 CSS 파일을 불러오기 때문에, 브라우저가 즉시 스타일을 다운로드하고 적용할 수 있습니다.
  • 반면, @import를 사용하면 CSS 파일이 로드된 후에야 추가적인 CSS 파일을 다운로드하기 시작하기 때문에 렌더링 속도가 느려질 수 있습니다.
  • @import로 가져온 CSS 파일은 병렬 다운로드가 불가능하여 로딩 속도가 느려질 수 있으며, 특히 여러 개의 CSS 파일을 포함하면 페이지 로드 시간이 증가할 수 있습니다.
  • 따라서 성능 최적화를 위해서는 @import를 사용하는 것 보다 CSS 번들러(예: Webpack, Vite)를 사용하여 여러 개의 CSS 파일을 하나의 파일로 합치는 것이 좋습니다. 이를 통해 불필요한 네트워크 요청을 줄이고, 페이지 로딩 속도를 향상시킬 수 있습니다.

@ at-rule

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

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