HTML 스타일 요소를 CSS 파일로 옮기기

html 파일에 스타일 요소를 추가할 수도 있지만,

그렇게 계속해서 추가하다 보면

html 파일의 구조를 알아보기 어려울 정도로 스타일 요소가 늘어나버리게 됩니다.

 

이런 경우에 두 가지 방법으로 스타일 요소를 분리할 수 있습니다.

첫 번째 경우는 스타일 요소를 동일 파일 내 style 태그 안에 두는 방법이고,

두 번째 경우가 오늘 소개하려는 외부 스타일 시트 입니다.

 

 

 

1. 먼저 작업하던 html 파일과 같은 위치나 다른 위치에 확장자가 css인 파일을 생성합니다.

저는 이런 식으로 폴더를 생성해서 그 안에 css 확장자 파일을 만들었습니다. 경로는 편하신 곳으로 하셔도 좋습니다.

 

 

2. 만든 css 파일에 사용할 스타일을 작성합니다.

저는 임의로 이렇게 작성했습니다.

 

 

3. 이제 기존 html에서 css 파일 불러오기를 할 수 있도록, 연결고리를 이어 놓아야 합니다.

title 태그 아래에 

link 태그를 작성합니다.

<link rel="stylesheet" href="파일경로">

 

이런 형식으로 작성하시면 됩니다.

 

4. 잘 적용이 되었는지 확인해봅니다.

 

스타일 시트는 이처럼

외부에 저장해두면 재사용할 수도 있고, 추후 수정도 쉽고, 스타일과 코드를 분리하여 코드의 가독성을 높이는 데도 도움이 됩니다.

 

 

이상입니다.