프로그래밍/HTML

CSS 적용방법

Doonee 2013. 11. 5. 16:46
반응형

1. In-Line 방식

- HTML 태그에 직접 Style 속성을 삽입하여 스타일을 적용하는 방법입니다.

- 각 페이지마다 스타일이 기술되기에 직관적으로 바로바로 확인되지만 유지보수가 불편하다는 단점이 있습니다. 특별한 경우가 아니라면 사용을 자제하는 것이 좋습니다.

- 예시 : 

<p style="font-family:돋움;">...</p>



2. Embedded 방식

- HTML 문서에 <head> 혹은 <body> 태그에 <style> 태그를 직접 선언함으로써 스타일을 지정해서 적용하는 방식입니다.

- 예시 : 

<head>

<style type="text/css" media="screen">

h1 {color:blue;}

</style>

</head>



3. Import 방식

- css 파일에만 스타일을 기술합니다. Link 방식과 유사하지만 하나의 css 파일로 여러개의 웹사이트에 적용하거나 style 내부에서 다른 css를 불러올 수 있다는 개념이 다릅니다.

- 낮은버전의 브라우저에서는 Import 방식을 인식하지 못하는 호환성 문제를 가지고 있습니다.

- Link 방식보다 호환성과 속도면에서 뒤쳐집니다.

- 예시 : 

<head>

<style type="text/css" media="screen">

@import url(main.css);

</style>

</head>



4. Link 방식

- Import 방식보다 호환이나 속도 면에서 우월하기에 가장 추천하는 방식입니다.

- 예시 : 

<head>

<link href="main.css" rel="stylesheet" type="text/css" media="screen" />

</head>

'프로그래밍 > HTML' 카테고리의 다른 글

CSS 선택자(2)  (0) 2013.11.05
CSS 선택자(1)  (0) 2013.11.05
배경 반복효과  (0) 2013.11.05
한줄로 전체의 링크 점선 제거하기  (0) 2013.11.05
이미지링크 파란색 테두리 한번에 없애고 싶을땐  (1) 2013.11.05