[HTML 문서에 CSS파일을 적용하기]
HTML 문서에 CSS파일을 적용하는 방식에는 3가지가 있습니다.
1. Inline style sheet
- HTML 태그의 style속성에 css 코드를 넣는 방식
2. Internal style sheet
- HTML 문서 안에 <style></style> 태그를 넣어서 그 안에 css코드를 작성하는 방식
- 일반적으로 <body> 태그 가장 상단에 작성합니다.
3. External style sheet
- CSS파일을 만들어 HTML 문서와 연결하는 방식
가장 많이 사용되는 세번째 방식인 외부 링크로 연결하는 방식은 다음과 같습니다.
<link rel="stylesheet" href="style.css">
inline style의 경우에는 html에 하나하나 입력하는 방식이므로 작성할 때뿐만 아니라, 추후 수정 시 매우 번거롭고 어렵습니다.
internal style sheet의 경우에는 inline방식보다는 좀 더 편리하지만 홈페이지를 만들거나 하는 경우에는 html문서의 코드 길이도 매우 길어지고 그와 더불어 css코드 길이도 매우 길어지므로 추후 유지보수가 여전히 어렵습니다.
추천드리는 external style sheet의 방식은 따로 css파일을 만들어서 그저 link로만 연결해주면 되기 때문에 유지보수가 훨씬 간편합니다.
조금 더 나아가, 여러페이지가 있는 예시를 만들다 보면 html과 css 파일들이 점점 더 많아집니다. 그리고 각각의 파일들로 만드는 것이 추후 유지보수에 매우 유용합니다.
일반적으로는 대표 css 파일을 "style.css"로 naming 하는 것이 일반적이며, 그 안에 @import : " " ; 형식으로 다른 css파일들을 광범위하게 연결합니다. 즉, html에 style.css파일만 연결시켜 둔다면, 그 안에서 각각의 css파일들이 각각의 html 파일과 연결되는 것입니다.
그냥 1.html > 1.css 이렇게 1:1로 연결하면 되는거 아니냐.라고 생각하실 수 있겠지만 하나의 html안에 다양한 css링크들이 연결되어야 하는 경우가 있습니다. google font도 연결해야 하고, reset.css와 같은 파일도 연결을 해야 할 때도 있고, 그 html 파일뿐만 아니라 다른 각각의 페이지들에도 같은 style을 적용해야 하는 경우가 있는데, 그럴 경우 @import를 사용하지 않고 단일 링크로 연결한다면 각각의 html 파일 <head> 안에 수많은 css관련 링크들을 하나하나 작성해야 하는 번거롭게 될 것입니다. 게다가 만약, font를 수정해야 하는 경우가 생긴다면 그 많은 html 파일들을 전부 오픈하여 수정해야 하는 비효율성이 생기게 될 것입니다. 이렇듯, 좀 더 효율적으로 파일을 관리하고 유지보수하기 위하여 @import 사용을 잘 익혀두시는 게 좋습니다.
'프로젝트 기록 > To do list' 카테고리의 다른 글
| HTML - WAI-ARIA (0) | 2019.05.14 |
|---|---|
| HTML - input type (0) | 2019.05.13 |
| HTML - fontawesome 연결하기 (0) | 2019.05.12 |
| to do list 만들기 (0) | 2019.05.09 |
| To do list in Javascript for beginners (0) | 2019.05.08 |
