CSS는 HTML문서를 스타일링해 줄 디자인 정보를 가지고 있습니다.
HTML 문서에 CSS를 이용해서 디자인을 적용하는 방법에는 크게 3가지가 있습니다.
태그에 직접 스타일을 주는 방법
<a href="http://www.monoeyes.com" style = "font-weight: bold; color:red;">쏭군 블로그</a>
<태그에 직접 스타일 적용하기>
이 방법은 딱 하나의 태그를 위해 사용하는 방법입니다.
위의 코드에서는 해당되는 <a> 태그 하나에만 굵고 빨간 효과가 적용됩니다.
다른 태그들에게는 아무런 영향도 미치지 않습니다.
이 방법은 아주 부득이한 사정이 없는 이상 사용을 피하는 것이 좋습니다.
사이트의 규모가 크고, 페이지의 수량이 많은데 일일이 이런 방식으로 스타일이 붙어 있다면,
사이트를 수정하거나 유지보수하는 데 많은 애로 사항이 있을 것입니다.
그러나 어쩔 수 없이 써야 한다면 그 경우에는 예외입니다.
<style> 요소를 활용하여 HTML 내에서 사용하는 방법
<html>
<head>
<meta charset="UTF-8">
<title>CSS 연습</title>
<style type="text/css">
a {"font-weight: bold; color:red;"}
</style>
</head>
<body>
<a href="http://www.monoeyes.com" >쏭군 블로그</a>
</body>
</html>
<HTML 문서 내에 <style>태그를 사용하여 CSS적용하기>
이 방법은 HTML 파일의 <head> 또는 <body>에 <style> 태그를 선언함으로써 사용이 가능합니다.
이 방법은 스타일이 삽입된 HTML파일, 즉 페이지 하나에 전부 영향을 미칩니다.
단, 해당 HTML파일 이 외에 다른 HTML파일에는 아무런 영향도 미치지 않습니다.
외부의 CSS파일을 링크하는 방법
a {"font-weight: bold; color:red;"}
<style.css>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 연습</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<a href="http://www.monoeyes.com" >쏭군 블로그</a>
</body>
</html>
이 방법은 가장 널리 사용되는 방법입니다. 아예 웹사이트의 모든 디자인 정보를 CSS파일에 몰아넣고,
HTML에서는 이 CSS파일을 링크하여 사용하는 방법입니다.
이 방법은 CSS파일 하나로 여러 개의 웹페이지 디자인을 관리할 수 있다는 장점이 있습니다.
또한, 미디어 타입을 지정하여 각 기기별로 최적화된 화면을 제공할 수 있습니다.
방법별 스타일을 적용하는 우선 순위
이 세가지 방법 중 스타일을 중복 적용하는 태그가 있다면 어떤 방식이 가장 우선적으로 적용될까요?
그 순서는 다음과 같습니다.
- 1순위 : 태그에 직접 스타일을 지정해 주는 방법
- 2순위 : <style>요소를 이용해서 한 페이지에 스타일을 지정해 주는 방법
- 3순위 : 외부의 CSS파일을 링크하여 스타일을 지정해 주는 방법
'0x01 Programming > 0x013 HTML5&CSS3' 카테고리의 다른 글
# 박스모델 (0) | 2012.09.20 |
---|---|
# CSS의 특수 선택자 (0) | 2012.09.19 |
#콘텐츠의 흐름, 블록레벨 요소와 인라인 요소 (0) | 2012.08.27 |
#HTML5의 새로운 요소(hgroup,article,section) (0) | 2012.08.27 |
#CSS3 배경지식 쌓기 (0) | 2012.08.25 |