[HTML/CSS] CSS를 HTML에 적용하는 방법과 장단점(Inline Style Sheet, Internal Style Sheet, Linking Style Sheet)

CSS를 HTML에 적용하는 방법 세 가지를 알아보자!

- Inline Style Sheet

HTML 태그의 style 속성에 CSS 코드를 넣는 방법

<p style="color: blue">example</p>

[장점] 직관적 사용 가능

[단점] 꾸미는데 한계가 있고, 재사용이 불가능함

- Internal Style Sheet

HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법

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

[장점] HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있음, 한 문서에만 해당되는 스타일 지정 가능

[단점] 다른 HTML 문서에는 적용할 수 없음, HTML 문서마다 스타일을 매번 지정

- Linking Style Sheet

별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법

h1{
  color: red;
}

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

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

[장점] 여러 HTML 문서에 적용 가능, 웹의 전체 스타일을 일관성있게 유지하며 변경시에도 일괄적으로 변경되어 효율을 극대화 가능

[단점] 권장하는 방식으로 전체 페이지를 잘 구조화하여 재사용이 가능한 style을 고려해야 함