IT/CSS

[CSS] HTML 파일에 CSS 적용하는 3가지 방법

hi.anna 2021. 11. 1. 22:40

 

CSS는 Cascading Style Sheets의 약자로

웹페이지의 레이아웃, 폰트, 색상 등을 지정하는 데 사용됩니다.

 

HTML에 CSS를 적용하는 방법은 3가지가 있습니다.

 

1. inline
2. internal
3. external

 

1. inlne

HTML 태그 안에 직접 CSS 속성을 적용하는 방법입니다.

이 방법은 style이라는 속성을 사용합니다.

<h1 style="color:red">안녕하세요?</h1>
<h1 style="color:green">안녕하세요?</h1>

 

 

2. inaternal

HTML 파일안에 <style> 이라는 태그를 이용하여

그 안에 CSS 속성을 지정하는 방법입니다.

 

<head>
  <style>
    h1 {color: blue}
    h2 {color: red}
  </style>
</heda>
<body>
  <h1>안녕하세요?</h1>
  <h2>안녕하세요?</h2>
</body>

이 방법을 사용하면,

style 태그가 지정된 HTML 파일 전체에 CSS가 적용됩니다.

 

 

3. external

마지막으로 CSS 파일을 따로 작성하고,

그 파일을 link 하여 사용하는 방법입니다.

 

  CSS  (cssfile.css) 

h1 {
  color: blue;
}
h2 {
  color: red;
}

 

  HTML  

<html>
    <head>
        <link rel="stylesheet" href="cssfile.css">
    </head>
    <body>
        <h1>안녕하세요?</h1>
        <h2>안녕하세요?</h2>
    </body>
</html>

 

위 예제는 cssfile.css 파일을 따로 작성하여 저장하고

HTML 파일에서는 line 태그를 이용하여

작성한 파일을 링크하였습니다.

이 방법을 사용하면 CSS 파일 하나를 작성하여

여러 HTML 파일에 공통적으로 적용할 수 있습니다.

 

 

 

 

반응형