컴공생의 다이어리

[CSS] 선언방식 - 내장방식, 인라인 방식, 링크방식, @import 방식 본문

Development/Network & Web

[CSS] 선언방식 - 내장방식, 인라인 방식, 링크방식, @import 방식

컴공 K 2021. 12. 7. 00:01

CSS 선언방식

CSS를 작성하고 HTML문서에 포함시키는 방식은 크게 내장방식, 인라인 방식, 링크방식, @import 방식이 있다.

 

내장방식

내장방식은 HTML 파일 안에 <style> 태그로 스타일을 작성하는 방식이다.

<style>
  div {
    color : red;
    margin : 20px;
  }
</style>

 

 

인라인 방식

요소의 style 속성에 직접 스타일을 작성하는 방식이다. 유지보수의 측면에서 어려움이 있기 때문에 권장하지 않는 방식이다.

<div style="color:red; margin:20px;">
  ...
</div>

 

 

링크방식

link 태그를 이용하여 외부 css 문서를 가져와서 연결하는 방식이다.

<link rel="stylesheet" href="./css/main.css">

 

 

@import 방식

css의 @import 규칙으로 css문서 안에서 또 다른 문서를 가져와 연결하는 방식이다.

<link rel="stylesheet" href="./css/main.css">
@import url("./box.css");

div {
  color : red;
  margin : 20px;
}
.box {
  background-color: red;
  padding: 20px;
}

 

 

 

 

 

https://manbalboy.github.io/front/css-declaration.html

 

[CSS] 선언방식

CSS 선언방식에 대해서 알아본다.

manbalboy.github.io

 

728x90
Comments