W3C14 »ö»ó°ú ¹è°æTrio ȨÆäÀÌÁö 

¸ñÂ÷

CSS ¼Ó¼ºµéÀº Á¦ÀÛÀÚµéÀÌ ±ÛÀÚ»ö»ó(foreground color)°ú ¿¤·¹¸àÆ®ÀÇ ¹è°æÀ» ÁöÁ¤ÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù. ¹è°æµéÀº »ö»ó ¶Ç´Â À̹ÌÁö(image)µéÀÌ µÉ ¼ö ÀÖ´Ù. ¹è°æ ¼Ó¼ºµéÀº Á¦ÀÛÀÚµéÀÌ ¹è°æ À̹ÌÁö¸¦ À§Ä¡½ÃÅ°°í, ¹Ýº¹µÇ°Ô ÇÏ°í, ºäÆ÷ÀÎÆ®(viewport)¿¡ ´ëÇÏ¿© °íÁ¤½Ãų °ÍÀΰ¡¸¦ ¼±¾ðÇϰųª, ¹®¼­¸¦ µû¶ó È­¸é±¼¸²(scroll)À» ÇÒ °ÍÀΰ¡¸¦ ÁöÁ¤ÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù.

»ö»ó °ªµéÀÇ À¯È¿ÇÑ ¹®¹ýÀº »ö»ó ´ÜÀ§¿Í ¹ø¿ª¹® HTML 4 »ö»ó¸¦ ÂüÁ¶Ç϶ó.

14.1 ±ÛÀÚ»ö»ó(foreground color): 'color' ¼Ó¼º

'color'
°ª:  <»ö»ó> | inherit
ÃÖÃÊ°ª:  »ç¿ëµµ±¸¿¡ µû¶ó ´Ù¸§
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  µÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ¿¤·¹¸àÆ®ÀÇ ÅؽºÆ® ³»¿ëÀÇ ±ÛÀÚ»ö»ó(foreground color)À» ÁöÁ¤ÇÑ´Ù. Àû»öÀ» Ç¥ÇöÇϴµ¥ ´Ù¸¥ ¹æ¹ýµéÀÌ ÀÖ´Ù:

¿¹Á¦:

EM { color: red }  /* »çÀü Á¤ÀÇµÈ »ö»ó¸í(color name) */
EM { color: rgb(255,0,0) } /* RGB »ö»ó 0-255 */

14.2 ¹è°æ

Á¦ÀÛÀÚµéÀº ¿¤·¹¸àÆ®ÀÇ ¹è°æ(±× Ç¥Çö ¸é)À» »ö»ó ¶Ç´Â À̹ÌÁö(image)·Î ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù. ¹Ú½º ¸ðµ¨ ¾È¿¡¼­ ¿ë¾î "background"´Â ³»¿ë(content)°ú Æеù(padding) Áö¿ªÀÇ ¹è°æÀ» ¸»ÇÑ´Ù. Å׵θ®(border) »ö»óµé°ú ½ºÅ¸ÀϵéÀº Å׵θ® ¼Ó¼ºÀ¸·Î ¼³Á¤ÇÑ´Ù. ¸¶Áø(margin)µéÀº Ç×»ó Åõ¸íÇÏ¿© ¸ðü ¹Ú½ºÀÇ ¹è°æÀÌ Ç×»ó ÅëÇØ º¸ÀδÙ.

¹è°æ ¼Ó¼ºµéÀº Àü´Þ(inherit)µÇÁö ¾ÊÀ¸³ª, ±× ¸ðü ¹Ú½ºÀÇ ¹è°æÀº, 'background-color'ÀÇ ÃÖÃÊ Åõ¸í('transparent') °ª ¶§¹®¿¡, µðÆúÆ®·Î ºñÃĺ¸ÀδÙ.

ÃÖ»óÀ§(root) ¿¤·¹¸àÆ®¿¡ ÀÇÇÏ¿© »ý¼ºµÈ ¹Ú½ºÀÇ ¹è°æÀº Àüü â(canvas)¿¡ Àû¿ëµÈ´Ù.

±×·¯³ª, HTML ¹®¼­µé¿¡¼­, Á¦ÀÛÀÚµéÀÌ HTML ¿¤·¹¸àÆ®¿¡ ÁöÁ¤ÇÏ´Â °Íº¸´Ù´Â BODY ¿¤·¹¸àÆ®¿¡ ¹è°æÀ» ÁöÁ¤ÇÒ °ÍÀ» ÃßõÇÑ´Ù. »ç¿ëµµ±¸µéÀº ¹è°æ¿¡ ä¿ì´Âµ¥ À־ ´ÙÀ½ ¿ì¼±¼øÀ§ÀÇ ±ÔÄ¢À» ÁؼöÇÏ¿©¾ß ÇÑ´Ù: ¸¸ÀÏ HTML ¿¤·¹¸àÆ®ÀÇ 'background' ¼Ó¼º°ªÀÌ Åõ¸í('transparent') ÀÌ¿ÜÀÇ °ÍÀÌ¸é ±×°ÍÀ» »ç¿ëÇÏ°í, ¾Æ´Ï¸é BODY ¿¤·¹¸àÆ®ÀÇ ¹è°æ('background') ¼Ó¼º°ªÀ» »ç¿ëÇÑ´Ù. ¸¸ÀÏ °á°ú °ªÀÌ 'transparent'À̸é, ±× Ç¥ÇöÀº Á¤ÀǵÇÁö ¾Ê¾Ò´Ù.

ÀÌµé ±ÔÄ¢¿¡ µû¶ó, ´ÙÀ½ HTML ¹®¼­¿¡ ÀÇÇÑ Ã¢(canvas)Àº ´ë¸®¼®("marble") ¹è°æÀ» °®´Â´Ù:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>âÀÇ ¹è°æ ¼³Á¤</TITLE>
      <STYLE type="text/css">
         BODY { background: url("http://style.com/marble.png") }
      </STYLE>
   </HEAD>
   <BODY>
      <P>ÀÌ ¹è°æÀº ´ë¸®¼®(marble)ÀÌ´Ù.
   </BODY>
</HTML>

14.2.1 ¹è°æ ¼Ó¼º :
'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', 'background'

'background-color'
°ª:  <»ö»ó> | transparent | inherit
ÃÖÃÊ°ª:  transparent(Åõ¸í)
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº <»ö»ó> °ª ¶Ç´Â Å°¿öµå(keyword) 'transparent'·Î ¿¤·¹¸àÆ®¿¡ ¹Ù´Ú¿¡¼­ ºñÃĺ¸ÀÌ´Â ¹è°æ»öÀ» ¼³Á¤ÇÑ´Ù.

¿¹Á¦:

H1 { background-color: #F00 }
'background-image'
°ª:  <uri> | none | inherit
ÃÖÃÊ°ª:  none
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº ¿¤·¹¸àÆ®ÀÇ ¹è°æ À̹ÌÁö¸¦ ÁöÁ¤ÇÑ´Ù. ¹è°æ À̹ÌÁö°¡ ¼³Á¤µÇ¸é, Á¦ÀÛÀÚµéÀº ±× À̹ÌÁö°¡ ¾øÀ» °æ¿ì¸¦ ´ëºñÇÏ¿© ¹è°æ»öµµ ÁöÁ¤ÇÏ¿©¾ß ÇÑ´Ù. À̹ÌÁö(image)°¡ ¾øÀ¸¸é, ÀÌ°ÍÀÌ ¹è°æ»öÀÇ ¸ÇÀ§¿¡ Ç¥ÇöµÈ´Ù. µû¶ó¼­, ±× »ö»óÀÌ À̹ÌÁöÀÇ Åõ¸íÇÑ ºÎºÐÀ» ÅëÇÏ¿© º¸ÀδÙ.

ÀÌ ¼Ó¼º°ªµéÀº À̹ÌÁö¸¦ ÁöÁ¤ÇÏ´Â <uri>À̰ųª, ¶Ç´Â À̹ÌÁö°¡ »ç¿ëµÇÁö ¾ÊÀ¸¸é 'none'À¸·Î µÈ´Ù.

¿¹Á¦:

BODY { background-image: url("marble.gif") }
P { background-image: none }
'background-repeat'
°ª:  repeat | repeat-x | repeat-y | no-repeat | inherit
ÃÖÃÊ°ª:  repeat
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

¹è°æ À̹ÌÁö°¡ ÁöÁ¤µÇ¸é, ÀÌ ¼Ó¼ºÀº À̹ÌÁö°¡ ¹Ýº¹µÉ °ÍÀΰ¡, ¹Ýº¹µÇ¸é ¾î¶»°Ô ¹Ýº¹µÉ °ÍÀΰ¡¸¦ ÁöÁ¤ÇÑ´Ù. ¸ðµç ¹Ýº¹Àº ¹Ú½ºÀÇ ³»¿ë(content)°ú Æеù(padding)¸¦ Æ÷ÇÔÇÏ¿© ÀÌ·ç¾î Áø´Ù. °ªµéÀº ´ÙÀ½ÀÇ Àǹ̸¦ °®´Â´Ù:

repeat(¹Ýº¹)
À̹ÌÁö´Â ¼öÆò°ú ¼öÁ÷ÀûÀ¸·Î ¹Ýº¹µÈ´Ù.
repeat-x(¼öÆò ¹Ýº¹)
À̹ÌÁö´Â ¼öÆòÀûÀ¸·Î ¸¸ ¹Ýº¹µÈ´Ù.
repeat-y(¼öÁ÷ ¹Ýº¹)
À̹ÌÁö´Â ¼öÁ÷ÀûÀ¸·Î ¸¸ ¹Ýº¹µÈ´Ù.
no-repeat(¹Ýº¹ ¾øÀ½)
À̹ÌÁö´Â ¹Ýº¹ÇÏÁö ¾Ê°í ÇÑ°³ÀÇ À̹ÌÁö ¸¸ ³ªÅ¸³­´Ù.

¿¹Á¦:

BODY {
   background: white url("pendant.gif");
   background-repeat: repeat-y;
   background-position: center;
}
Æеù(padding)°ú ³»¿ë Áö¿ª(content area)¿¡ »óÇÏ·Î ¹Ýº¹µÈ Á᫐ ÀâÈù ¹è°æ À̹ÌÁö.   [D]

ÇÑ ¹è°æ À̹ÌÁö°¡ Á߽ɿ¡ À§Ä¡ÇÏ°í, ´Ù¸¥ À̹ÌÁöµéÀÌ ±× ¿¤·¹¸àÆ® µÚ¿¡ ¼öÁ÷ÀûÀÎ ¶ì¸¦ ¸¸µé¸ç ¾Æ·¡, À§·Î ¹Ýº¹µÇ¾ú´Ù.

'background-attachment'
°ª:  scroll | fixed | inherit
ÃÖÃÊ°ª:  scroll
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

¹è°æ À̹ÌÁö°¡ ÁöÁ¤µÇ¸é, ÀÌ ¼Ó¼ºÀº ºäÆ÷ÀÎÆ®(viewport)¿¡ ´ëÇÏ¿© °íÁ¤µÉ('fixed') °ÍÀΰ¡ ¶Ç´Â ±× ¹®¼­¿¡ µû¶ó È­¸é±¼¸²('scroll')À» ÇÒ °ÍÀΰ¡¸¦ ÁöÁ¤ÇÑ´Ù.

À̹ÌÁö°¡ °íÁ¤µÇ¾ú´Ù ÇÏ´õ¶óµµ, ¿©ÀüÈ÷ ¿¤·¹¸àÆ®ÀÇ ¹è°æ ¶Ç´Â Æеù(padding) Áö¿ª¿¡ ÀÖÀ» ¶§ ¸¸ º¸ÀÌ°Ô µÈ´Ù. µû¶ó¼­, À̹ÌÁö°¡ ¹Ýº¹('background-repeat: repeat')µÇÁö ¾Ê´Â ÇÑ º¸ÀÌÁö ¾ÊÀ» ¼ö ÀÖ´Ù.

¿¹Á¦:

ÀÌ ¿¹Á¦´Â ¿¤·¹¸àÆ®°¡ ±¼·Á(scroll) Áú ¶§ ºäÆ÷ÀÎÆ®¿¡ Ç×»ó ³ªÅ¸³ª´Â ¹«ÇÑÁ¤ ¼öÁ÷Àû ¶ì¸¦ »ý¼ºÇÑ´Ù.

BODY {
   background: red url("pendant.gif");
   background-repeat: repeat-y;
   background-attachment: fixed;
}

»ç¿ëµµ±¸µéÀº 'fixed'¸¦ 'scroll'·Î ó¸®ÇÒ ¼ö ÀÖ´Ù. ±×·¯³ª, Á¦ÀÛÀÚ°¡ 'fixed' ¸¸À» Áö¿øÇÏ´Â ºê¶ó¿ìÀúµé ¸¸À» À§ÇÏ¿© À̹ÌÁö¸¦ Á¦°øÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀÌ ¾øÀ¸¹Ç·Î, ÃÖ¼ÒÇÑ HTML°ú BODY ¿¤·¹¸àÆ®µé¿¡¼­ 'fixed'¸¦ ¿Ã¹Ù¸£°Ô ó¸®ÇÒ °ÍÀ» ÃßõÇÑ´Ù. ¼¼ºÎ»çÇ×Àº ºÎÇÕ¼ºÀ» ÂüÁ¶Ç϶ó.

'background-position'
°ª:  [ [<¹éºÐÀ²> | <±æÀÌ> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
ÃÖÃÊ°ª:  0% 0%
Àû¿ë:  ºí·°·¹º§(block-level)°ú ´ëüµÈ ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  ±× ¹Ú½º ÀÚüÀÇ Å©±â¸¦ ÂüÁ¶
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

¹è°æ À̹ÌÁö°¡ ÁöÁ¤µÇ¾úÀ¸¸é, ÀÌ ¼Ó¼ºÀº ±× ÃÖÃÊ À§Ä¡¸¦ ÁöÁ¤ÇÑ´Ù. °ªµéÀº ´ÙÀ½ÀÇ Àǹ̸¦ °®´Â´Ù:

<¹éºÐÀ²> <¹éºÐÀ²>
°ªÀÇ Â¦ '0% 0%'´Â À̹ÌÁöÀÇ ¸ÇÀ§ ¿ÞÂÊ ¸ð¼­¸®°¡ ¹Ú½ºÀÇ Æеù ¸ð¼­¸®ÀÇ ¸ÇÀ§ ¿ÞÂÊ ¸ð¼­¸®¿¡ Á¤·ÄµÈ´Ù.
°ªÀÇ Â¦ '100% 100%'´Â À̹ÌÁöÀÇ ¸Ç¾Æ·¡ ¿À¸¥ÂÊ ¸ð¼­¸®°¡ Æеù Áö¿ªÀÇ ¸Ç¾Æ·¡ ¿À¸¥ÂÊ ¸ð¼­¸®¿¡ À§Ä¡ÇÑ´Ù.
°ªÀÇ Â¦ '14% 84%'´Â À̹ÌÁöÀÇ °¡·Î ¿À¸¥ÂÊÀ¸·Î 14%¿Í ¼öÁ÷Àû ¾Æ·¡·Î 84% ÀÇ Á¡ÀÌ Æеù Áö¿ªÀÇ °¡·Î ¿À¸¥ÂÊÀ¸·Î 14%¿Í ¼öÁ÷Àû ¾Æ·¡·Î 84% ÀÇ Á¡¿¡ À§Ä¡ÇÑ´Ù.
<±æÀÌ> <±æÀÌ>
°ªÀÇ Â¦ '2cm 2cm'´Â À̹ÌÁöÀÇ ¸ÇÀ§ ¿ÞÂÊ ¸ð¼­¸®°¡ Æеù(padding) Áö¿ªÀÇ ¸ÇÀ§ ¿ÞÂÊ ¸ð¼­¸®¿¡¼­ ¿À¸¥ÂÊ 2cm ¾Æ·¡ÂÊÀ¸·Î 2cm Á¡¿¡ À§Ä¡ÇÑ´Ù.
top left¿Í left top(¸ÇÀ§ ¿ÞÂÊ)
'0% 0%'¿Í °°À½.
top, top center¿Í center top(¸ÇÀ§ Áß¾Ó)
'50% 0%'¿Í °°À½.
right top¿Í top right(¸ÇÀ§ ¿À¸¥ÂÊ)
'100% 0%'¿Í °°À½.
left, left center¿Í center left(¿ÞÂÊ Áß¾Ó)
'0% 50%'¿Í °°À½.
center¿Í center center(Áß¾Ó Áß¾Ó)
'50% 50%'¿Í °°À½.
right, right center¿Í center right(¿À¸¥ÂÊ Áß¾Ó)
'100% 50%'¿Í °°À½.
bottom left¿Í left bottom(¹Ù´Ú ¿ÞÂÊ)
'0% 100%'¿Í °°À½.
bottom, bottom center¿Í center bottom(¹Ù´Ú Áß¾Ó)
'50% 100%'¿Í °°À½.
bottom right¿Í right bottom(¹Ù´Ú ¿À¸¥ÂÊ)
'100% 100%'¿Í °°À½.

ÇϳªÀÇ ¹éºÐÀ² ¶Ç´Â ±æÀÌ °ª ¸¸ ÁÖ¾îÁø °æ¿ì, ÀÌ´Â ¼öÆò À§Ä¡ ¸¸À» ÁöÁ¤ÇÏ°í, ¼öÁ÷ À§Ä¡´Â 50%°¡ µÈ´Ù. µÎ °ªµéÀÌ ÁÖ¾îÁö¸é, ¼öÆò À§Ä¡°¡ ¸ÕÀú¿Â´Ù. ±æÀÌ¿Í ¹éºÐÀ² °ªµéÀÇ Á¶ÇÕÀº Çã¿ëµÈ´Ù(¿¹: '50% 2cm'). À½¼ö À§Ä¡µµ Çã¿ëµÈ´Ù. ¸ðµç °¡´ÉÇÑ Á¶ÇÕµéÀº À§¿¡ ¼³¸í µÇ¾úÀ¸¸ç, Å°¿öµå(keyword)µéÀº ¹éºÐÀ² °ªµé ¶Ç´Â ±æÀÌ °ªµé°ú Á¶ÇÕµÉ ¼ö ¾ø´Ù.

¿¹Á¦:

BODY { background: url("banner.jpeg") right top }  /* 100%   0% */
BODY { background: url("banner.jpeg")  top center }  /*  50%   0% */
BODY { background: url("banner.jpeg")  center }   /*  50%  50% */
BODY { background: url("banner.jpeg")  bottom }   /*  50% 100% */

¸¸ÀÏ ¹è°æ À̹ÌÁö°¡ ºäÆ÷ÀÎÆ®(viewport) ¾È¿¡¼­ °íÁ¤(fixed)µÇ¾úÀ¸¸é('background-attachment' ¼Ó¼º ÂüÁ¶), À̹ÌÁö´Â, ±× ¿¤·¹¸àÆ®ÀÇ Æеù Áö¿ª ´ë½Å, ºäÆ÷ÀÎÆ®¿¡ »ó´ëÀûÀ¸·Î À§Ä¡µÈ´Ù. ¿¹¸¦ µé¸é,

¿¹Á¦:

BODY {
   background-image: url("logo.png");
   background-attachment: fixed;
   background-position: 100% 100%;
   background-repeat: no-repeat;
}

À§ ¿¹Á¦¿¡¼­, ÇÑ°³ÀÇ À̹ÌÁö°¡ ºäÆ÷ÀÎÆ®(viewport)ÀÇ ¹Ù´Ú ¿À¸¥ÂÊ ¸ð¼­¸®¿¡ ³ªÅ¸³­´Ù.

'background'
°ª:  [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
ÃÖÃÊ°ª:  ¾à½Ä¼Ó¼ºµé¿¡ Á¤ÀǵÇÁö ¾ÊÀ½
Àû¿ë:  ¸ðµç ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  'background-position'¿¡ Çã¿ë
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

'background' ¼Ó¼ºÀº ¾à½Ä¼Ó¼ºÀ¸·Î °³º° ¹è°æ ¼Ó¼ºµé('background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position')À» ÇÑ ½ºÅ¸ÀϽ¬Æ®¿¡¼­ ¼³Á¤ÇÑ´Ù.

'background' ¼Ó¼ºÀº ¸Ç ¸ÕÀú ¸ðµç ¹è°æ ¼Ó¼ºµéÀÌ ±×µéÀÇ ÃÖÃÊ°ªµé·Î ¼³Á¤µÇ°í, ±× ÈÄ ¼±¾ð¿¡¼­ ¸í½ÃÀû °ªµéÀÌ ÁÖ¾îÁø´Ù.

¿¹Á¦:

´ÙÀ½ ¿¹Á¦ ù¹ø° ¸í·É¿¡¼­, 'background-color'¿¡ ÇÑ °ªÀÌ ÁÖ¾îÁ³°í ´Ù¸¥ °³º° ¼Ó¼ºµéÀº ÃÖÃÊ°ªÀ¸·Î ¼³Á¤µÈ´Ù. µÎ¹ø° ¸í·É¿¡¼­, ¸ðµç °³º° ¼Ó¼ºµéÀÌ ÁöÁ¤µÇ¾ú´Ù.

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 °¨¸¶(gamma) º¸Á¤

°¨¸¶ ¹®Á¦¿¡ ´ëÇÑ Á¤º¸¸¦ À§ÇÏ¿©, PNG ±Ô°Ý ([PNG10])ÀÇ °¨¸¶ ¼³¸í¼­¸¦ ÂüÁ¶Ç϶ó.

°¨¸¶ º¸Á¤ÀÇ °è»ê¿¡¼­, ¸ð´ÏÅÍ(CRT)¿¡ µð½ºÇ÷¹ÀÌÇÏ´Â »ç¿ëµµ±¸µéÀº ÀÌ»óÀûÀÎ CRT·Î °¡Á¤ÇÒ ¼ö ÀÖ°í, ¸í¹éÇÑ °¨¸¶ÀÇ Èçµé¸² È¿°ú¸¦ ¹«½ÃÇÒ ¼ö ÀÖ´Ù. ÀÌ´Â ÇöÀçÀÇ Ç÷¡Æ®È¨¿¡¼­ ÇÊ¿äÇÑ ÃÖ¼ÒÀÇ Ã³¸®¸¦ ÀǹÌÇÑ´Ù:

MS-Windows¸¦ »ç¿ëÇÏ´Â PC
¾øÀ½
X11À» »ç¿ëÇÏ´Â Unix
¾øÀ½
QuickDraw¸¦ »ç¿ëÇÏ´Â Mac
gamma 1.45[ICC32] Àû¿ë(ColorSync-savvy Àû¿ëÀº ¿Ã¹Ù¸¥ »ö»ó º¸Á¤À» À§ÇÏ¿© ´Ü¼øÈ÷ sRGB ICC ÇÁ·ÎÈ­ÀÏÀ» ColorSync¿¡ Àü´ÞÇÒ ¼ö ÀÖ´Ù).
X¸¦ »ç¿ëÇÏ´Â SGI
/etc/config/system.glGammaVal·Î ºÎÅÍ gamma °ªÀ» Àû¿ë(µðÆúÆ® °ªÀº 1.70; Irix 6.2 ¶Ç´Â »ó±â »óȲ¿¡¼­ÀÇ Àû¿ëÀº ¿Ã¹Ù¸¥ »ö»ó º¸Á¤À» À§ÇÏ¿© ´Ü¼øÈ÷ sRGB ICC ÇÁ·ÎÈ­ÀÏÀ» ½Ã½ºÅÛ¿¡ Àü´ÞÇÒ ¼ö ÀÖ´Ù).
NeXTStep¸¦ »ç¿ëÇÏ´Â NeXT
gamma 2.22 Àû¿ë

"gamma Àû¿ë"À̶ó ÇÔÀº °¢ R, G, B ¼¼°¡Áö°¡, ¿î¿µÃ¼°è°¡ ó¸®Çϱâ Àü¿¡, R'=Rgamma, G'=Ggamma, B'=Bgamma·Î ȯ»êµÇ¾î¾ß ÇÑ´Ù´Â °ÍÀ» ÀǹÌÇÑ´Ù.

ÀÌ´Â ºê¶ó¿ìÀú¸¶´Ù ÇѹøÀÇ 256-¿¤·¹¸àÆ® Á¶°ßÇ¥¸¦ ¸¸µé¾î ºü¸£°Ô ÀÌ·ç¾î Áú ¼ö ÀÖ´Ù:

for i := 0 to 255 do
    raw := i / 255.0;
    corr := pow (raw, gamma);
    table[i] := trunc (0.5 + corr * 255.0)
end

À̷μ­ »ö»ó ¾ÖÆ®¸®ºäÆ®¸¶´Ù, Çȼ¿¸¶´Ù, °è»êÇØ¾ß ÇÒ Çʿ伺µµ ÇÇÇÒ ¼ö ÀÖ´Ù.


ÆäÀÌÁö ¸ÇÀ§·Î¸ÇÀ§ÀÌ Trio ȨÆäÀÌÁö ¹®¼­()´Â ÀÚÀ¯·ÎÀÌ ¿¬°á »ç¿ëÀÌ °¡´ÉÇÔ.
(¼öÁ¤ÀÏ )