HTML에서 CSS 사용하기
-
inline 방식 (예제1)
-
엘리먼트에 스타일을 직접 기술하는 방식
-
셀렉트가 필요 없다.
-
CSS 선언이 분명해서 style tag 방식에 비해 엘리먼트에 영향을 주고 있는 CSS를 추적하기가 쉽다.
-
코드가 많아지고, 의미와 디자인의 분리라는 CSS의 취지와 벗어난다.
-
style tag 방식 (예제2)
-
style 태그에 기술하는 방식
-
inline 방식 대비 경제적으로 코딩할 수 있다.
-
의미와 디자인의 분리라는 CSS의 취지에 부합한다.
-
외부 파일 방식 (예제3)
-
CSS를 별도의 파일로 분리해서 링크하는 방식
-
문법적으로는 style tag와 동일
-
파일의 교체로 디자인을 변경할 수 있다는 점에서 유지보수가 편리하다.
예제1. inline 방식
<html>
<body>
<!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 -->
<h1 style="color:red">생활코딩 CSS 강의</h1>
<p>CSS는 쉽습니다.</p>
</body>
</html>
예제2. style tag 방식
<html>
<head>
<style type="text/css">
h1 {
color:red;
}
</style>
</head>
<body>
<!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 -->
<h1>생활코딩 CSS 강의</h1>
<p>CSS는 쉽습니다.</p>
</body>
</html>
예제3. 외부 파일 방식
<html>
<head>
<link type="text/css" href="http://opentutorials.org/file/style.css" rel="stylesheet" />
</head>
<body>
<!-- 태그 안에 스타일 시트를 직접 기술, selector 불필요 -->
<h1>생활코딩 CSS 강의</h1>
<p>CSS는 쉽습니다.</p>
</body>
</html>
/* http://opentutorials.org/file/style.css 의 내용 */
h1{
color:red;
}
