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