03 CSS의 등장

0.

웹을 만든 사람들은 웹 페이지를 아름답게 만드는 방법에 대한 깊은 고민에 빠진다.

두가지 갈림길에 서게 된다.

1) 쉽지만 한계가 있는 방법.

2) 어렵지만 근본적인 해결책인 방법.

 

이미 존재하는 언어였던 HTML 언어에 디자인과 관련된 새로운 태그를 추가해서

사용 하는것이 1) 이다.

 

디자인에 최적화된 완전히 새로운 언어를 만드는 것이 2) 이다.

 

처음에는 1)을 선택해서 사용하다가,

한계를 깨닫고 어렵지만 근본적인 해결책을 결국 찾게 된다.

그게 바로 CSS 이다.

 

1.

웹 브라우저가 처음 나왔을 때 웹 브라우저는 HTML 언어만 해석해서

처리하는 프로그램 이였다.

따라서, 웹 브라우저는 기본적으로 코드를 HTML 이라고 생각 한다.

 

CSS는 HTML과는 완전히 다른 컴퓨터 언어 이다.

 

그래서, 우리는 웹 브라우저 에게

 

웹 브라우저야 우리가 CSS 코드를 사용할 테니 HTML이 아니라,

CSS 문법에 따라서 해석해줘 라고 HTML의 문법으로 이야기 해야 한다.

 

정리하자면,

처음에 HTML 문법으로 나 CSS 코드 사용할거야 라고 말하면,

웹 브라우저는 CSS 문법에 따라 HTML 코드를 해석할 수 있게 된다.

 

2.

<style> 태그

 

해당 태그는 HTML의 문법이면서 동시에 <style> 태그 내부에 있는 코드 (내용) 들은

CSS 이므로 CSS 언어의 문법에 맞게 처리해줘 라는 의미를 가진다.

 

 

웹 브라우저야 모든 <a> 태그에 대해서 라는 뜻을 의미하는 코드가 a 이다.

그리고 중괄호를 열고 폰트 색상이 빨간색 이라고 코드를 작성 한다.

 

 

그러면 위 이미지 처럼 a태그에 해당하는 모든것들이 빨간색 글씨로 변하게 된다.

 

앞장에서는, HTML 태그인 <font> 태그를 사용해서 했고,

 

이번에는 CSS라는 새로운 언어의 문법을 사용해서 했다.

 

결과는 같지만, 완전 다른 것이다.

 

<font> 태그의 경우는 red 값을 black으로 바꿔야 할때,

<font> 태그가 1억개가 있으면 1억개를 일일히 다 바꿔줘야 한다.

 

불가능에 영역 이다.

 

하지만, CSS는 위와 같은 문법을 사용하기에,

color : red를 color : black 으로 바꿔주는 순간

1억개 이던 10억개이던, a에 해당하는 모든 부분의 글씨가 순식간에 검은색으로 바뀌게 된다.

 

 

단지 red를 black 으로 변경해줬을 뿐인데,

 

 

a 태그에 해당하는 모든 글씨들이 검은색으로 변경 !

 

3.

이러한 개념을 중복의 제거 라고 할 수 있다.

 

코드를 구성할 때 중복이 발생한다 ?

그러면 그것은 좋지 않은 코드 이다.

비효율적이고, 비생산적인 코드 이다.

유지보수도 어렵고, 회사의 이익이 절감된다.

뿐만아니라, 가독성 측면에서도 유리해진다.

 

하지만, CSS 언어의 문법을 통해 중복된 코드를 하나의 코드로 만들어 중복을 없앴다.

 

( 기존에는 <font> 태그를 각 문단마다 일일히 달아줬었다.. )

 

이것이 바로 CSS를 사용하는 이유이다.

 

4.

디자인과 관련된 코드들은 <style> 태그 내부에 갖혀 있게 된다.

이는, 웹 페이지를 해석할 때 디자인과 관련된 코드들이 전혀 필요 없다면,

<style> 태그 내부에 있는 코드들은 무시를 하면 된다는 의미가 된다.

 

즉, 각자의 의도에 맞게 효율적으로 코드를 분석할 수 있게된다.

 

이 개념이 CSS 언어가 도입된 중요한 이유중 하나 이다.

 

★ HTML은 정보 전달에만 전념하도록 !!! ★

 

HTML로 부터 디자인에 대한 기능을 빼앗아 온 것이 바로 CSS 라고 할 수 있다.

 

그리고 위에 말했듯이, CSS를 통해 웹 페이지를 디자인 하는것이

HTML을 통해 디자인 하는 것보다 훨 ~~~ 씬 효율적이기 때문에

CSS가 도입됬다고 보면 된다.

 

정리

 

1)

HTML은 정보 전달에만 전념하도록 CSS 언어가 도입 됬다.

 

2)

HTML로 디자인 하는거보다, CSS를 통해 디자인 하는게 효율적이기에 CSS 언어가 도입 됬다.