어제 오늘 내일

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

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 파일에 공통적으로 적용할 수 있습니다.

 

 

 

 

반응형

'IT > CSS' 카테고리의 다른 글

[HTML/CSS] 텍스트 밑줄 간격 늘리기  (1) 2022.02.27
[HTML/CSS] 글자 밑줄 긋기 (위치, 두께, 색깔, 모양 지정하기) text-decoration  (0) 2022.02.27
[CSS] 주석 다는 방법  (0) 2022.02.23
공유하기 링크
'IT/CSS' Related Articles more
Comments