[HTML/CSS] 03. HTML에 CSS를 적용하는 3가지 방법

<!--inline 방식-->
<div style="background-color: blueviolet;"></div>

간단하고 원하는 특정 요소에만 적용 가능하나, 유지 보수가 어렵고 가독성이 안좋다.

또, 나중에 여러 css를 작성하다보면 어디에 어떤 스타일을 적용했는지 파악하기 난해해 중복된 코드가 많이 발생하며 스타일을 바꾸기 어렵다.

<!--internal 방식-->
<style>
    div {
        background-color: beige;
    }
</style>

작은 프로젝트에 적합하며, 동일한 문서 내의 스타일을 각 파일별로 관리할 수 있다.

그러나 다른 HTML 파일에 재사용이 불가능하며 HTML 파일 안에 CSS가 섞여있어 보기가 어렵다.

<!--external 방식-->
<link rel="stylesheet" href="style.css" />

현업에서 가장 많이 사용하는 방식으로, 하나의 CSS 파일을 여러 HTML 파일에서 재사용할 수 있어 유지보수도 잘 되고 가독성도 높다.

inline > internal = external

CSS는 Cascading Style Sheet의 약자로, 여기서 Cascading은 순차적으로란 뜻이다.

즉, css는 순차적으로 적용되는 스타일 시트이며 중복 코드 작성 시 제일 나중에 작성한 게 적용된다.

그러나, css는 기본적으로 cascading이 적용되지만 그와 별개로 inline 스타일은 우선적으로 적용된다.

그래서 우선 순위는 inline, 그리고 external과 internal은 위치가 어디냐에 따라 우선순위가 달라지게 된다.

p {
  color: blue !important; /* 강제 적용 */
}

속성 값 뒤에 !important를 붙일 경우, CSS의 우선순위 규칙을 무시하고 항상 최우선으로 적용되게 된다.

인라인 스타일보다도 강력한데, 되도록 쓰지 않는 편이 좋다.

어디서 뭐가 적용됬는지 파악하기 어렵기 때문에 한번 쓰면 우선순위 최우선순위 그 위에 또 최우선순위 이렇게 계속 지정하게 되며 그럼 코드 파악하고 스타일 변경하기가 무척 어렵기 때문이다.

한가지 주의해야 할 점은, css는 에러를 내지 않는다는 사실이다.

이렇게 페이지의 각 태그에 어떤 style이 적용됬는지 살펴보면 bunny라는 존재 하지 않는 속성명을 적어도, 속성명을 에러낸다 해도 에러가 없다.

예를 들면 height에 단위를 적어주지 않아 적용이 안되게 되면 그저 - 그을 뿐 에러를 내지 않기때문에, 이게 디버깅을 할 때 제일 힘든 요소가 된다.

[HTML/CSS] 06. CSS 5가지 position 속성값 (0)	2024.12.27
[HTML/CSS] 05. CSS 요소 정렬과 배치 (0)	2024.12.27
[HTML/CSS] 04. CSS 박스 모델 (2)	2024.12.26
[HTML/CSS] 02. 시맨틱 마크업 (Semantic Markup)이란? (2)	2024.12.26
[HTML/CSS] 01. 웹 개발의 시작 (3)	2024.12.26

스링코딩