[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 를 몇가지 소개하면 아래와 같다.
참고가 되시길..
- quackit.com http://www.quackit.com/css/tutorial/
- Mozilla dev. network https://developer.mozilla.org/en-US/docs/CSS
- csswizardry http://csswizardry.com/web-design+/
- 유용 template 다수 보유 http://ramblingsoul.com/