html파일에 css 적용하는 3가지 방법

html과 css는 떼려야 뗄 수 없는 관계입니다. 그건 누구나 다 아는 사실입니다. 그럼 html파일에서 css는 어떻게 써야 할까요? 총 3가지의 방법으로 적용할 수 있습니다.

많이 쓰이는 HTML 태그 간단히 살펴보기

CSS 뜻과 기본 문법

html 태그에서 적용

html파일 내에 있는 태그 옆에다 css를 적용하는 방법입니다.

<h1 style="color:blue;background-color:gray">h1 태그입니다.</h1>

html 태그옆에 style=""을 쓰고 안에는 "속성:속성값"으로 적용할 수 있습니다.

이 방법으로 사용한다면 한눈에 알아볼수 있다는 장점이 있습니다. 하나의 페이지만 있는 경우 상관없지만 홈페이지의 경우 많은 페이지들(파일들)이 있을것입니다. 그럼 하나하나 태그 옆에다 쓰면 효율성이 떨어질것입니다. 결국, 이 방법은 하나의 페이지가 있는 경우만 사용하는 것이 효율성면에서 좋습니다.

내부 스타일 시트

html파일 안에서 css를 적용하는 방법입니다.

<style>
   h1{color:blue;background-color:gray}
</style>

<h1>h1 태그입니다.</h1>

이 방법은 html 태그에서 적용하는 것과 마찬가지로 하나의 페이지에서 적용할 수 있습니다. 자세한 내용은 css 기본 문법에서 확인해주세요!

외부 스타일 시트

별도의 css파일을 만들고 html에 link 태그를 이용하여 css파일을 불러오는 방법입니다.

그림으로 설명하겠습니다. 아래 그림은 html 파일과 css 파일을 분리시켜놓은 그림입니다.

test.html에서 head영역을 보면 link 태그가 있는 것을 확인하실 수 있습니다. 이 태그는 외부 스타일 시트 즉, 외부에 있는 파일을 불러오기 위해 사용되는 태그입니다. 여기서 test.css 파일을 불러오기 위해서

<link rel="stylesheet" type="text/css" href="test.css">

이라고 적었습니다.

※ rel속성은 현재 문서와 연결된 문서의 관계를 나타내는 속성으로 속성값으로는 stylesheet(스타일시트), author(저작자), help(도움말)등으로 표현할 수 있습니다. 또한, type은 링크된 문서의 타입을 지정하는 속성으로 css파일과의 타입은 text/css, javascript파일은 text/javascript 타입 등으로 지정할 수 있습니다. 자세한 내용은 이곳을 참고해주세요. href 속성은 연결할 주소를 입력하는 속성으로 필수로 있어야 하는 속성입니다.

외부에서 파일을 사용하는 이유는 외부에 있는 아이콘을 가지고와서 꾸밀수도 있고 분리를 통해 깔끔하여 유지보수를 쉽게 할 수 있다는 등 많은 장점을 가지고 있습니다.