CSS을 적용하는 방법 3가지
CSS 적용 방식 3가지
CSS를 적용하는 방법, 즉 작성하는 방법은 크게 세 가지가 있다. 그런데 실무에서는 <link> 태그로 연결하는 방식 단 하나만 주로 사용하고 나머지는 거의 사용하지 않기 때문에 알고만 있으면 돼서 이번 포스트는 가볍다.
in-line 작성 방식
HTML 문서 내에 직접적으로 CSS를 정의하는 방법이다.
<div style="background-color: red;">인라인 방식</div>위 예제를 보면 style 속성을 사용하여 CSS의 key:value를 직접적으로 적은 것을 볼 수 있다.
이렇게 적게되면 CSS의 여러가지 적용방식 중 겹치는 부분이 있다면, 예를 들어서 인라인 작성 방식에서는 위 div의 배경색을 red로 했는데, 별도 .css 파일의 클래스 지정, 아이디 지정 등으로 다른 컬러로 또 중복해서 적어놨다면 인라인으로 작성한 CSS가 HTML 문서에 직접적으로 적은 것이기에 가장 큰 우선순위를 갖는다.
이것 말고는 큰 특징이 없고, CSS가 길어지면 문서가 복잡해지기 때문에 가독성과 유지보수성이 떨어져서 특별한 경우가 아니라면 거의 사용하지 않는 방식이다.
가끔 CSS가 너무 복잡해서 본인이 수정하고자 하는 것이 마음대로 되지 않을 때 인라인으로 덮어 씌우려는 경우가 있을 수 있는데, 최대한 지양해야 한다. 유지보수를 하기 더 어려워지기 때문이다.
<style> 태그 작성 방식
인라인 방식과 마찬가지로 HTML 문서 내에서 바로 작성하는 방식인데, <head> 태그 내에 <style> 태그를 열고 닫은 뒤 그 안에 CSS를 정의해주는 방법이다.
인라인 작성 방식에 비해서는 가독성과 유지보수성이 조금 낫겠지만, 가장 마지막으로 소개할 <link> 태그로 연결하는 방식에 비해서는 가독성과 유지보수성이 떨어지기 때문에 이것도 특별한 경우가 아니라면 실무에서는 잘 사용하지 않는다.
<html>
<head>
<title>CSS style 태그로 작성하기</title>
<style>
div {
background-color: red;
}
</style>
</head>
<body>
<div>
이 div의 배경색은 레드입니다.
</div>
</body>
</html><link> 태그 연결 방식
별도의 .css 확장자를 갖는 CSS 파일을 만든 뒤 그곳에서 CSS를 정의하고, HTML 문서의 <head> 태그 내에서 <link> 태그로 연결하는 방식이다.
<!-- index.html -->
<html>
<head>
<title>CSS style 태그로 작성하기</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div>
이 div의 배경색은 레드입니다.
</div>
</body>
</html>
/* index.css */
div {
background-color: red;
}<link> 태그의 속성
- rel : relationship 즉 현재 문서와 연결하고자 하는 문서의 관계를 지정해주는 것. 여러 값이 있지만 CSS를 연결할 때는 값으로 stylesheet가 끝.
- href : 파일의 경로를 입력해주는 속성. ./index.css는 현재 index.html 파일과 같은 경로에 있는 (./) index.css 파일을 연결하라는 의미.
CSS 파일을 분리해서 작성하고 연결하는 이 방식이 보통 실무 레벨에서 가장 많이 사용되는 방식이다.
실무 레벨에서 하나의 서비스는 하나의 index.html로만 이루어져있지 않고, 여러 페이지가 컴포넌트 단위로 분리되거나 하여 굉장히 많이 만들어지기 때문에 CSS 파일도 이와 매칭시켜서 하나씩 만들고 연결시켜주는 것이 추후에 프로젝트 단위에서 CSS를 유지보수 하기에 제일 간편하다.
'Programing > CSS' 카테고리의 다른 글
| CSS 속성 : 폰트의 기본 속성 (0) | 2025.05.12 |
|---|---|
| CSS 선택자 (Selector) (0) | 2025.04.09 |
| CSS의 구성 요소 (Selectors, Property, value)와 우선순위 총 정리 (1) | 2025.03.10 |
| CSS란? (0) | 2025.03.04 |
| Tailwind :: hover 애니메이션 : 위로 살짝 올라가기 (0) | 2024.06.30 |
댓글