'스타일(Style)'이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들을 말합니다. 그리고 이러한 스타일들을 모아 놓은 것을 '스타일 시트(style Sheet)' 라고 말합니다.
1. 스타일 형식
선택자 {스타일 속성: 속성 값; }
'선택자(selector)'는 앞으로 만들 스타일 규칙을 어디에 적용할 것인지를 나타내고 선택자 다음에 중괄호({, })가 오고 그 사이에 속성을 입력합니다. 속성 값은 콜론(:)으로 구분하고 속성과 속성 값 쌍 다음에는 세미콜론(;)으로 구분합니다.
2. 스타일 주석
주석을 표시할 때는 /*와 */ 사이에 내용을 입력하는데 주석을 한 줄만 입력하거나 여러 줄을 입력할 수도 있습니다.
3. 내부 스타일 시트
웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다. 모든 스타일 정보는 <head> 태그와 </head> 태그 안에서 정의해야 하고 <style> 태그와 </style> 태그 사이에 작성합니다.
4. 외부 스타일 시트
여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것이 일반적입니다. 이렇게 따로 저장해 놓은 스타일 정보를 '외부 스타일 시트'라고 합니다.
<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">
<style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일을 연결합니다.
5. 인라인 스타일
<p style="color:blue;"> 블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 작성합니다. 해당 태그에 style 속성을 사용해 style="속성: 속성 값;" 형태로 스타일을 바꿀 수 있습니다.
<출처> Do it! HTML5+CSS3 웹 표준의 정석
'IT > CSS' 카테고리의 다른 글
| [CSS 입문] 텍스트 스타일 (0) | 2017.04.04 |
|---|---|
| [CSS 입문] 글꼴 관련 스타일 (2) | 2017.04.03 |
| [CSS 입문] 캐스캐이딩 스타일 시트(CSS) (0) | 2017.03.31 |
| [CSS 입문] 선택자의 종류 (0) | 2017.03.30 |
| [CSS 입문] 글꼴을 지정하는 font-family 속성 (0) | 2017.03.02 |