✔ CSS란?!
Cascading Style Sheet의 약자로서, HTML 요소들이 어떻게 보이는지를 정의하는 스타일시트 언어다.
HTML이 웹 페이지의 구조와 내용을 지정한다면, CSS는 구조와 디자인을 분리하기 위해 탄생한 언어로서 HTML 문서의 디자인을 지정한다.
💭 Style Sheet의 3가지 종류
HTML 문서에 CSS 스타일을 적용하는 방법은 인라인, 내부 스타일, 외부 스타일 시트로 3가지 방법이 있다.
1) 인라인
HTML 요소의 style 속성을 사용하여 스타일을 적용하는 방법이다. 해당 요소에만 스타일을 적용할 수 있다.
가장 범위가 좁은 스타일 적용 방식으로서, 직관적이고 수정이 빠르다.
✅ 디자인에 대한 일괄 변경이 불가능하며, HTML 파일의 사이즈를 크게 만들어서 웹페이지 로딩 시간이 길어진다.
<p style="color:blue;">
문장 내용
</p>
2) 내부 스타일 시트
HTML 문서의 head 태그에 style 태그를 사용하여, HTML 문서에 사용할 스타일을 지정하는 방식이다.
✅ 해당 HTML 문서에만 스타일을 적용할 수 있다.
<head>
<style>
h1 { background-color : blue; }
body { background-color : yellow; }
p { color : red; }
</style>
</head>=
3) 외부 스타일 시트
하나의 별도의 스타일시트 파일을 통해서 HTML 스타일을 적용하는 방식이다.
스타일을 적용할 모든 HTML 파일의 head 태그 내에 link 태그를 이용하여 포함한다.
이렇게 따로 저장한 스타일 정보를 외부 스타일 시트라고 하며 .css 확장자를 사용한다.✅ 분리된 디자인 파일로 관리하고 유지보수하기에 효율적이며, 가장 권장되는 방법이다.
// index.html
<head>
<link rel="stylesheet" href="css/style.css">
</head>
// style.css
header.title {
width: 100%;
padding: 2rem;
background-color: var(--main-color);
color: var(--text-white);
text-align: center;
}