기사의 내용

이 기사에서는 CSS의 기본원리 에 대해서 다룹니다.

커스케이드

스타일에 대해서 설명하기 전에、「커스케이딩」이란 개념에 대해서 설명하겠습니다.

커스케이딩이란 특정 요소의 프로파티를 복수로 선언했을때 ,선언의 우선순위의 관계가 정해져 있으므로 그중에 한가지만 유효화 된다는 구조입니다.

예를들어 아래의 소스와 같이 body요소에「color:blue」라는 스타일을 적용하면, 그 문장은 문서 전체를 파랗게 만듭니다.

<!-- 직접 코딩해 보시면서 확인해 보시길 바랍니다-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body style="color:blue">
   <h1>
   	타이틀
   	<p>
   		이것은 <b>"문장"</b> 입니다.
   	</p>
   </h1>
  </body>
</html>

그문장내의 자식 요소인 <p>에「font-style:italic」라는 스타일을 적용하면, 그 아래에 있는 문자도 이탤릭 체가 됩니다.

<!-- 직접 코딩해 보시면서 확인해 보시길 바랍니다-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body style="color:blue">
   <h1>
   	타이틀
   	<p style="font-style:italic">
   		이것은<b>"문장"</b>입니다.
   	</p>
   </h1>
  </body>
</html>

즉 스타일은 그 스타일을 적용한 요소에 한정되는게 아니라 (위 소스의 경우에는 <body>color스타일을 적용 했더니 <h1><p>에 적용 안되는게 아니라) , 자식요소 전체에 적용된다는 것입니다. (자식 요소인 <h1>과<p>도 말려들어 적용된다는 것입니다.)

따라서「문서 전체의 디자인을 일괄적으로 지정할 뿐만 아니라, 필요한 곳에만 개별적으로 스타일을 적용하는게 가능하다」하다는 것입니다.

인라인 스타일

위에서는 CSS의 기본적인 원리를 알아봤습니다. 그렇다면 스타일 지정을 위해서는 어떻게 해야하는지를 확인해 보도록 합시다.

가장 간단한 방법은 전에 했던 html강좌의 스타일을 사용하는 것입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body style="color:blue">
   <h1 style="color:red; ">
   	타이틀
   </h1>
   	<p style="font-style:italic">
   		이것은<b style="color:green; font-size:24px">녹색 텍스트</b>입니다.
   	</p>
   	<p>
   		텍스트의 일부에 스타일을 적용하고 싶은 경우<span style="color:black; font-style:italic">span요소</span>를 사용합니다.
   	</p>
  </body>
</html>

위와같이 지정하면 아래와 같은 페이지가 나옵니다.

완성소스

단 , 이와같은 지정방법은 디자인을 문서내에 집어넣는다는 점에서는 HTML에 따른 지정법과 다르지 않으므로 별로 추천하고 싶은 방법이 아닙니다.

Web개발-처음하는CSS

프로그래밍 강좌 메인