frontendcss

Mixing CSS with HTML

, , , ,

CSS와 HTML의 연결 방법

CSS와 HTML의 연결 방법에는 inline방법과 external방법 2가지가 있습니다.

inline

inline으로 CSS를 사용하는 방법은 HTML내에서 CSS를 직접 사용하는 방식입니다.

1
2
3
4
5
6
7
<head>
  <style>
  body{
    background-color: red;
  }
  </style>
</head>

위 HTML문서와 같이 head 태그 안에 style 태그를 사용하여 직접 CSS를 적용 할 수 있는데 이렇게 사용하게 되면 모든 HTML문서의 body요소의 background-color가 같은 경우 모든 HTML페이지마다 똑같이 사용해주어야 합니다. 따라서 시간적으로 비효율 적이므로 CSS파일을 따로 만들어 연결해주는 external방식이 효율적입니다.

external

external방식은 외부에 CSS파일을 만들어 HTML의 head태그에 링크로 연결하는 방식입니다.

1
2
3
<head>
  <link rel="stylesheet" href="style.css">
</head>

위 HTML문서와 같이 style.css라는 파일을 link로 연결해주게 되면 연결되어있는 모든 HTML 파일은 style.css에서 한번만 변경해주게 되면 한번에 적용됩니다. 따라서 1개가 변경되었을 때 inline으로 사용하게 되면 HTML문서마다 수정해줘야하는 불편을 없앨 수 있습니다.

공유하기