오늘도 개발

HTML문서에 CSS를 적용하는 세 가지 방법 본문

웹 프로그래밍/HTML & CSS

HTML문서에 CSS를 적용하는 세 가지 방법

Sueeeeeee 2022. 3. 15. 17:53

1) Inline CSS

HTML 문서 내 태그 속성으로 style 지정.

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Test</title>
  </head>
  <body>
      <h1 style="color:blue">파란색 제목</h1>
  </body>
  </html>

2) Internal CSS

HTML 문서 내 헤드 부분에 style 요소 만들어서 작성.

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Test</title>
     <style>
     h1 {
     	color: blue;
     }
     </style>
  </head>
  <body>
      <h1>파란색 제목</h1>
  </body>
  </html>

3) External CSS

따로 CSS 문서 작성 -> HTML 문서 헤드 부분에 link 태그 이용하여 연결.

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Test</title>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <h1>파란색 제목</h1>
  </body>
  </html>
h1 {
   color: blue;
}

'웹 프로그래밍 > HTML & CSS' 카테고리의 다른 글

CSS display 이해하기 1 (inline, block, inline-block)  (0) 2022.05.13
CSS 박스 모델 이해하기  (0) 2022.05.12
HTML로 웹 접근성을 높이는 방법  (0) 2022.05.12
CSS 선택자 활용하기  (0) 2022.03.15
HTML 기본용어  (0) 2022.03.15
'웹 프로그래밍/HTML & CSS' Related Articles more