html css 적용 및 불러오기

by

기본적으로 html 문서에 css를 적용하기 위한 방법은 3가지가 있으며 head 태그 사이에 style 안에 css 코드를 넣거나, html 태그의 style 속성에 CSS 코드를 넣을수가 있습니다.

CSS코드가 너무 길거나 내용이 많아지는 유지보수를 위해서 별도의 CSS 파일(style.css)을 만들어서 html 문서와 연결하는 방법을 사용해 볼수도 있습니다.

CSS 스타일시트 적용

아래의 예제 문서에서 보는것과 head 태그 사이에 style 에 색상 코드 css 적용하여 h 태그를 적용한 것입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{color:#FF0000}
    </style>
  </head>
  <body>  
    <h2>Hello world</h2>
  </body>
</html>

html 코드내 css 삽입

아래의 예제 웹페이지의 경우에는 h 태그에 직접 style 를 적용하여 css 색상 코드를 적용한 것으로, head 태그의 style코드보다 우선순위로 적용이 됩니다.

<!DOCTYPE html>
<html>
  <head>  </head>
  <body>
    <h1 style="color:#0100FF">Hello World</h1>
    <h2>Hello world</h2>
  </body>
</html>

외부 CSS 파일 적용

아래의 예제는 css 코드가 너무 많거나 유지보수를 위해서 외부에 CSS 파일을 만들어서 link rel=”stylesheet” href=”style.css” 속성을 사용하여 외부에서 CSS 속성을 끌어올수가 있습니다.

<!DOCTYPE html>
<html>
  <head> 
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1> Hello World</h1>
    <h2>Hello world</h2>
  </body>
</html>

외부 style.css 코드

외부의 CSS파일 이름으로 style.css 를 적용하여 h1과 h2 색상을 각각 속성을 적용해 본것입니다.

h1{color:#FF0000}
h2{color:#0100FF}
▤ 목차 목차 보이기

Leave a Comment