Whether you think you can or you think you can’t, you’re right.
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>