글 작성자: 개발자 올라프

 

CSS 선언 방식

 

CSS 선언방식은 크게 4가지 방식으로 이루어져 있다.

 

  • 인라인 방식
  • 내장 방식
  • 링크 방식
  • @import 방식

 

 

인라인 방식(Inline Style)

 

HTML 요소의 style 속성에 직접 스타일을 작성하는 방식이다. 인라인 스타일은 해당 HTML 요소에만 적용되고, 각 요소마다 별도로 스타일을 지정할 수 있다. 여러 스타일을 선언할 때는 세미콜론(;)으로 구분한다.

<div style="color: red; margin: 20px;">
	Hello, World!
</div>
  • 인라인 스타일은 다른 선언방식에 비해 우선순위가 높아서, 같은 선택자 스타일을 오버라이드한다.
  • 각 HTML 요소에 대해 스타일을 개별적으로 선언해야 하므로 유지보수가 어렵다.
  • 재사용이 불가능하므로, 동일 스타일을 여러 요서에 적용하려면 각 요소마다 스타일을 선언해야 한다.

 

인라인 방식은 특정 요소에 빠르게 임시 스타일을 적용하거나, 다른 스타일보다 우선 적용되어야 할 때 유용하다.

 

 

내장 방식(Internal Style Sheet)

 

HTML 문서의 <head> 태그 내에 <style> 태그를 이용하여 스타일을 적용하는 방식이다. 주로 해당 HTML 문서에만 사용될 스타일을 정의할 때 사용한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    ...
    <style>
      div {
        color: red;
        margin: 20px;
      }
    </style>
  </head>
  ...
</html>
  • 내장 방식은 링크 방식에 비해서 우선순위가 높아 같은 선택자 스타일을 오버라이드한다.
  • 여러 HTML 문서에 공통 스타일을 적용하려면, 스타일 변경 시 모든 문서를 수정해야 하므로 유지보수가 어렵다.

 

해당 HTML 문서에만 필요한 스타일을 정의하거나, 개발 초기 단계에 빠르게 스타일을 적용하고 테스트할 때 유용하다. 하지만, 링크 방식을 사용하여 스타일을 정의하는 것이 유지보수 및 재사용 측면에서 효율적이다.

 

 

링크 방식(External Style Sheet)

 

외부 CSS 파일을 생성하여 스타일을 정의하고 <link> 태그를 이용하여 HTML 문서와 연결한다. 주로 웹사이트 모든 페이지에서 공통 스타일을 적용하고 관리할 때 사용된다.

<head>
  <link rel="stylesheet" href="./css/main.css" />
</head>
  • 한 개의 CSS 파일을 여러 HTML 문서에서 공통으로 사용하므로, 스타일 변경이 필요할 때 해당 CSS 파일만 수정하면 모든 문서에 반영된다.
  • 여러 HTML 문서에서 하나의 CSS 파일을 공유할 수 있어 재사용성과 유지보수성이 높다.
  • 스타일을 별도의 파일로 분리하여 관리할 수 있기에 가독성 및 유지보수성이 향상된다.

 

웹 사이트 전체에 걸쳐 일관된 스타일을 적용하고, 여러 개발자가 협업하여 스타일을 개발하고 유지보수할 때 유용하다.

 

 

@import 방식

 

CSS 파일 내부에서 다른 CSS 파일을 불러온다. 해당 방식을 통해서 여러 CSS 파일을 하나의 스타일 시트로 결합할 수 있으며, 모듈화 및 관리가 용이해진다. @import 규칙은 CSS 파일의 최상단에 위치해야 한다는 특징이 있다.

 

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

div {
color: red;
margin: 20px;
}
/* font.css */
.font {
  font-size: 15px;
  color: white;
}
  • 스타일을 여러 파일로 분리하여 관리할 수 있어 모듈화와 재사용성이 향상된다.
  • 다양한 스타일 요소를 주제별로 분리하여 코드를 구조화할 수 있다.
  • 물리적으로 분리된 여러 CSS 파일을 논리적으로 결합하여 사용할 수 있다.
  • 직렬 방식이며, 병렬 방식으로 불러오지 않기 때문에 @import 방식을 많이 사용하면 렌더링 속도가 느려진다.

 

프로젝트가 크고 복잡하여 CSS를 여러 파일로 분리하여 관리하거나 공통 스타일을 여러 스타일 시트에서 재사용해야 할 때 유용하다. 구조화 및 모듈화에서 유용하지만, 성능에 주의가 필요하므로 가능한 <link>를 사용한 링크 방식을 권장한다.

 

 

 

저작자표시

'⭐️ Markdown & Style sheet > CSS' 카테고리의 다른 글

[CSS] CSS 선택자  (1) 2023.10.11
[CSS] 구조 및 특징 이해  (0) 2023.09.21
Styled Component 사용하기  (0) 2022.06.08
Sass(SCSS) 적용하기  (0) 2022.05.12
CSS display - block, inline-block, inline 이해하기  (0) 2022.04.27

티스토리툴바