CSS
Cascading Style Sheets
HTML 요소들이 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어
오늘날 대부분의 웹 브라우저들은 CSS를 지원한다
HTML4부터는 모든 서식 설정을 HTML 문서로부터 분리하는 것이 가능해졌다!
CSS를 사용하는 이유
HTML만으로 웹 페이지를 제작하면 세부 디테일을 일일이 지정해주어야 한다.
이는 작업하기에도 어렵지만, 스타일의 변경이나 유지보수 시에도 힘들어집니다!
이러한 문제를 해소하기 위한 언어가 CSS
CSS는 웹 페이지의 스타일을 별도의 파일로 저장하여 사이트의 전체 스타일을 일관성있게 제어할 수 있다.
CSS 문법
선택자(selector)와 선언부(declaratives)로 구성
선택자 : 스타일을 적용하고자 하는 HTML 요소
선언부 : 하나 이상의 선언을 ;로 구분, 속성명(property)와 속성값(value)를 가지며 이 둘은 :으로 연결
a { background-color: yellow; font-size: 16px; }
CSS 선택자
˙ HTML 요소 선택자
˙ 아이디(id) 선택자
˙ 클래스(class) 선택자
<style>
.headings { color: lime; text-decoration: overline; }
</style>
<h2 class="headings"> 이부분에 스타일 적용 </h2>˙ 그룹(group) 선택자
<style>
h1, h2 { text-align: center; }
</style>
CSS 주석 (comments)
/* 주석내용 */
CSS를 적용하는 방법
1. 인라인 스타일 (lnline style)
: HTML 요소 내부에 style 속성을 사용하여 적용한다.
인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다.
<body>
<h2 style="color:green; text-decoration:underline">
인라인 스타일로 적용하였습니다!
</h2>
</body>
2. 내부 스타일 시트 (Internal style sheet)
: HTML 문서 내 <head>태그에 <style> 태그를 사용하여 적용한다.
내부 스타일 시트는 해당 HTML문서에만 스타일이 적용된다.
<head>
<style>
body { background-color: lightyellow; }
h2 { color: red; text-decoration: underline; }
</style>
</head>
3. 외부 스타일 시트 (External style sheet)
: 웹 사이트 전체의 스타일을 하나의 파일에서 변경한다.
외부 스타일 시트 파일은 .css 확장자로 저장한다.
웹 페이지의 <head>태그에 <link>태그를 사용하여 외부 스타일 시트를 포함하여야 스타일이 적용된다.
<head>
<link rel="stylesheet" href="/examples/media/expand_style.css">
</head>
스타일 적용 방법들의 우선순위
1. 인라인 스타일
2. 내 / 외부 스타일 시트
3. 웹 브라우저 기본 스타일
[참고] http://tcpschool.com/css/intro
'HTML & CSS' 카테고리의 다른 글
| [CSS] CSS 위치 속성 : 디스플레이, 포지션, 플로트, 정렬 (0) | 2021.07.05 |
|---|---|
| [CSS] CSS 박스 모델 : 크기, 패딩, 테두리, 마진, 아웃라인 (0) | 2021.07.05 |
| [CSS] CSS 기본 속성 : 색, 배경, 텍스트, 글꼴, 링크, 리스트, 테이블, 이미지 스프라이트 (0) | 2021.07.05 |
| [HTML] HTML 문서의 구성과 기본적인 태그 (0) | 2021.01.17 |
| [HTML & CSS] Web을 구성하는 HTML과 CSS (0) | 2021.01.17 |