오늘은 HTML로 표현된 웹 페이지를 꾸미기 위해 사용되는 CSS를 삽입하는 방법에는 어떤 것들이 있고 각 방법들의 차이점과 장단점, 우선순위에 대해서 다뤄보겠습니다.
inline 방식
inline 방식은 HTML 태그의 style속성에 직접 스타일을 입력하는 방식으로 삽입 방법 중 가장 우선순위가 높은것이 특징입니다.
inline 방식의 경우 HTML문서내에 위치해있기 때문에 관리가 용이하고 해당 CSS 속성이 다른 요소에 영향을 주지 않는다는 장점이 있지만
HTML코드와 CSS코드가 섞이기 때문에 가독성이 떨어지고 동일한 스타일을 재사용할 수 없어 만약 동일한 스타일을 다른 요소에 적용하고자하는 경우 수동으로 복사 및 관리를 해야 한다는 단점이 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div
style="width: 300px; height: 300px; background-color: brown;"
class="box"
></div>
</body>
</html>internal 방식
internal 방식은 HTML의 head태그 내부에 style태그를 사용해 스타일을 작성하는 방식을 말합니다.
inline 방식 보다는 우선순위가 낮고 장단점이 inline 방식과 대부분 비슷하지만
internal 방식은 inline 방식과 비교해 상대적으로 HTML코드와 분리되어 있어 가독성이 더 좋다는 점,
다른 요소들에 스타일 속성을 재사용할 수 있다는 장점이 있지만 단점으로는 재사용의 경우 해당 HTML문서에 한해서만 가능하다는 점입니다.
따라서, 만약 HTML파일이 여러개인 경우 해당 속성을 재사용 할 수 없습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: brown;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>external 방식
external 방식은 가장 많이 사용되는 CSS 삽입 방식으로 CSS코드를 HTML과 분리해 별도 파일로 생성하고
이를 HTML의 head태그 내부에서 link태그를 활용해 해당 파일을 가져오는 방법입니다.
HTML과 CSS코드가 완전히 분리되어 있어 유지보수와 재사용에 유리하며 HTML파일이 여러개인 경우에도
동일한 스타일을 재사용할 수 있어 일관된 디자인을 유지하기 쉽다는것이 장점입니다.
반면, 단점으로는 외부 파일을 가져오는것이기 때문에 추가적인 HTTP요청을 필요로 하며 작은 규모의 프로젝트 혹은 단일 페이지로 구성된 프로젝트인 경우 오히려 비효율적일 수 있다는것이 단점입니다.
우선순위의 경우, internal방식이 external방식보다 우선순위가 높다는 글을 종종 발견할 수 있고 저 또한 최근까지 그렇게 알고 있었습니다.
하지만, 이 글을 작성하면서 테스트 해본 결과 두 방식은 어떤 태그가 더 밑에 있는지에 따라 적용되는 값이 변한다는걸 알게 되었고, 아무래도 일반적으로 link태그와 style태그를 같이 사용하는 경우 style태그를 더 하단에 위치해서 사용하기 때문에 그런 오해가 생긴게 아닐까 생각합니다.
즉, internal방식과 external방식의 우선순위는 같기 때문에 동시에 사용하는 경우 link태그와 style태그 중 더 하단에 위치한 방식의 스타일이 적용되어집니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
</body>
</html>@import
import키워드는 CSS에서 지원하는 키워드 중 하나입니다.
위에서 설명했던 방식들과는 살짝 결이 다른데 CSS를 삽입하는 방법인건 맞지만 CSS파일 내부에서 다른 CSS파일을 불러오는 목적을 가지고 있는 키워드입니다.
물론, HTML파일에서 아래와 같이 작성할 수는 있지만 이는 internal 방식과 결합해 사용하는 방식이지 import 단독으로 사용되는 방식이 아닙니다.
<style>
@import url('./header.css');
@import url('./main.css');
@import url('./footer.css');
</style>또한, import키워드는 위에서 말했듯이 CSS파일에서 또 다른 CSS파일을 불러오기 때문에 external방식과 유사하게 동작하지만 상대적으로 몇 가지 단점을 가지고 있습니다.
- HTTP요청이 많아져 성능에 안 좋은 영향을 준다.
이는 순수 CSS로 작성되었을 때를 말하며 전처리기를 사용하는 경우 번들링과정에서 한 개의 파일로 합쳐지기 때문에 이 단점을 해소할 수 있습니다.
-
로드 시간이 증대된다.
여러개의 CSS파일을 가져올 때 external 방식의 경우 병렬로 요청하는 반면 import는 순차적으로 파일을 요청하기 때문에 전체 파일의 로드 시간이 증가할 수 있으며 이는 DOM 생성을 늦춰 전체적인 성능에 영향을 줄 수 있습니다. -
캐싱 문제
import키워드의 경우 한 개의 파일만 변경되더라도 기존에 캐시된 CSS 파일 전체를 삭제하고 모두 새로 불러와야하기 때문에 캐싱에 불리할 수 있습니다.
다만, 2, 3번에서 말한 단점들은 직접 테스트 해본 결과 import 키워드의 본래 목적인 CSS 파일내부에서 import키워드를 사용하는 경우에만 발생하는 문제입니다.
위에서 보여드렸던 코드처럼 internal방식과 결합해 사용하는 경우에는 해당되지 않습니다.
정리
| inline 방식 | internal 방식 | external 방식 | |
|---|---|---|---|
| 삽입방식 | HTML태그의 style속성을 이용한 방법 | head태그 내부의 style태그를 활용 | link태그를 활용해 분리된 CSS파일을 가져오는 방식 |
| 우선순위 | 높음 | 중간 | 중간 |
| 장점 | - HTML문서내에 위치해있어 관리에 용이 -다른 요소에 영향을 주지 않음. | - HTML문서내에 위치해 관리가 용이 - 같은 HTML문서내에서는 재사용 가능 | - HTML코드와 분리되어 유지보수와 재사용에 용이 - 여러 HTML파일에서도 스타일을 재사용할 수 있어 일관된 디자인을 유지하기 쉬움 |
| 단점 | - HTML코드와 스타일코드가 섞여 가독성 저하 - 동일한 스타일을 재사용할 수 없음. | - inline 방식에 비해 분리되어있지만 그래도 HTML내부에 코드가 혼재되어 있음. - HTML파일이 여러개인경우 서로 다른 파일간 스타일을 재사용할 수 없음. | - 외부 파일이기에 추가적인 HTTP요청이 필요 - 작은 규모의 프로젝트 혹은 단일 페이지인 경우 비효율적 |
