CSS 표현방법
CSS(Cascading Style Sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다.
내부 스타일시트
간단한 스타일은 내부 스타일 시트만으로도 사용할 수 도 있습니다.
내부 스타일시트는 그 스타일이 기술된 페이지에만 적용됩니다.
css HTML 문서 안에 <style> 태그를 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태 입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta chatset="utf-8">
<title>내부 스타일시트</title>
<style type = "text/css">
p {color: red;}
</style>
</head>
<body>
<p>우리를 기쁘게 하는 것들.</p>
<body>
</html>
외부 스타일시트
외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다.
스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다.
스타일은 .css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 <link>태그를 이용하여 선언합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta chatset="utf-8">
<title>외부 스타일시트</title>
<link rel="stylesheet" type="text/css" herf="style.css">
</head>
<body>
<p>우리를 기쁘게 하는 것들.</p>
<body>
</html>
css파일 상단에는 html 문서에서 지정한 것과 동일한 문자셋을 지정합니다.
@charset "utf-8";
p { color: red; }
@import
CSS 맨 윗줄에 기술합니다.
CSS안으로 다른 CSS파일을 불러들일 경우 사용합니다.
*파일을 너무 여러 개로 분리하면 오히려 복잡해져 유지보수하기 힘들기 때문에 용량이 적당하면 하나의 파일로 저장합시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta chatset="utf-8">
<title>스타일시트 포함</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<p>우리를 기쁘게 하는 것들.</p>
<body>
</html>
어떤 CSS파일 안에 공통 CSS를 불러들일 경우
@charest "utf-8";
@import url("common.css");
인라인 스타일
태그에 직접 CSS를 정의해주는 기법입니다.
내부스타일이나 외부스타일에서 기술된 속성보다 우선으로 적용되므로 우선수위가 절대적으로 높아야 할 경우에 사용할 수 있으나, 작업이 번거로워지므로 일반적으로 많이 사용하지는 않습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta chatset="utf-8">
<title>인라인 스타일</title>
</head>
<body>
<p style="color: red;">우리를 기쁘게 하는 것들.</p>
<body>
</html>
