안녕하세요?
시작하는 코딩러 찬이입니다.
오늘은 HTML에 CSS를 적용할 때 사용하는 방식을 알아보려고 합니다.
그럼 시작하도록 하겠습니다.
(사진출처 : 존스홉킨스대학)
CSS 적용하는 방법에는 크게 3가지의 방식이 존재합니다.
CSS를 적용하는 방식
- 인라인 스타일
- 내부 스타일
- 외부 스타일
## 👉인라인 스타일 우선 인라인 스타일입니다.
인라인 스타일은
HTML 요소 내부에 style 속성을 사용하여
적용하는 방법입니다.
코드를 살펴보시겠습니다.
<p style="color:blue"> HELLO </p>위 코드는 p태그 안에 color:blue 속성을 직접 적용시킨 상황입니다.
하지만 인라인 스타일은 그렇게 권장하지 않는 방법입니다.
가장 중요한 이유로는 "가독성"입니다.
위 코드는 단순히 하나의 속성만 주었기 때문에 괜찮지만
만약 HTML 요소 내에서 많은 CSS 속성을 주게되면
코드의 가독성이 떨어지게 됩니다.
이러한 단점을 해소하기 위해 사용하는 방법이 바로
<내부 스타일>입니다.
## 👉내부 스타일
내부 스타일은 HTML 문서의 "head"태그 안에
"style"태그를 사용해서 적용하는 방법입니다.
이 스타일은 해당 HTML문서에만 스타일을 적용합니다.
때문에 해당 문서에 있는 모든 스타일의 관리가 용이합니다.
코드를 살펴보시겠습니다.
<head>
<style>
p{
color:blue;
background-color:yellow;
font-size:small;
}
</style>
</head>
<body>
<p>HELLO</p>
</body>위 코드는 head태그 안에 style이라는 태그를 사용하여
body태그 안에 있는 p태그에 속성을 부여한 모습입니다.
하지만 위 코드도 단점이 있습니다.
홈페이지를 구성했다고 가정했을 때,
CSS의 한 부분에서 오류가 발생하였습니다.
그럼 담당자는 어디서 오류가 발생했는지를 알기 위해 각각의 HTML 문서를 열어보면서 CSS를 찾아야 합니다.😥
또한 한 HTML 파일에 요소가 무수히 많고
모든 요소에 CSS 속성을 주어야 한다면 HTMl 파일 내부에 속성을 주기에는 코드가 너무 길어져 가독성이 떨어집니다.
이런 불편함을 해소하기 위해서 사용하는 방법이 바로 <외부스타일>입니다.
👉외부 스타일
외부스타일은 웹 사이트 전체의 스타일을 하나 혹은 최소한의 파일에서 변경하는 방법입니다.
"head"태그 안에 "link"태그를 사용하여 연결하고 적용합니다.
코드를 보시겠습니다.
<!-- HTMl 파일 -->
<head>
<link href="...CSS 파일 경로..." rel="stylesheet">
</head>
<body>
<p>HELLO</p>
</body>/* CSS 파일 */
p{
color:blue;
background-color:yellow;
font-size:small;
}이런 식으로 외부에 CSS 파일을 만들어서 HTML 파일에 적용하는 방법입니다.
이 방식을 사용하면 CSS 파일이 따로 분리되어
가독성도 높아지고 유지보수에도 용이하기 때문에
현재 가장 많이 사용하는 CSS 용법입니다.
오늘은 CSS를 적용하는 3가지 방법에 대해 살펴보았습니다.
긴 글 읽어주셔서 감사합니다. 😊
