[CSS] CSS 적용 방식

jjee·2025년 7월 30일
CSS내부스타일외부스타일인라인방식
0

CSS

목록 보기
2/24

썸네일

CSS 적용 방식

CSS를 적용하는 방식에 대해서 알아보자.

CSS는 일반적으로 적용하는 방식이 세가지 있다.
각각의 적용 방식에 따라 우선순위가 달라지기도 하니 함께 알아보도록 하겠다.

인라인 방식

HTML 태그의 안에 직접 작성하는 방식으로 실무에서는 권장하지 않는 방식이다.
선택자 없이 해당 태그 안에 style 속성의 값으로 CSS를 작성하면 된다.

<p style="color: red;"> 빨간색 글씨</p>

아주 간단한 테스트를 진행할 때 사용할 수 있는 방식이지만 스타일이 많아지면 코드의 가독성을 해칠 수 있다.
또한 CSS의 가상요소 기능을 사용할 수 없다.

내부 스타일

HTML 파일의 head 태그 안에 style 태그를 사용하여 스타일을 정의하는 방식이다.
인라인 방식보다 코드의 재사용성과 가독성이 향상되지만, 코드가 길어질수록 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: red;
      }
    </style>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>

한 파일 안에서 스타일을 관리할 수 있어서 용이하다.

외부 스타일

CSS 파일을 만들어 HTML 파일에 연결하는 방식으로 실무에서 가장 많이 사용한다.
구조를 담당하는 HTML 파일과 스타일을 담당하는 CSS 파일을 각각 관리할 수 있기 때문에 유지보수에 용이하다.

CSS 파일은 .css 확장자를 사용하며, HTML 파일의 head 태그 안에 link 태그를 사용하여 연결할 수 있다.
이때 rel 속성은 외부 리소스와의 관계를, href 속성은 참조할 파일의 위치를 나타낸다.
CSS 파일은 스타일시트를 작성한 파일이므로 rel 속성의 값으로 stylesheet를 넣어주면 된다.

<!-- 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: red;
}

다중 스타일 시트

HTML 파일 내부에는 여러개의 스타일을 작성할 수 있다.
style 태그를 여러개 작성할 수도 있고, link 태그를 여러개 작성할 수도 있다.
기본적으로 기능별, 페이지별로 CSS를 나누어 작성하여 연결을 하게 된다.

link 태그를 여러 개 사용하여 CSS 파일을 연결하면 link 태그를 작성한 순서대로 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>

CSS 파일 안에 CSS 파일

CSS 파일 내에 @import 구문을 사용하여 다른 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>
/* style.css */
@import url('reset.css');
@import url('font.css');
@import url('layout.css');
@import url('main.css');

이때 @import 구문은 CSS 파일의 최상단에 작성되어야 한다.
@import 뒤에는 url()을 사용하여 파일의 경로를 작성한다.

여러개의 CSS 파일을 HTML 파일에 연결하는 방법으로 사용한 두가지 방식의 차이를 알아보자.

  • @import
    import 형식은 CSS 파일을 모듈화 하여 관리할 수 있다는 장점이 있다.
    하나의 메인 CSS 파일에서 여러개의 CSS 파일을 불러와 체계적으로 구조화 할 수 있어 코드 가독성과 유지보수성이 향상된다.
    다만, 브라우저에서 해당 파일 로드 시 CSS 파일 로드 후 연결된 파일을 순차적으로 다운로드 하기 때문에 link 태그보다 랜더링 속도가 느려진다.

  • link
    성능만으로 봤을 때는 link 태그가 더 효율적이다.
    link 태그는 HTML 파일의 head 에서 직접 CSS 파일을 불러와 브라우저에서 즉시 병렬 다운로드할 수 있다.

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

우선 순위

각각의 스타일 적용 방식에는 우선순위가 있다.
스타일을 적용하는 세가지 방식을 한 번에 사용하는 경우 어떻게 되는지 알아보자.

<!-- 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" />
    
    <style>
    p {
        color: blue;
    }
    </style>
  </head>
  <body>
    <h1>외부 스타일</h1>
    <p>내부 스타일</p>
    <p style="green">인라인 스타일</p>
  </body>
</html>
/* style.css */
h1 {
	color: yellow;
}

p {
	color: red;
}

위와 같이 작성한 경우 각각의 태그에 어떻게 적용되는지 확인해보자.
h1 태그는 노란색, 첫번째 p 태그는 파란색, 두번째 p 태그는 초록색으로 보인다.

일반적으로 스타일은 태그와 가까운 위치에 있을 수록 우선순위가 높아진다.

  • 우선순위: 인라인 > 내부 > 외부

만약 link 태그로 연결된 CSS 가 여러개 있다면 그중 나중에 작성된 스타일이 결과적으로 적용되는 것을 볼 수 있다.

선택자에 따라서 우선순위가 달라지기도 하지만 해당 내용은 다른 글에서 정리하도록 하고, 지금은 여기까지만 알아보도록 하자.

profile
jjee
내가 나에게 알려주는 개발 공부
이전 포스트

[CSS] CSS란 무엇인가?

다음 포스트

[CSS] CSS 상속

0개의 댓글