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 */
@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');

@import는 문서 최상단에 있어야 합니다!
CSS 종속성을 같은 파일에 깔끔한 모습으로 유지할 수 있다는 장점이 있습니다.
하지만, 성능 측면에서는 CSS를 파싱하기 위한 시간이 더 증가하기 때문에 권장하지는 않습니다.
import로 가져온 CSS 파일을 병렬로 다운로드할 수 없으므로 렌더링 프로세스의 지연시간이 증가합니다.
번들러를 사용하여 CSS 파일을 합치거나 분리하여 필요한 상황에서만 로딩할 수 있도록 최적화가 필요합니다!

@ at-rule

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

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