프론트엔드 개발/HTML CSS

CSS - html 파일에 css 적용시키는 방법

snowman95 2021. 9. 2. 17:02
728x90
반응형

html 파일에 css 적용시키는 방법

  1. 인라인 방식 : HTML 파일의 각 태그안의 <style> 속성에 내용 작성
    /* test.html.css */
<p style="color:red; background-color:yellow;>인라인</style>
  2. 내부 스타일 시트 : HTML 파일 안에 <style>태그로 작성
    /* test.html.css */
<head>
  <style>
  #First {
    color: red;
    background-color: yellow;
  }
  </style>
</head>

/* css/style.css */
#First {
  color: red;
  background-color: yellow;
}
  3. 외부 스타일 시트 : <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;
}
  4. 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;
}
  5. <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 다운 받는다고 생각하면 됨.
반응형
저작자표시 비영리 동일조건