CSS( Cascading Style Sheets )란?
- CSS는 Cascading Style Sheets의 약자로서 HTML로 작성된 웹 문서를 시각적으로 꾸며주는 역할을 합니다.
What is Cascading?
- Cascading의 뜻은 작은 폭포라는 뜻을 가지고 있습니다. 마치 폭포처럼 위에서 아래로 스타일 코드를 읽어드려 반영하는 Style Sheets라는 의미로서 CSS( Cascading Style Sheets )라는 이름을 가지게 되었습니다.
Cascading 예제
body {
background-color: black;
}
body {
background-color: red;
}
- 위에서는 background-color를 black으로 정의하였지만 Cascading 속성에 의해서 아래에 정의된 red로 background-color가 지정됩니다.
HTML에 CSS 적용 방법
inline CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
}
</style>
</head>
<body></body>
</html>
- style 태그 안에 CSS 코드를 직접 작성하는 방식을 inline CSS 방식이라고 합니다.
external CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body></body>
</html>
- 외부 파일에 작성된 CSS를 link를 통해 가져오는 방식을 external CSS 방식이라고 합니다.
inline CSS vs external CSS
- external CSS 방식이 코드 재사용성과 가시성 및 유지 보수성 측면에서 이점이 있기 때문에 external CSS 방식을 사용하는 것이 좋습니다.
CSS 사용 방법
body {
background-color: black;
}
- body는 선택자( Selector )로서 html의 어떤 엘리먼트를 지정하여 스타일링 할지를 결정짓습니다.
- background-color는 속성( Property )로서 엘리먼트의 무엇을 스타일링을 할지 결정짓습니다.
- black은 속성 값으로서 어떤 값으로 스타일링할지를 결정짓습니다.
