CSS 란?
CSS는 Cascading Style Sheets로, 웹의 구성 요소를 꾸며주는 역할을 하는 스타일 시트 언어이다.
HTML로 문서의 구조를 만들면 CSS를 이용하여 문서를 꾸며준다.
제목 및 링크의 색상과 크기 변경, 레이아웃 등을 지정하거나 애니메이션 효과를 적용할 수 있다.
CSS 기본 문법
CSS 문법은 선택자(selector)와 선언(declaration) 블록으로 구성된다.
선언 블록은 속성(Property)과 값(Value)을 중괄호({})로 감싼 형태이다.
-
선택자는 스타일을 적용할 HTML 요소를 가리킨다.
-
속성은 스타일의 종류
-
값은 스타일의 값
h1 {
color: red;
font-size: 20px;
}👉 '<h1>태그의 글자색은 빨강색, 글자 크기는 20px로 적용한다.' 로 해석할 수 있다.
CSS 선언 방식
1. 내장 방식
HTML 내부에
<style></style>의 내용(contents)으로 스타일을 작성하는 방식
<head>
<!-- head의 style 태그에 직접 스타일 정의 -->
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>글자색: 빨강</div>
</body>-
장점: 별도의 CSS 파일을 따로 만들지 않고 HTML 파일 내부에서 바로 CSS를 적용할 수 있다.
-
단점: CSS 내용이 많아지는 경우에는 HTML내부에서 한번에 처리하기가 쉽지 않고 유지 보수가 힘들다.
2. 링크 방식
<link />로 외부 CSS 문서를 가져와서 연결하는 방식
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div>글자색: 빨강</div>
</body>/* main.css */
div {
color: red;
}-
병렬 연결방식
-
CSS 문서를 따로 관리하기 때문에 내용이 많아지더라도 괜찮다. 링크 방식으로 CSS를 작성하는 것을 지향.
3. 인라인 방식
요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음)
<div style="color: red;">글자색: 빨강</div>- 인라인 방식은 우선 순위가 너무 높기 때문에 추후 수정이 어려움, 유지 보수 측면에서 단점
4. @import 방식
CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div>글자색: 빨강</div>
</body>/* main.css */
@import url("./box.css");
div {
color: red;
}/* box.css */
.box {
background-color: red;
padding: 20px;
}-
직렬 연결방식
-
메인 CSS 파일이 연결 되어야 다른 CSS 파일이 연결되기 때문에 연결을 일부러 지연시키기 위함으로 사용할 수 있지만, 실제로 연결이 지연되는 단점도 존재한다.
