CSS
CSS(Cascading Style Sheet)는 HTML 요소들이 브라우저 상에서 보여지는 스타일을 정의한 스타일 시트 언어입니다.
HTML의 어트리뷰트로만 스타일을 모두 작성하면 작성도 힘들 뿐더러 동적인 스타일 변경 및 유지보수가 매우 힘듭니다. 이러한 문제점을 해결하기 위해 W3C에서 만든 스타일 언어가 CSS입니다.
CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있으므로 사이트의 전체 스타일을 손쉽게 제어할 수 있습니다. 또한, 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지보수 또한 쉬워집니다. 이러한 외부 스타일 시트는 보통 .css의 확장자로 저장됩니다.
문법
CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성됩니다.
선택자는 CSS를 적용하고자 하는 HTML 요소를 가리킵니다.
선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 선택자에 중괄호 내의 모든 선언들을 적용시킬 수 있습니다.
각 선언은 CSS 속성(property)과 값(value)를 가지며, 콜론(:)으로 연결합니다.
이러한 CSS 선언은 언제나 세미콜론으로 마칩니다.
/* div 태그들의 width와 height의 길이를 지정합니다 */
div {
width: 400px;
height: 300px;
}선택자
스타일을 적용할 HTML 요소를 가리키는 데 사용하는 선택자는 다음과 같습니다.
- 요소 선택자: 특정 타입의 모든 HTML 요소를 선택합니다.
- 아이디 선택자: 특정 아이디를 가진 페이지의 요소를 선택합니다. 단, 주어진 HTML 페이지 내에서, 아이디는 단 하나의 요소만 선택됩니다.
- 클래스 선택자: 특정 클래스를 가진 요소를 선택합니다. 여러 요소를 선택할 수 있습니다.
- 속성 선택자: 특정 속성을 갖는 요소를 선택합니다.
- 수도(Pseudo) 클래스 선택자: 특정 요소가 특정 상태에 있을 때 선택합니다.
CSS 적용
HTML 문서에 CSS를 적용하는 방법은 세 가지가 있습니다.
- 인라인 스타일(Inline style)
- 내부 스타일 시트(Internal style sheet)
- 외부 스타일 시트(External style sheet)
인라인 스타일
인라인 스타일은 HTML 요소의 어트리뷰트에 직접 스타일을 지정하는 것입니다.
<body style="color: white; background-color: black">
<p>인라인 스타일을 이용하여 스타일 적용</p>
</body>내부 스타일 시트
내부 스타일 시트는 HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS를 적용하는 방법입니다.
<head>
<style>
body {
background: blue;
}
h2 {
color: green;
}
</style>
</head>외부 스타일 시트
외부 스타일 시트는 별도의 css 파일에 연결될 HTML 문서의 스타일을 작성하는 방법입니다. 이 파일은 연결된 HTML 문서의 <head>태그 내에서 <link> 태그를 사용하여 연결합니다.
<head>
<link rel="stylesheet" href="./css/external-style.css" />
</head>우선순위
위 세 가지 방법이 혼용되어 사용될 경우 우선순위는 다음과 같습니다.
- 인라인 스타일
- 내부 / 외부 스타일 시트
- 웹 브라우저 기본 스타일
내부 / 외부 스타일 시트는 나중에 적용된 스타일 시트가 적용됩니다. 다음과 같은 경우 div의 배경색은 파란색이 됩니다.
<head>
<style>
div {
background: red;
}
</style>
<!-- 외부 스타일 시트는 div { background: blue; } 라고 작성됨 -->
<link rel="stylesheet" href="./css/external-style.css" />
</head>
<body>
<div>Hello, World!!</div>
</body>따라서 웹 사이트의 스타일 적용은 웬만하면 모두 외부 스타일 시트로 작성하는 편이 유지보수도 편하며, 안정적입니다.
Uploaded by Notion2Tistory v1.1.0