HTML과 CSS와의 관계

안녕하세요.^^ 먼저번 올려드린 HTML 관련 정보글은 잘 보고 계신지요?

사실은 저도 글을 올리면서 제 스스로도 HTML에 대한 정리가 되고 있어서 도움을 받고 있습니다.

그래서 오늘은 해당 글에 이어 HTML의 단짝 친구 CSS에 대해서 설명드리려고 합니다.

(어떻게 보면 이 둘은 실과 바늘 같은 존재지요.^^)

[CSS란 무엇인가?]

CSS는 Cascading Style Sheets의 약자입니다. 뭔가 단어에서 느낌이 팍오지 않으세요?

네 맞습니다. 스타일!!! CSS는 아주 쉽게 말해 기본적으로 HTML을 도와서 텍스트를 꾸미는 역할을 해줍니다.

(연예인으로 따지면 스타일리스트?)

원래 이런 스타일도 HTML로 해결해 버릴 수 있지만 그렇게 되면 HTML 특성상 소스가 복잡해지고

구분하기 어려워집니다.

그래서 나온 것이 바로 CSS의 활용인데요. 기본적인 웹의 구조는(뼈대) HTML의 태그에게 역할을 맡기고

그 외 텍스트 스타일에 관련된 사항은 CSS에게 일임하는 것이죠. 이렇게 일을 분산시키면 글을 수정할 때

아주 손쉽게 관리할 수 있고 코드 또한 심플해집니다.

그래서 제가 아까 위에서 HTML과 CSS는 실과 바늘처럼 한 몸이라고 설명드린 것입니다.^^

[CSS의 활용]

가장 간단하게는 글꼴이나 문자 크기, 너비, 위치, 배경색 등을 지정할 때 가장 많이 사용됩니다.

원래 HTML에 style 태그를 활용하면 CSS의 모든 기능을 구현할 수 있지만 그렇게 되면 코드가

지나치게 길어지고 복잡해지는 단점이 있어 별도로 스타일 파일을 만들어 해당 스타일을

불러오는 방식으로 사용됩니다.

[파일명.css]으로 제작된 css파일이 있다고 가정하면

<head>
  <link rel=stylesheet "type/css" href="파일명.css">
</head>

이런 식으로 불러서 사용합니다.

물론 css 파일이 미리 코딩이 되어 있어야겠죠. 뭐 예를 들면 h1 {color; red; text-align:left;}

식으로 미리 코딩해 놓고 불러와야 합니다. css는 코드 작성 시 < >가 아닌 { }를 활용합니다.

뭔가 img src 태그와 비슷한 느낌이 있죠?

[CSS 디자인 방식]

위에서 사례를 들어 설명드렸지만 사실 CSS를 삽입하는 방식에는 3가지가 있습니다.

#1. 외부 스타일 시트(External Style Sheet)

#2 내부 스타일 시트(Internal Style Sheet)

#3 인라인 스타일 (Inline Styles)

위에 설명드린 사례는 외부 스타일 시트로써 제 생각에 가장 바람직한 css의 활용이라고 할 수 있습니다.

본연의 목적에 부합하는 활용이랄까요? 하지만 나머지 2가지 활용도 알아야 하는 게 모든 코더들이

1번 방식을 사용하지 않기 때문입니다.(ㅜㅜ)

#2 내부 스타일 시트(Internal Style Sheet) 사례

<html>
<head>
 <style type="text/css">
     h1 {color:blue; text-align:left;}
    </style>
</head>
 <h1> 파란색 </h1>
</html>

css 파일을 외부에서 불러오는 게 아니라 직접 html 내부에 위치하게 하는 방식입니다.

#3 인라인 스타일 (Inline Styles) 사례

<h1 style="color:blue; font-size:15px;"> 사이즈 </h1>

코드 작성 시 코드 안쪽에 직접 삽입하는 방식입니다.

차이를 아시겠나요? ㅎㅎㅎ 사실 이 3가지 방법 다 알고 계시면 나중에 html 코드 분석할 때 편하고 수정할 때

어떤 걸 손대야 하는지 감이 팍 옵니다.!!!

HTML과 SEO(search engine optimization)와의 관계 (2)	2020.10.12
HTML의 기본 구조 (2)	2020.10.12
HTML에 대한 이해(기초 정보) (2)	2020.10.12

알려줘요. 스피드웨건! 클로로의 잡학창고