CSS와 HTML의 결합

이번시간에는 CSS파일과 HTML파일을 결합시키는 작업을 배워보도록 하겠습니다.

본격적으로 들어가기 전에, 타이틀, 문단, 링크를 가진 HTML파일을 먼저 만들어 보겠습니다.
<h1>Title</h1> <p>Hello, everyone</p> <a href="#">Fake link</a>

 

 

아래와 같이 파일의 모습을 크롬에서 확인할 수 있습니다.

 

 

 

그럼 이제 HTML파일을 CSS와 결합해보도록 하겠습니다. 
HTML파일과 CSS파일을 결합하는 방법은 두가지, 1> incline, 2> external 있습니다. 

1> incline방법은 head부분에 style을 열고 닫아 줌으로써, HTML파일 상단에 CSS를 붙여줍니다. <style></style>

 

 

여기서, style내부에 body를 열어서 배경색을 빨간색으로 설정하면 크롬에서 바뀌는 것을 확인할 수 있습니다. 
<style> body{background-color: red;} </style>

 

 

이와 같이, incline으로 연결하는 방법이 좋아보이긴 하지만 사실 좋은 방법은 아닙니다.
그 이유는 같은 배경색을 쓰길 원하는 HTML 모든 문서에, 해당 CSS를 복사-붙여넣기를 해 주어야 되기 때문입니다.

이러한 불편함을 직접 확인해보기 위해 contact-me.html이라는 새로운 HTML 문서를 생성해 보겠습니다.

 

 

그리고 index.html에서의 링크, <a href="#">Fake link</a>가 contact-me.html문서로 이동하도록 하겠습니다. 

 

 

이제 크롬에서 두 파일을 각각 확인해보면, index.html배경색은 빨간색이지만, contact-me.html배경색은 하얀색입니다.

 

 

그 이유는 contact-me.html에는 따로
빨간색으로 설정하는 CSS, <style> body{background-color: red;} </style>를 입력하지 않았기 때문입니다.

그럼 이번에는 contact-me.html문서에 html:5를 입력하면 생성된 코드에 간단하게 title만 수정해서 만들어 보겠습니다. 

 

 

그렇다면, 이제 두 개의 HTML문서에 각각 h1태그가 하나씩 있습니다. 

 

 

여기서, 만약 h1태그 모두 다 초록색으로 쓰고 싶지만, index.html에서 h1태그만 초록색으로만 변경한다면,
<style> body{background-color: green;} </style>

 

 

크롬에서 index의 h1태그는 초록색이지만, contact-me의 h1태그는 색의 변화가 없다는 것을 확인할 수 있습니다.

 

 

그 이유는 바로, index.html에만 CSS를 변경했기 때문에, 두 파일의 h1태그의 색이 다른 것입니다. 

두 파일이 h1태그의 색을 같게 해 주기 위해서는 contact-me.html에도 CSS를 복사-붙여넣기 해 주어야 됩니다.

 

 

이러한 비효율성이 바로, incline으로 HTML과 CSS를 연결할 때 불편한 단점이 됩니다.

추가로, incline방법으로 두 HTML문서 h1태그의 글자크기를 모두 바꾸고 싶다면,

 

 

마찬가지로, 두 HTML문서에 동시에 CSS를 복사-붙여넣기를 해야 합니다.
그렇지 않다면, 크롬에서 index만 크기가 변경되고, contact-me는 변경되지 않는다는 것을 확인할 수 있습니다.

 

 

이처럼, incline방법은 비효율적이기 때문에, HTML과 CSS를 연결시켜 주는 방법은 external로 대신 합니다.

2> external하게 연결하는 방법이 훨씬 좋은 이유는, 그냥 새로운 CSS파일을 만들어 주기만 하면 되기 때문입니다.

 

 

그럼, CSS파일, style.css와 연결하고 싶은 모든 HTML문서는 HTML의 head 부분에 연결 시켜주면,
즉, 연결하고자 하는 모든 HTML문서의 head부분에 <link href="style.css" rel="stylesheet">와 같이 작성해 주면, 

 

 

style.css의 내용들은 연결된 HTML문서에 모두 적용이 됩니다.

이제 여기서 style.css에 ht태그에 분홍색이라고 작성을 하면, h1{color: pink;}

 

 

HTML문서, index.html, contact-me.html 두 개 모두, h1태그가 분홍색으로 변경되어 있다는 것을 확인할 수 있습니다.

 

 

 

다시 정리하면,
1> incline은 HTML문서 내부에서 style을 작성하는 방법은 동일한 CSS를 여러 HTML문서에 동시에 적용하기 위해서는 계속 복사-붙여넣기를 해야 되기 때문에 비효율적인 방법입니다. 
2> 반면, external방법은 CSS문서와 HTML문서를 연결하여,
style.css에서 변경되는 내용들이 자동으로 모든 HTML문서에 동시에 적용되기 때문에,
우리는 CSS와 HTML문서를 연결할 때, 효율적인 external방법을 사용하도록 하겠습니다.