CSS - HTML에 CSS 적용시키기

CSS/CSS 2020. 3. 2. 01:02

Inline Style Sheet란?

→ HTML 태그에서 style 속성으로 CSS 코드를 넣어 적용시키는 방법이다.

<p style="color: blue">Hello world!</p>

<p> 태그가 선택자(selector)가 되고, CSS 코드에는 속성(property)과 값(value)을 이용해 사용한다.

단, 꾸미는데 한계가 있고, 재사용이 불가능하다는 단점이 있다.

Internal Style Sheet이란?

→ HTML 문서에서 <style>과 </style>로 CSS 코드를 넣는 방법이다.

<style>
  h1 {
    color: red;
  }
</style>

이와 같은 코드를 HTML 문서 안에 넣으면, h1태그의 글자가 빨간색이 된다.

보통 <style>태그는 <head>와 </head> 사이에 넣지만, HTML 문서 어디든 넣어도 잘 적용된다.

단, 이 방법은 하나의 HTML 문서 안에서 여러 요소를 한 번에 꾸밀 수 있다는 장점이 있지만,

다른 HTML문서에는 적용시킬 수 없다는 단점이 있다.

Linking Style Sheet이란?

→ 별도로 CSS파일을 만들고 HTML 문서를 연결하는 방법이다.

예를 들어 모든 h1 요소의 글자를 빨간색으로 하고 싶다면, 다음의 내용으로 style.css 파일을 만듭니다.

(CSS 파일의 확장자는 css입니다.)

예를 들어 style.css 파일이 있다고 하자.

h1 {
  color: red;
}

적용을 원하는 HTML 문서에 다음의 코드를 추가한다.

<link rel="stylesheet" href="style.css">

위 코드는 HTML 파일과 CSS 파일이 같은 폴더에 있다고 가정했을 때의 코드로, 경로는 적절히 수정해야 한다.

또, HTML 문서가 있는 폴더에 css 폴더가 있고, 그 안에 style.css 파일이 있다면 다음과 같이 합니다.

<link rel="stylesheet" href="css/style.css">

이 방법은 여러 HTML 문서에 사용할 수 있고, 적용시키고 싶은 문서에 <link> 태그로 연결만 해주면 된다.

태기의 개발 Blog 태기의 개발 Blog