[CSS] CSS를 적용하는 4가지 방법

CSS 스타일을 적용하는 4가지 방법에 대해서 알아보겠습니다.

[ Contents ]

1. 인라인 스타일 시트 [inline]

<태그 style="속성: 속성값;"> </태그>

직접 태그에 스타일을 적용하는 방법입니다. 통일성 및 가독성을 해치며 유지보수가 어렵기 때문에, 특수한 경우에만 제한적으로 사용합니다.

  <h2 style="color: red;">star가 되고나서</h2>
  <h2 style="font-size: 30px">star7sss.tistory.com</h2>

<head>
<style>
태그 {속성: 속성값;}
<style>
</head>

head 태그 내에 style 태그를 이용해서, HTML 내의 전체 태그에 서식을 적용합니다. 전체 웹페이지에 적용되기 때문에 global 방식이라 부르기도 하고, head 태그 내에 스타일을 정의하기 때문에 embedded 방식이라고도 합니다.

<head>
  <style>
    h2 {color: red; font-size: 40px;}
  </style>
</head>

body 태그 내의 h2는 모두 빨간색이고 40px 크기로 출력됩니다.

<head>
<link rel="stylesheet" type="text/css" href="css파일 경로">
</head>

CSS를 적용하는 모범답안으로, 가장 많이 쓰는 방식입니다. 외부의 css파일을 불러와서 사용합니다.

<head>
  <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
  <h2>star가 되고나서</h2>
</body>

다음과 같이 head 태그에서 link로 css파일을 불러옵니다.

@charset "UTF-8";

h2 {color: red; font-size: 40px;}

css파일은 위와 같이 구성됩니다. @charset으로 인코딩 방식만 지정하고, 바로 태그에 대한 속성값을 지정합니다.

<head>
<style>
@IMPORT URL("css파일 경로")
</style>
</head>

link 방식 외에, @import URL로 css파일을 불러올 수도 있습니다. 하지만, 이 방식은 거의 쓰이지 않으며 link 태그를 이용하는 것이 좋습니다.

[CSS] 스타일이 적용되는 우선순위 (cascading, overriding) (0)	2022.05.02
[CSS] 스타일을 지정하는 5가지 방법 (타입/자손/클래스/아이디/가상클래스 선택자) (0)	2022.05.01
[CSS] 캐스케이딩(계단형) 스타일 시트란? CSS의 구성요소와 장점 (0)	2022.04.29
[HTML] 블록 태그와 인라인 태그의 종류와 차이점 (feat. div와 span) (0)	2022.04.28
[HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석 (0)	2022.04.27