[날마다 3분 CSS] CSS 선언 방식 - 내장/링크/인라인/@import

시작

CSS작성하고 HTML 문서에 포함시키는 방식은 크게 4가지 방식으로 이루어져 있습니다.

HTML의 헤더 요소에 작성 하며.<style></style>태그로 스타일을 작성하는 방식

이 방식은 대부분의 프로젝트에서 HTML, CSS, JS 파일을 나누어 관리하는 것이 일반적 이므로

자주 사용되지 않는 방식입니다.

<head>
    <style>
      div {
        color : red;
        margin : 20px;
      }
    </style>
</head>
<body>
..
</body>

요소의 style 속성에 직접 스타일을 하는 방식.

...
<div style="color : royalblue; margin: 20px;"></div>
...

CSS우선순위가 지나치게 높기때문에 공통기능에 대해서 CSS파일로 따로 관리하는 경우

인라인 방식으로 쓰여진 요소는 덮어쓰기가 불가능하며 변경이 불가능하기 때문에 유지보수에 어려움이 있다.

( 권장하지 않는 방식. )

HTML의 헤더 요소에 작성 하며 <link /> 태그로 CSS문서를 불러와서 연결하여 스타일을 작성하는 방식

<link rel="stylesheet" herf="./main.css">

가장많이 사용하는 방식이다.

CSS 의 @import 규칙으로 ~~CSS 문서 안에서~~ 또 다른 문서를 가져와 연결하는 방식

직렬 방식이기 때문에 연결이 끝나기전까지 적용이 불가

보통 link 태그를 사용하여 css파일을 불러올때는 모든 css파일을 한번에 다같이 불러오지만
@import 방식으로 css파일에서 불러올경우 html 파일에 있는 link방식의 css를 불러온다음
기다렸다가 불러오기 때문에 시간차이가 발생한다.

<link rel="stylesheet" herf="./main.css"/>

/* main.css */
@import url("./particle.css");

div {
	color : royalblue;
	margin: 16px;
}

/* particle.css */
.particle {
	color: orange;
	font-size: 10px;
}

단, 만약 처음 불러오는 해당하는 css파일을 적용한뒤에 @import 방식으로 불러오는 css파일이 적용이 되야하는 상태여야 하면 import방식이 더 좋다.

728x90

[날마다 3분 CSS] CSS 선택자 #가상클래스 선택자 (1)	2022.10.19
[날마다 3분 CSS] CSS 선택자 #복합 (0)	2022.10.13
[날마다 3분 CSS] 글자와 상자 (0)	2022.10.07
[날마다 3분 CSS] 가상요소 선택자 ::before ::after (0)	2022.10.06
[날마다 3분 CSS] 가상클래스 :active (0)	2022.10.04