스타일 형식
선택자 { 속성1: 속성값1; 속성2: 속성값2; }스타일의 주석 표시
/* 내용을 입력 */
소스 경량화
CSS소스는 네트워크를 이용해 파일로 내려받으므로 되도록이면 파일 크기가 작은 것이 좋음.
경량화 프로그램이 존재 하므로 사요아면 됨. (cssminifier.com)
스타일 시트 알아보기
| 스타일 시트 | 브라우저 기본 스타일 | |
| 사용자 스타일 | 인라인 스타일 | |
| 내부 스타일 시트 | ||
| 외부 스타일 시트 |
- 인라인 스타일
- 브라우저의 기본 스타일이라고 함.
- 우리가 HTML 태그를 작성하고 바로 보는 화면을 말함
- 적용하는 방법
<p style = "color: blue;"> 내용을 입력 </p>- 내부 스타일 시트
- 스타일을 여로 곳에 적용할 때 쓰는 내부 스타일 시트
- <head> 태그 안에 정의하고 <style> 내용 </style> 태그 사이에서 작성해야함.
- 적용방법
<head>
(내용생략)
<style>
h1{
padding: 10px;
background-color: #222;
color: fff;
}
</style>
</head>
<body>
<h1> 내용 </h1> // 내용에 style이 적용됨.
.
.
.
</body>외부 스타일 시트
- 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때 마다 가져와서 사용하는 것.
- 사용방법
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">