CSS 파일 분리
개요
CSS를 별도의 파일로 저장 후 HTML 문서 내에서 불러올 수 있습니다.
여러 웹페이지에서 공통적인 CSS를 참조할 때, 중복 코드를 제거할 수 있기에 매우 유용하며, 문서 규격과 스타일의 분리를 위해 (작업의 분담) CSS를 별도의 파일로 분리하여 사용하는 것이 좋습니다.
사용법
<head>
<link rel="stylesheet" href="경로.css" type="text/css">
</head>
특별한 점
- CSS의 인코딩은 문서 맨 앞에
@charset "utf-8";형식의 코드를 쓰며 지정합니다. - CSS에서
background-image등으로 외부 이미지나 파일 등을 참조할 때에는 웹페이지 url이 아닌 CSS 파일의 경로를 기준으로 합니다.
CSS 파일 예제
@charset "utf-8";
h1{
font-size: 30px;
font-weight: normal;
margin: 0;
margin-bottom: 10px;
}
#progress-bar{
margin: 0;
padding: 0;
margin-bottom: 15px;
list-style: none;
}
.common-btn{
padding: 4px 6px;
background-color: #07C;
color: white;
border: none;
border-radius: 10px;
text-decoration: none;
}