[CSS] CSS 선언 방식

 

이번 시간에는 CSS 선언 방식에 대해 알아보겠습니다.

CSS 선언 방식

- 내장 방식

- 인라인 방식

- 링크 방식

- @import 방식

1. 내장 방식

<style></style>을 사용하여 스타일을 작성하는 방식. style 요소는 HTML의 해더 요소에 작성을 합니다.

즉, CSS 내용을 HTML의 style태그 내부에 작성하여 HTML자체에 내장 한다는 뜻입니다.

내장 방식 CSS

장점 : 별도의 CSS파일을 만들지 않아도 된다. 

단점 : 프론트앤드 개발을 할 때 HTML, CSS, JS 파일을 분할하는 것이 유지보수 측면에서 좋다. 

=> 유지보수 측면에서 단점이 많다. 

( 프로젝트를 번들하는 과정에서 컴퓨터가 자동으로 파일을 내장방식으로 심는 경우는 문제가 되지 않는다. )

---

2. 인라인 방식

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

<div style="color : black; margin: 15px;"></div>

장점 : 선택자라는 개념이 없다. 

단점 : CSS우선순위가 지나치게 높기에 별도의 코드로 CSS내용이 덮어쓰기로 수정이 되지 않는다.

     => 유지보수에 좋지 않다. 

 

---

3. 링크 방식

<Link>로 외부 CSS문서를 가져와서 연결하는 방식.

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

외부의 파일에 적용하고자 하는 CSS내용이 들어 있고, 그 파일을 link태그를 통해 가져와서 적용하는 방식.

 

---

4. @import 방식

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

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

 

/* mystle.css */
@import url("./text.css");

div {
	color : black;
    margin: 15px;
}

/* text.css */
.box {
	color: red;
    font-size: 15px;
}

HTML에서 링크를 통해 CSS를 가져오고, HTML과 연결되어 있는 CSS파일에서 또 다른 CSS파일을 불러오는 것.

이런 방식을 직렬로 연결 한다고 할 수 있습니다.