1. CSS란?
- Cascading Style Sheets
- HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어
- 확장자는 .css
2. CSS 문법
a { bacckground-color:yellow; font-size:16px; }
// a는 선택자 , 선언구분은 세미콜론.
3. CSS 선택자
(1) HTML 요소 선택자
(2) 아이디(id) 선택자 // id는 #으로 선언
- 특정 요소를 선택할 때 사용.
- 여러 요소에 같은 아이디 이름 사용할시 자바스크립트 오류남.
<style>
# heading { color: skyblue; text-size:150%; }
</style>
<h2 id="heading"> </h2>
(3) 클래스(class) 선택자 // 클래스는 . 으로 선언
- 특정 집단의 여러 요소를 한 번에 선택할 때 사용.
- 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름을 가지는 요소들을 모두 선택.
<style>
.headings { color: lime; text-decoration: overline; }
</style>
...
<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>
<p>class 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>
4. CSS주석(comments)
/* */
5. CSS를 적용하는 방법
(1) 인라인 스타일(Inline style)
(2) 내부 스타일 시트(Internal style sheet)
<head>
<style>
body { background-color: lightyellow; }
h2 { color: red; text-decoration: underline; }
</style>
</head>
(3) 외부 스타일 시트(External style sheet)
<head>
<link rel="stylesheet" href="/examples/media/expand_style.css">
</head>
expand_style.css
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }
'언어 > HTML_CSS' 카테고리의 다른 글
HTML 확장 (0) | 2018.11.06 |
---|---|
HTML 입력 양식 (3) | 2018.11.06 |
HTML 공간분할 (1) | 2018.11.04 |
HTML 기본요소 (1) | 2018.11.04 |
HTML 텍스트 요소- 인용구, 문자셋 (0) | 2018.11.02 |