-
내장 방식
<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 문서를 가져와 연결하는 방식
- 직렬로 연결하는 방식
장점 - 일부러 연결을 지연시키는 목적해서 사용할 수 있다
단점 - 실제로 연결이 지연된다
'CSS > CSS' 카테고리의 다른 글
CSS 선택자 (속성) (0) 2021.04.22 CSS 선택자 (가상 클래스, 가상 요소) (0) 2021.04.21 CSS 선택자 (기본, 복합) (0) 2021.04.20 CSS 기본 문법 (0) 2021.04.20 CSS 스타일 초기화 (0) 2021.04.16