☆ CSS(Cascading Style Sheet)란?
- Cascading
cascade는 "폭포가 되어 떨어지다"라는 뜻입니다. 폭포는 물이 위에서 아래로 힘차게 흘러 내리죠? 그럼 왜 style sheet에, cascading이란 말이 붙었을까요? CSS에는 '우선순위'라는 것이 있습니다. 이 CSS의 우선순위가 정해지는 것이, 꼭 cascade와 비슷한 느낌을 주기 때문에, style sheet에 cascading이란 말을 붙인 것입니다.
- Style
style은.. 예를 들어, 어떤 문서가 있는데 글자 크기가 10, 글자색은 노란색, 글꼴은 고딕입니다. 다른 문서는 글자 크기가 12, 글자색은 파란색, 글꼴은 명조입니다. 이 두 개의 문서가 내용이 같을 수는 있지만, 겉모양은 다릅니다. 이것을 보고, 두 문서는 스타일이 다르다고 합니다. 그렇죠?
- Sheet
sheet는 무엇일까요? 단어 뜻으로 보면, 이는 style을 적어 놓은 종이라는 의미입니다. 즉, '겉모양은 이러 이러하게 하라'는 내용이 들어 있는 곳(실제 종이는 아니구요)입니다
여러 문서가 내용은 다르지만, 겉 모습은 똑같은 경우를 생각해 보세요. 문서 하나 하나의 내용과 겉 모습을 작성하게 되면, 중복되는 작업이 있습니다. 그러니까 style을 한 번만 정해 놓고, 내용만 있는 문서에 이를 적용하면, 아주 편리하겠죠? 바로 이러한 역할을 하는 녀석이 Style Sheet입니다.
☆ CSS(Cascading Style Sheet)은 왜 필요한가?
- HTML 문서를 코딩하면서 각 부분마다 일일이 폰트 종류, 크기, 색상을 지정하는 것은 매우 번거로울 뿐 아니라 문서 크기를 무겁게 합니다. 그런데 CSS는 스타일 시트를 별도로 분리하여 문서 크기를 줄여줌으로써 결과적으로 네트워크 성능 향상을 가져오게 합니다.
- CSS는 사용할 element나 어떤 부분에 맞추어서 스타일을 지정하므로 하나 하나 수작업을 할 필요가 없도록 도와줄 수 있습니다.
- 또한 HTML만으로 불가능한 여러 가지 레이아웃과 시각 효과를 표현할 수 있습니다.
- CSS는 다양한 플랫폼, 브라우저, 사용자 환경을 초월하여 작성자와 보는 사람 모두가 만족할 수 있고 받아들일 수 있는 잘 다듬어진 디자인을 가능하게 합니다.
☆ Style Sheet의 사용 예
★ Style Sheet를 사용하지 않는다면 다음과 같이 문서의 구조를 나타내는 태그와 스타일을 지정하는 태그를 함께 사용해야 합니다.
<![CDATA[<P><FONT COLOR="Navy">어서오세요! 환영합니다~ </FONT></P>
<P><FONT COLOR="Navy">이 페이지에는??? </FONT></P>
<P><FONT COLOR="Navy">Style Sheet를 공부하는 곳이예요.</FONT></P> ]]> |
★ Style Sheet를 이용해 별도의 스타일을 지정하면 웹 페이지의 BODY 부분에는 다음과 같이 본문 내용만 넣을 수 있습니다.
<![CDATA[<P> 어서오세요! 환영합니다~ </P>
<P> 이 페이지에는???</P>
<P>Style Sheet를 공부하는 곳이예요.</P> ]]> |
|
|
| HTML과 CSS의 뚜렷한 차이점 |
 |
HTML
|
CSS
|
| 폰트 크기 |
가장 큰 값이 7
|
수치에 따라 마음대로 조절
|
| 자간 / 행간 |
크기조절이 불가능하다
|
배치가 자유로워 가독성을 높일 수 있다.
|
| 링크 |
밑줄의 변형이 불가능하다.
|
밑줄의 변형이 자유롭다.
|
| 페이지의 여백 |
적용에 한계가 있다.
|
원하는 만큼 페이지의 여백을 만들 수 있다.
|
|
