CSS Value Type

From. CSS 비밀메뉴얼

모든 CSS 프로퍼티는 그에 대응하는 값이 있다. 글자 색상 형식을 정의하는 Color 프로퍼티에는 어떤 색상을 사용할 것인지를 지정하기 위한 색상 값이 들어가야 한다. 프로퍼티를 color:#FFF;와 같이 값을 주어 작성하면 텍스트가 희색이 된다. 프로퍼티의 종류에 따라 각각 다른 유형의 값을 사용해야 하지만, 다음 네 가지 기본 카테고리로 분류할 수 있다. 색상, 길이/크기, 키워드, URL..


색상

Font, background, border 등 여러가지 프로퍼티에 색상을 선언할 수 있다. CSS에는 색상을 지정하는 몇 가지 방법이 있다.

Keywords

색상 키워드는 말 그대로 White나 black 같은 색상명이다. 현재 17개의 색상 키워드가 인식된다. Aqua, black, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow. 일부 브라우저에서는 키워드를 몇 개 더 사용할 수 있으며, CSS 3에서는 나중에 좀더 많은 색상을 인식할 수 있을 것이다. (http://www.w3.org/TR/css3-color/).

RGB 값

컴퓨터 모니터는 빨강, 녹색, 파랑 (Red,. Green, Blue)을 섞어서 색상을 표현한다. 이러한 RGB 값을 이용하면 거의 모든 범위의 색상을 표현할 수 있다. 거의 대부분의 디자인, 일러스트레이션, 그래픽 프로그램에서 RGB 값을 사용하여 색상을 지정할 수 있으므로, 원하는 프로그램에서 CSS 프로퍼티에 쓰일 색상 RGB 값을 손쉽게 변환할 수 있다. CSS는 몇가지 방법으로 RGB값을 표현한다.

* 16진수(Hex) 값. 이 방식이 웹 상에서 색상을 식별하는 데 가장 흔히 이용되는데, 16진수 색상 값들을 16진법 체계의 두자리 숫자 3개로 이루어진다.(즉, 기수16). #FF0033은 빨강(FF, 10진수에서의 255와 동일), 녹색(00), 파랑(33)이 조합된 RGB 값을 나타낸다. 샵 기호(#)는 CSS에서 16진수 임을 앞서 알려주며, 이 기호는 반드시 넣어야 한다. 만일 #을 기입하지 않으면, 웹브라우저는 정확한 색상을 표현하지 못한다.

※ Tip ※
만약 두자리 숫자 값이 3개 모두가 반복 숫자일 경우에는, 그 16진수 값을 두자리 중 한자리씩만 이용해서 줄여 쓸 수 있다. 예를 들어 #361은 #336611과 동일한 의미이다.

* RGB 백분율, 다음과 같이 백분율 값으로 색상을 지정해도 된다. Rgb(100%,0%, 33%). 백분율 수치는 백분율 값으로 색상을 정의할 수 있는 이미지 편집/디자인 프로그램에서 알아낼 수 있다. (대부분의 프로그램이 지원함).

*10진수 값. 끝으로 10진수 RGB 값을 이용하여 색상을 지정할 수 있다. 형식은 백분율값과 비슷하지만, 각각의 색상을 나타내는 데 0~255의 숫자를 사용할 수 있다. Rgb(255,0,33)

어떤 방식을 사용하든 상관 없다. 일관되게 작업하려면 , 한가지 RGB값 지정 방식을 정해서 계속 그 방법으로 사용해야 한다. 윈도우와 매킨토시 운영체제 둘 다 색상 채집기(Color Picker:컬러 픽커)가 있어서, 수백 만 개의 팔레트에서 정확한 색상으로 고를 수 있으며, 선택한 색상을 RGB값으로도 볼 수 있다.


길이와 크기

CSS에는 활자, 박스 너비, 테두리선 두께 등을 측정하는 여러가지 방법이 있다. 인치, 파이카(pica), 포인트, 센티미터, 밀리미터, em-높이, ex-높이, 픽셀, 백분율을 이용하여 활자 크기를 나타낼 수 있다. 그러나 그 많은 옵션이 있음에도 불구하고 여러 이유로 대부분의 단위는 화면 표시 장치에 적합하지 않다. 실제로 많이 사용하고 알아둬야 할 것은 픽셀, em, 백분율 세가지 이다.

픽셀

픽셀은 컴퓨터 화면 상의 한 개의 점이다. 픽셀을 이용하면 컴퓨터마다 일관된 방식으로 길이와 글자 크기를 인식한다. 한 모니터에서의 72px은 다른 모니터에서도 72px로 보인다. 그렇다고 그것이 모든 사람에게 동일하게 보여지는 현실의 실무적인 길이를 뜻하는 것은 아니다. 사람들은 자신의 모니터를 작자 다른 해상도로 설정하여 사용하기 때문에(800*600, 1024*768, 1600*1200 등), 72px이 어떤 모니터에서는 1인치로 보이고 다른 모니터에서는 0.5인치로 보일 수도 있다. 그래도 역시 픽셀이 가장 일관적으로 화면을 제어할 수 있다.

★ Note ★
픽셀을 이용할 때 한 가지 장애가 있다. 인터넷 익스플로러6과 이전 버전을 이용하는 방문자들의 경우 픽셀로 크기가 지정된 글자는 크기 조정이 되지 않는다. 어떤 방문자가 텍스트를 읽는데 너무 작아 불편하더라도 읽기 쉽게 텍스트를 키우지 못한다.

em

인쇈 업계에서 나온 em은 특정 서체 대문자 M의 높이를 나타내는 단위이다. 웹페이지에서 1em은 웹브라우저의 기본 텍스트 크기(대체로 16px인)에 대한 높이이다. 그러나 사용자기 기본 글자크기 설정을 바꿀 수도 있으므로, 사용자에 따라 1드이 16px로 보이기도 하고, 다른 브라우저를 이용하는 사람에게는 24px로 보이기도 한다. 즉, em의 크기 단위는 상대적이다.

브라우저의 기본 글자크기 설정 이외에도, em은 자신이 포함된 태그에서 크기 정보를 상속받을 수 있다. 글자 크기가 0.9em이면 16px이 기본 크기인 대부분의 브라우저에서는 텍스트가 약 14px 정도로 표현된다. 하지만 만일 글자 크기가 0.9em으로 지정된<p> 태그가 있으면 그 <p> 태그 안에 다시 글자 크기가 0.9em으로 지정된 <strong>태그가 들어있다면, <strong>태그의 em 크기는 14px이 아니라 12px(16 * 0.9 * 0.9)이 된다. 그러므로 em 값을 이용할 경우에는 항상 상속을 염두에 두어야 한다.

백분율

CSS에서 백분율은 텍스트 크기 지정, 엘리먼트의 폭/높이 지정, 스타일의 배경에 들어갈 이미지의 위치 지정 등, 다양한 용도로 이용된다. 하지만 몇 퍼센트를 지정할 지는 프로퍼티에 따라 달라진다. 글자 크기에 쓰이는 백분율은 텍스트의 상속된 값을 기준으로 산출된다. 단락의 전체적인 글자 크기가 16px이라고 하자. 만약 하나의 특정 단락에 대한 스타일을 작성하고 그 스타일에 글자 크기를 200%로 지정하면, 텍스트는 32px로 보여진다. 그러나 백분율 값을 폭에 지정할 경우, 백분율은 페이지나 폭이 지정된 부모 엘리먼트의 폭을 기준으로 산출된다. 백분율 값을 지정하려며너 숫자를 적고 뒤에 퍼센트 기호를 붙이면 된다. 100%.

키워드

색상이나 크기 대신에, 많은 프로퍼티에는 어떻게 보여질지에 영향을 주는 각 프로퍼티 고유의 특정한 값들이 있으며 키워드로 표시된다. 화면 상에 텍스트를 정렬시키는 text-align 프로퍼티에는 네 개의 키워드를 사용할 수 있다. right, left, center, justify. 키워드는 프로퍼테에 따라 달라지므로, 각 프로퍼티에 사용할 수 있는 키워드에 대해 알아보려면 프로퍼티 설명을 읽어보자.

그러나 전체 프로퍼티에서 사용할 수 있는 키워드가 하나 있는데, 그것은 inherit라는 키워드이다. 이 키워드를 사용하면 어떤 스타일이 부모 엘리먼트로부터 어떤 엘리먼트를 강제로 상속받도록 할 수 있다. 아무 프로퍼티에나 inherit 키워드를 사용할 수 있다. 이 키워드를 이용하면 원래는 부모 태그로부터 상속되지 않는 프로퍼티도 상속되게 할 수 있다. 예를 들어, 단락(<p>)에 text-decoration 프로퍼티 값을 underline으로 지정했다고 치자. <p>태그에 포함된 <em>과 <strong>등의 다른 태그들은 원래 이값을 상속받지 않지만, inherit 키워드를 사용하면 강제로 상속받도록 할 수 있다.
em, strong { text-decoration: inherit;}

그렇게 하면, <em>과 <strong>태그는 부모 태그인 <p>와 동일한 text-decoration값을 갖게 되어 밑줄을 표시하게 된다. 따라서 단락이 있는 <em>, <strong>엘리먼트 각각에도 전체 단라과 마찬가지로 밑줄이 들어가므로, 결국 강조된 텍스트 밑에 이중 밑줄이 그어지게 된다. 프로퍼티가 원래는 상속되지 않는 이유도 바로 그 점 때문이다. 만약 <p>태그의 text-decoration값을 underline이 아닌 overline으로 바꾸면, <em>과 <strong>태그도 그 값을 상속 받아서 역시 윗줄이 생긴다.

URL

URL 값은 웹 상의 다른 파일을 가리키는 데 사용한다. 예를 들어, background-image 프로퍼티 URL(웹 상의 파일 경로)을 값으로 넣어주면, 그림 파일을 페이지 엘리먼트의 배경에 넣을 수 있다. 이렇게 URL을 넣어주면, 페이지 배경에 타일화 된 반복 이미지를 넣거나 블릿 목록에 자체 제작한 그림을 이용하기 편리해진다.
CSS에서 URL을 지정하는 방법은 다음과 같다. url (images/tile.gif). 페이지 배경에 이미지 tile.gif를 넣는 스타일은 다음과 같다.

body { background-image: url(images/tile.gif); }

HTML과 달리, CSS에서는 URL을 따옴표로 감싸는 것은 필수가 아니므로 url(“images/tile.gif”), url(‘images/tile.gif’), url(images/tile.gif)로 표기해도 모두 동일하다.