728x90
반응형
html 파일에 css 적용시키는 방법
- 인라인 방식 : HTML 파일의 각 태그안의 <style> 속성에 내용 작성
/* test.html.css */ <p style="color:red; background-color:yellow;>인라인</style> - 내부 스타일 시트 : HTML 파일 안에 <style>태그로 작성
/* test.html.css */ <head> <style> #First { color: red; background-color: yellow; } </style> </head> /* css/style.css */ #First { color: red; background-color: yellow; } - 외부 스타일 시트 : <style>태그 안의 내용을 CSS 파일로 분리하고 <link>태그로 연결
절대주소 또는 상대주소 넣어주면 됨.
(가장 좋은 방법)
/* test.html.css */ <head> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> /* css/style.css */ #First { color: red; background-color: yellow; } - CSS Import : <style> 태그 안의 내용을 CSS 파일로 분리하고 파일을 import
절대주소 또는 상대주소 넣어주면 됨.
/* test.html.css */ <head> <style type='text/css'> @import url("css/style.css"); </style> </head> /* css/style.css */ #First { color: red; background-color: yellow; } - <link>와 @import 동시에 사용 : html에서는 <link>태그로 css 파일 연결하고
css 파일안에 여러 css 파일들을 import 하는 구조로 가독성 높이기
<head> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> /* css/style.css */ @ import url("style-header.css") @ import url("style-main.css") @ import url("style-footer.css") @ import url("style-sidebar.css")
link를 써야할까? import를 써야할까? 결론은 link 써라.
- Best : <link> 태그만 줄줄이 사용 (병렬 다운로드 가능, 다운로드 순서 보장)
- Normal : @import만 줄줄이 사용 (병렬 다운로드 가능, 다운로드 순서 뒤섞여서 예상치 못한 error 발생 가능)
- Worst : 둘을 섞어 쓰는 순간부터 병렬로 다운로드가 안되기 때문에 느려짐
<link> 다운 다 받고나야 @import 다운 받는다고 생각하면 됨.
반응형
'프론트엔드 개발 > HTML CSS' 카테고리의 다른 글
| CSS 폰트 적용 방법 (0) | 2021.09.03 |
|---|---|
| CSS - Cacading Style Sheet, Selector(선택자) (0) | 2021.09.03 |
| HTML - input 태그 (사용자 입력, 텍스트 필드, 버튼) (0) | 2021.08.28 |
| HTML - form 태그 (0) | 2021.08.13 |
| HTML - 이미지, 오디오, 비디오, 링크 삽입 (0) | 2021.05.30 |