[CSS] 📘CSS란?
✍ CSS란?
CSS(Cascading Style Sheets, 캐스케이딩 스타일 시트)란 HTML이나 XML같은 마크업 언어로 작성된 문서의 표시 방법을 기술하는 언어이다. HTML이 명사의 역할을 한다면 CSS는 형용사의 역할을 한다고 할 수 있다.
🔎 CSS rule (ruleset)
h1 {
color: blue;
text-align: center;
font-size: 20px;
}선택자(selector)
:꾸밀 HTML의 요소 이름선언(declaration)
:property: value;의 형태, 꾸밀 요소의 속성을 명시속성(property)
:주어진 HTML 요소를 꾸밀 수 있는 방법값(property value)
:속성을 위한 많은 결과 중 하나를 선택
🗝️ CSS를 적용하는 방법
- 인라인 스타일 CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Inline style CSS</title>
</head>
<body>
<h1 style="color: blue; background-color: yellow; border: 1px solid black">
Hello World!
</h1>
<p style="color: red">This is my inline style CSS example</p>
</body>
</html>→ 우리가 CSS 코드를 작성할 때 가장 좋지 않은 방법이다.
유지 관리가 좋지 않으며 HTML과 CSS가 혼합되어 있어 코드를 이해하는데 어렵게 만든다.
- 내부(Internal) CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Internal CSS</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my internal CSS example</p>
</body>
</html>→ HTML의 <head>안에 포함된 <style> 요소 내부에 CSS를 삽입한다.
인라인 스타일 CSS와 비교하면 style을 분리했기 때문에 훨씬 나아진 방법이지만 CSS가 모든 페이지에서 반복되고 변경이 필요한 경우 여러 위치에서 업데이트 되기 때문에 최선의 방법은 아니다.
- 외부(External) CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>External CSS</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Hello World!</h1>
<p>This is my external CSS example</p>
</body>
</html># style.css
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}→ HTML파일의 외부에 styles.css라는 파일을 생성하고 그 안에 style을 지정하는 CSS Ruleset들을 넣어준다.
그리고 HTML의 <head>안에 <link>를 통해 HTML과 외부의 CSS파일을 연결시켜준다.