[web] css(cascading style sheets) 에 대한 간단한 overview

cascading style sheets(css)는 html 과 함께 쓰이는 web 표준 언어 중 하나로,

markup 언어가 실제 표시되는 방법을 기술하는 언어이다.

간단히 생각해보면,

html로도 부분부분 style 을 정의할 수 있지만, 

html 언어 특성상 같은 style을 다양한 곳에 적용하고 하더라도

매번 동일한 코드를 추가해주어야만 하고,

이렇게 분산된 코드들은

웹페이지의 규모가 커질 수록 작성하기도 어렵고 관리리가 어려웠을 것이기 때문에

style 에 관련된 tag 또는 tag 모듬을 module 화하여

재사용 및 코드 관리를 수월하게 하도록 하길 원했을 것이다. 

이것이 css 가 존재하게된 가장 큰 배경이라고 생각된다. (주관적 생각임)

이렇게 module화된 녀석을 selector 란 이름으로 정의하며, 

구문 상으로는 

selector{property:value;}

와 같이 정의하고 html 코드에서는 기존의 tag 와 사용 방식이 동일하다. 

<selector> 나에게 style 을 적용해 주세요 </selector>

이 selector 는 기존의 html tag 를 overriding 할 수 있다. 

property 의 종류에는 

• text, font 관련
• padding 이나 margin, boarder 관련 (좋은 개념소개페이지)
• alignment 관련
• background 관련

등이 있으며 자세한 내용은 관련 tutorial 을 참고하면 

쉽게 알 수 있다.(글 하반부 추천 tutorial  참고)

또한 같은 selector 라도

다양한 종류가 존재할 수 있도록 class 기능을 제공하여

css 파일에 .classname 형태로 style 을 정의하고, 

html 파일에서 <tag class="classname"></tag> 형대로 사용할 수 있다. 

즉 같은 tag 라도 다양한 형태로 구분이 가능하다는 이야기 이다. 

이는 같은 style을 동일한 페이지에서 여러번 사용가능하고, 

매번 property 와 value 를 입력해야하는 초기 html과는 달리 

간단한 tagging 으로 style 표시가 가능하다는 장점이 있다. 

class 와 비슷한 구문으로는 

identification(ID)가 있는데, 이는 한 page 내에서 

단하나의 사용만을 허용하는 style 정의 방식이다. 

주로 framing 에 많이 쓰이며,

class 의 dot(.) 대신 sharp(#)를 사용한다. 

특히 ID 와 함께 많이 쓰이는 selector 로는 <div id="IDname"> 가 있는데 

해당 style 이 적용될 범위를 설정하는 것으로 

다수의 tag 들에 걸친 범위에서 적용하는데 사용된다. 

이와는 대조적으로 

<span> 은 특정 한 부분에 특색있는 style을 적용하는데 많이 사용된다. 

이렇게 작성된 css 코드는 

해당 페이지의 <header> tag 내에 기술 하거나

.css 파일로 저장하여 style을 적용하고자 하는 page 로 다음과 같이 

링크를 하면 된다. 

<link rel="stylesheet" type="text/css" href="cssfilename.css" />

[예재 todo]

조사하면서 알게된 유용한 tutorial page 를 몇가지 소개하면 아래와 같다. 

참고가 되시길..

1. quackit.com   http://www.quackit.com/css/tutorial/
2.  Mozilla dev. network    https://developer.mozilla.org/en-US/docs/CSS
3.  csswizardry http://csswizardry.com/web-design+/
4.  유용 template 다수 보유    http://ramblingsoul.com/

이제 간단히 이해가 되셨다면 tutorial 페이지 열고 hello world 작성해보시길 추천드립니다.^^