CSS 선언 방식

CSS/CSS

CSS 선언 방식

IT Blue 2021. 4. 20. 03:14

내장 방식

<style>
    div {
        color: blue;
        margin: 10px;
    }
</style>

HTML <head> 요소 내부 <style></style> 요소의 내용(Contents)으로 스타일을 작성하는 방식

장점 - 별도의 CSS 파일이 필요하지 않다

단점 - CSS의 내용이 많은 경우 HTML 문서 내에서 처리하기가 쉽지가 않다

인라인 방식

<div style="color: blue; margin: 10px;"></div>

HTML 요소의 style 속성(전역 속성을 의미)에 직접 스타일을 작성하는 방식 (선택자가 없음)

장점 - 별도의 CSS 파일이 필요하지 않다

단점 - 우선 순위가 높기 때문에 유지 보수가 어렵다

링크 방식

<!-- HTML <head> 요소 -->

<Link rel="stylesheet" href="./main.css" />

/* CSS 부분 */
div {
    color: blue;
    margin: 10px;
}

HTML <head> 요소 내부 <link /> 태그를 이용해로 외부 CSS 문서를 가져와서 연결하는 방식 (권장됨)

- 병렬로 연결하는 방식

@import 방식

/* first.css */

@import url("./second.css");

div {
    color: blue;
    margin: 10px;
}


/* second.css */

.second {
    background-color: blue;
    padding: 10px;
}

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

- 직렬로 연결하는 방식

장점 - 일부러 연결을 지연시키는 목적해서 사용할 수 있다

단점 - 실제로 연결이 지연된다