CSS사용법을 함께 알아볼께요. 매우 기초적인 부분입니다. CSS를 HTML에 적용시키는 방법에 대해서 이번 시간에 알아보도록 해요.
웹 개발에 필수라고 하면 CSS와 HTML이 있습니다.
대체로 HTML이 웹 페이지의 뼈대, 토대라고 한다면 CSS는 모양을 결정짓는 살(skin)같은 것이며 JAVASCRIPT는 그렇게 만들어진 웹 페이지의 액션을 담당합니다.
이번 포스팅에선 CSS를 HTML에 어떻게 적용시키는지에 대해 알아보겠습니다.
CSS를 HTML에 적용시키는 3가지 방법. 지금부터 배워볼께요.
CSS 사용법 기초 HTML 적용방법 3가지
CSS를 HTML에 적용시키는 방법은 3가지가 있습니다. 각각의 방법은 장단점이 있습니다만, 조금 더 나은 방법이라고 알려진 것도 있습니다.
1. Inline Style Sheet
2. Internal Style Sheet
3. Linking(External) Style Sheet
Inline Style Sheet
이 방법은 <a>, <p>, <div> 등과 같은 HTML 태그에 style 이라는 속성을 주어 CSS를 적용시키는 방법입니다.
사용 방법은 아래와 같습니다.
<p style="color:red; font-size:20px">Inline Style Sheet 예제</p>위 방법은 CSS를 바로바로 적용시켜볼 수 있어 빠르다는 장점이 있지만 재사용성이 떨어집니다. 무슨 말이냐 하면 똑같은 효과를 줘야 할때 하나하나 style 속성을 추가해야 한다는 것입니다.
그리고 이 효과들 중 추가를 해야 하거나 빼야 하는 것이 있게 된다면 어떻게 해야 할까요?.. 말 안해도 아시겠죠?
Internal Style Sheet
이 방법은 웹 페이지 HTML 코드 중 <head> 부분이나 구현부 위쪽에 <style>태그를 주어 적용을 하는 것입니다. 즉 문서 내부에 css 코드를 삽입하는 것이지요.
사용 방법은 아래와 같습니다.
<style>
p {
color: red;
font-size: 20px;
</style>
(여기에서 p가 선택자(selector)입니다. 선택자에 대한 것은 추후 포스팅하도록 하겠습니다. )
Inline Style Sheet는 태그 자체에 넣는 반면, Internal Style Sheet는 문서내에서 재사용성이 높아진다는 장점은 있지만 다른 문서에서는 사용할 수 없다는 단점이 있습니다.
Linking(External) Style Sheet
Linking Style Sheet 방식은 style.css 와 같은 별도의 파일을 만들고 해당 파일을 문서와 연결하여 사용하는 방식입니다.
아래처럼 사용할 수 있습니다.
style.css 파일
p {
color: red;
font-size: 20px;
}
css파일을 html 문서에다 연결(Linking)을 시켜주는데 적용시킬 문서에 <head>태그 사이에 아래의 코드를 추가시켜주시면 됩니다.
index.html 파일
<head>
<!-- codes -->
<link rel="stylesheet" href="./style.css">
</head>
link태그의 href는 style.css파일의 경로를 입력해줍니다.
Linking 방식은 규모가 어느정도 되는 대부분의 프로젝트에서 쓰이는 방식입니다. 단점보다는 장점이 훨씬 많은 방식이기도 하구요.
해당 css효과가 필요한 문서에 <link> 태그로 연결만 시켜주면 되니 재사용성이 매우 뛰어난 방식입니다.
마치며
지금까지 css의 기초인 css를 html 문서에 적용시키는 3가지 방법에 대해 알아보았습니다.~
비정기적으로 css, html에 대한 내용을 다루도록 하겠습니다. 감사합니다.
해당 포스팅이 조금이나마 도움이 됐다면 ♡공감 버튼 부탁드립니다.~
