2.(2) 정리 : CSS, HTML에 CSS적용 방식

CSS란? 

Cascading Style Sheet 을 말하여 웹에 사용되는 HTML 문서가 사용자에게 어떻게 보여지게 할지 만들어(꾸며) 주는 언어이다.

Mozilla에 설명이 잘 되어있어서 링크를 걸어둔다. (https://developer.mozilla.org/ko/docs/Web/CSS/ko/docs/Web/CSS/시작하기/CSS란)

---

HTML에 CSS를 적용하는 3가지 사용법이 있다.

1. 인라인(inline)방식

2. 내부스타일 시트

3. 외부스타일 시트 

(4. CSS 임포트)

1. 인라인 방식 

말그대로 HTML 코드안에서

<span>이라는 태그와 style속성을 통해 CSS 속성을 주어 사용한다.

※Result 누르면 결과를 확인 가능하다.

2. 내부스타일 시트 

HTML코드안에 넣는 것은 아니지만 같은 HTML문서 안에서 넣는 방식이다. 

<span>이라는 태그를 사용하였고

코드 외부에서 <span>태그를 정의하는 것처럼 <style>속성의 CSS를 사용하는 방식이다.

※Result 누르면 결과를 확인 가능하다.

3. 외부스타일 시트 

HTML코드안에 넣는 것도 아니고 같은 HTML문서 안에 넣는 방식도 아니다. 

HTML의 가장 중요한 것!  

링크를 통해서 확장자가 .CSS인 문서를 HTML과 연결 시켜주는 것이다. 

아래 코드를 보면 알 수 있는데 

<link rel ="stylesheet" href="style.css">를 통해 HTML에 style.css를 링크를 걸어 준걸 볼 수 있다. 

따라서 내부스타일 시트와 다르게 <style>태그 없이 바로 <span>을 통해 속성값을 줄 수 있다는 것도 확인 가능하다.

※CSS, Result 누르면 CSS문서와 결과를 확인 가능하다.

(4. CSS 임포트)

3. 외부스타일 시트 처럼 CSS를 작성하고 HTML에 @import url을 사용해 넣는 방식이다. 

너무 번거럽고 귀찮아 잘 사용하지 않는다.  

---

어떤 방식을 적용해야할까?

그렇다면 어떻게 CSS 적용해야 잘했다고 소문이 날까??

1. 인라인 방식의 경우 사람이 보았을 때는 무척 편리하다.

바로 앞에 속성이 정의가 되어있으니 읽어가면서 바로 확인이 가능하다. 

하지만 크롤링을하는 크롤러의 입장에서 보았을 경우에는 좋지 않다. (ex.글을 가져가야하는데 CSS속성이 끼여있다.)

그리고 한번만(적은 횟수)로 CSS를 사용했을 경우에는 좋지만, 

여러번 사용하게된다면 소스코드가 늘어나고 수정시 번거로운 일이 발생할 수 있다.

그렇다면 2. 내부스타일 시트 방식으로 CSS를 모아서 관리하게 되면 어떤가??

내부스타일 시트의 경우에는 CSS내용이 전부 HTML에 속해있다. 

이것이 중요한 포인트가 되는데..

스마트폰을 사용하면서 인터넷 네트워크를 사용하면 요금이 나간다. (LTE데이터, 3G데이터라고 하는 것들...)

따라서 인터넷 서핑을 하게 될 경우 HTML를 요청하고 응답받으면서 인터넷 네트워크를 사용하므로 데이터 사용이 발생하게 될 것이고, 

HTML안에 많은 내용의 CSS데이터가 포함이 되어있다면, 그많큼 더 많은 데이터를 사용하게 될 것이다. 

이렇게 생각했을 때.. 

CSS의 내용(속성)은 변하지 않는다고 가정하면

우리가 HTML을 받을 때마다 똑같은 CSS를 계속 포함해서 받게되면 우리는 아까운 데이터를 더욱 많이 사용하게 된다는 것이다.

이걸 막기위해 3. 외부스타일 시트 방식으로 CSS를 사용하면 좋은데

HTML문서가아닌 외부문서에 CSS를 관리하기 때문에 내용변화가 없는 CSS는 한번만 받아서 캐시(캐시메모리)로 저장하게 되면 불필요한 데이터 낭비없이 사용자가 사용하기에 더욱 편리한 웹 환경을 만들어 줄 것이다. 

정리:

1.인라인 방식은 가끔사용할때 사용하자.

2.내부스타일 시트방식을 사용할 바에는

3.외부스타일 시트방식을 사용해보자!!!!!

외부스타일 시트방식 짱!!!!

CSS 치트시트 링크 : http://learn.shayhowe.com/advanced-html-css/complex-selectors/