CSS Syntax and Data type

페이지 목차

• CSS 기본 문법
• Property 값에 사용되는 테이터의 종류 및 형태
• 유효하지 못한(Invalid) Property name 이나 값의 처리(Parsing)
• 대소문자의 처리
• Property Table 보는 방법
• Cascading
• Property 값의 상속(Inheritance)

1. CSS 기본 문법

이번 페이지에서는 CSS 에서 사용되는 문법(Syntax)과 테이타 형식(Data type)에 대해서 알아 보도록 하겠습니다. CSS의 기본 문법은 단순히 아래와 같습니다.

Inline style 을 제외한 모든 Style Property 와 Value, Keyword 는 중괄호 ({ }) 속에 들어 갑니다.

1 개의 Property를 사용할 경우 CSS Property와 사용값 사이를 colon(:) 으로 구분합니다.

여러 개의 Property를 사용할 경우 CSS Property와 사용값 사이를 colon(:) 으로 구분하고 다음에 오는 CSS Property와 사용값 사이에는 semi-colon (;) 을 찍어서 구분해 가면서 연속적으로 필요한 만큼 나열해 나갑니다.

• Integer(정수)와 Real number(실수)
  정수는 0 ~ 9 사이의 정수(整數), 실수는 0 ~ 9 사이의 정수 및 부동 소수
  
  
• Length Units(사용 단위)
  사용 단위는 아래 표의 상대 단위와 절대 단위가 사용 됩니다. HTML 에서는 'Percentage(%)' 이외에 Pixel(px) 과 같은 단위를 붙이지 않았지만 CSS 에서는 아래 표의 모든 단위를 붙여서 사용하는 것을 원칙으로 합니다. 특히 Strict DTD 에서는 단위의 생략을 허용하지 않습니다. Transitional DTD 에서는 생략을 허용하며 생략했을 경우에는 모두 Pixel 단위로 간주됩니다. 또한 숫자와 단위를 따옴표 속에 넣으면 안됩니다. 2중 따옴표 단순 따옴표 모두 안되져. 예를 들어...
  
  

  {width : 10px} /* 올바른 표기 */
  {width : "10px"} /* 틀린 표기 */
  {width : '10px'} /* 틀린 표기 */
  

  위와 같습니다.
  

• Keyword
  Keyword 는 일종의 브라우저 예약어로서 숫자와 단위 대신 사용하는 관용적인 단어들이 되겠습니다. 예를 들어 두께를 2px 나 0.5cm 등의 숫자로 표기할 수도 있지만 thin(가는), medium(중간 굵기의), thick(두꺼운) 등의 Keyword로 표현하기도 합니다. Keyword 역시 2중 또는 단순 따옴표로 Quoting(인용) 하면 안됩니다. 예를 들어 아래와 같이...
  

  {border-width : thin} /* 올바른 표기 */
  {border-width : "thin"} /* 틀린 표기 */
  {border-width : 'thin'} /* 틀린 표기 */
  

  이렇게 위와 같습니다.
  



• String(문자열)
  자칫 문자열과 Keyword를 혼동할 소지가 있는데, 문자열과 Keyword 는 다릅니다. Keyword는 브라우저에 미리 정해 놓은 '예약어' 이고, String(문자열)은 사용자가 입력하여 지정하는 임의의 문자들이 되겠습니다. 예를 들어...
  
  border-width:thin 이나, background-color:gold 등은 Keyword 이고,
  
  P.answer:before { content: "The answer is : " } 는 String(문자열)이라는 뜻입니다.



• uri = url + urn
  웹 상에서 문서의 배경 그림이나 순서가 없는 list 앞에 Icon을 넣는 다거나 할 때는 url 이나 uri 를 기입해야 하져. 예를 들어...
  
  body {background-image : url(http://www.webdesigner.co.kr/bgpicture.gif)} 또는
  Li {list-style-image : url("http://www.cadvance.org/icon/simple.gif")}
  
  이렇게 위와 같이 기입합니다. 이 때 url 을 2중 또는 단순 따옴표로 Quoting 해도 되고 안해도 됩니다.



• CSS 에 사용되는 주석(Comment)
  CSS 에서도 역시 주석을 사용합니다. 아래의 표에도 나와 있지만 CSS의 주석은 /* .... */ 입니다. 이 주석문은 한 줄 또는 여러줄을 쓸수도 있으며 Property Block 속에서도 사용이 가능합니다. 예를 들어...

.sample{
color:red;
background-color:#c0c0c0;
width:100%;
border:1px solid #808080;
padding:3px 4px; /* 상하 3px, 우좌 4px 의 테두리와의 이격을 준다. */
}

문서를 작성하다 보면 Error 라는 넘은 언제 어디서나 나타날 가능성이 있져. 오타가 생겨서 그렇게 되는 경우, 사용법을 몰라서 그렇게 되는 경우 등 여러 경우에 Error 의 가능성이 생기게 마련입니다. CSS 의 경우 유효하지 않은 Property 나 값이 입력 되었을 경우 어떻게 처리가 되는지 알아 봅시다.

• CSS 규격에 없는 Property를 사용한 경우
  이 경우에는 Parser 에게 무시(Ignore) 당합니다. 빼 놓고 지나가게 되는 거져. 감히 인간을 무시하다니... 하고 불쾌해 해도 하는 수 없습니다. Parser 란 넘이 만들어 지길 그렇게 만들어 졌으니까요. 예를 들어...
  
  {woodplate : 300px } /* woodplate 라는 Property는 CSS에 없으므로 무시 됩니다. */




• 유효하지 않은 사용값을 입력한 경우
  이 경우도 역시 무시합니다. 예를 들어...
  
  {color : redish} /* redish 는 named color 가 아니므로 무시합니다. */
  {color : #1234} /* #1234 는 Hex 3digit 이나 6digit 이 아니므로 무시합니다. */




• 입력값이 범위를 벗어난 경우
  이 경우에는 범위에 가까운 쪽 값으로 취급합니다. 예를 들어...
  
  {color : rgb(-20, 128, 128)} /* {color : rgb(0, 128, 128)} 과 같습니다. */
  {color : rgb(300, 128, 128)} /* {colro : rgb(255, 128, 128)} 과 같습니다. */
  
  

순수하게 CSS 자체는 대 소문자의 구분이 없습니다. 단, CSS로 DHTML Scripting 할 때는 정확하게 구분해 주어야 합니다. className, CSS의 DHTML Property등이 그렇습니다.

앞으로 나오는 CSS Property 는 아래와 같은 표로 설명하게 됩니다. 각 항목이 무엇을 뜻하며, 어떻게 이해 해야 하는지 살펴 보도록 하져...

Cascading 과 Inherit 는 서로 연관성을 갖고 있습니다. Table의 배경색이 Tr, Td에 상속되지만 Tr이나 Td에 다른 배경색을 지정하면 지정된 색이 배경색이 되는 것과 같이 속성(Attirbute)값이 상속되느냐 않되는냐의 여부에 관한 부분(Table로 보는 Cascading Order, 스타일 사용법 우선순위, Selector 우선순위 참조)과 문서 작성자와 문서를 보는 사용자, 그리고 사용자의 UA의 관계에 대한 Cascading Order가 있습니다. Browser를 열고 도구 메뉴의 인터넷 옵션(O)... 을 선택하면 아래와 같은 대화 상자가 나옵니다.

위의 그림에서 웹 페이지에 지정된 색 무시를 선택하면 작성자가 {color:#333333;}과 같이 글자색을 지정하거나, {background-color:#EFEFEF;} 로 배경색을 지정하더라도 사용자는 기본 글자색 '#000000'과 기본 배경색 '#FFFFFF' 로 문서를 보게 됩니다. 마찬가지로 '웹 페이지에 지정된 글꼴 스타일(font-family) 무시', '웹 페이지에 지정된 글꼴 크기(font-size) 무시' 를 선택하면 글꼴(font-family)과 글꼴 크기(font-size)가 모두 기본값(Default)으로 보이게 됩니다. 그런데 이 기본값(Default)이라는 건 결국 사용자의 UA 의해서 좌우 되기 때문에 작성자, 사용자, User Agent 의 3자의 관점을 고려해 볼 필요가 있는 것이져.

다음은 그림에서의 사용자 스타일 시트를 사용하여 문서에 서식을 적용 부분인데, 이 부분을 실험해 보기 위해서 약간의 준비를 해야 되겠군요. 아래와 같이 user_css.css로 파일 이름을 주고 Source code를 작성하고 저장하시죠...

이 부분을 user_css.css 로 저장했으면 스타일 시트를 사용하여 문서에 서식을 적용을 체크합니다. 체크가 되면 찾아보기 단추가 활성화되는데, 단추를 눌러서 저장해 놓은 user_css.css 파일을 찾아서 지정해 주고 '확인' / '확인' 으로 대화상자를 닫은 다음 브라우저를 보면 user_css.css에 지정된 Property 값들이 적용되어 있는 것을 확인 할 수 있습니다.

링크 글씨는 '#4169e1' 색으로 보이고, 링크에 마우스 커저를 올리면 '#ff9933' 색으로 보이는 등, 지정된 Property 들이 모두 본연의 임무를 다하고 있는 것을 알 수 있겠습니다. 뒤에 나오는 !important 부분에서 다시 한 번 나오게 되므로 지면 관계상 이만 줄이고, 다음은 상속(Inheritance)에 대해 설명하겠습니다.

뒤에 나오는 각 Property 마다 사용값(Value)에 inherit 라는 단어가 번번히 등장하는데 inherit 란 하위 Tag이 상위 Tag의 사용값을 물려 받느냐 아니냐를 나타내는 것 입니다. 이러한 값의 상속은 어떤 CSS Property는 상속되는 것이 있고 안 되는 것이 있는데, 다음의 예제를 보시져.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

<HTML>
    <HEAD>
        <TITLE>상속이라는 건 항상 복잡하군...</TITLE>
    </HEAD>
    <BODY style="font:24px Verdana; color:red;">
    <CENTER>body에서 사용하는 글씨</CENTER><BR><BR>
        <TABLE align="center" border="1" width="50%">
            <TR>
                <TD>R1 C1</TD>
                <TD>R1 C2</TD>
            </TR>
            <TR>
                <TD>R2 C1</TD>
                <TD>R2 C2</TD>
            </TR>
        </TABLE>
    </BODY>
</HTML>

위의 출력 결과를 보면, Verdana 글꼴과 red 글씨색은 Table에 상속이 되었지만 24px 의 글씨 크기는 Table에 상속되지 않은 것을 볼 수 있습니다. 이와 같이 상속이 되는 Property와 그렇지 않은 Proeprty 들이 있는데, 각 해당 Porperty의 Value 항목에 표시되어 있습니다.

이 상속이라는 물건에 대해 고려해야 하는 사항이 또 하나 있는데, 문서 형식의 정의(DTD : Document Type Definition)에 관한 것입니다. 호환모드(Transitional Mode)에서는 위의 예제와 같이 '24px' 라는 글자크기가 상속되지 않았지만 엄격모드(Strict Mode)에서는 글씨크기도 상속이 됩니다. 위의 예제 code 중에서

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 부분을

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"> 로 수정하고 각자 실험해 보시길...

처음 CSS를 접하는 사람들은 선뜻 이해가 가지 않을 지도 모르겠습니다. 하지만 앞으로 각각의 CSS Property 에 대해 설명하고, 예제를 보면 얼마 가지 않아서 곧 이해가 되리라 믿습니다. 메뉴의 Property 갯수가 많아 보여도 사실 공통적으로 중복되는 부분이 많기 때문에 실제적으로는 몇 가지 되지 않습니다. 앞 페이지에서도 언급했지만 HTML... 이거 정말 중요한 물건입니다. 기억하세요...

이 문서의 저작권은 www.cadvance.org 에 있습니다.