»óÀÚ¼Ó¼º 3



Visibility

visibility :¼Ó¼º°ª

  • ÀÛ¾÷À» ÇÏ´Ùº¸¸é °æ¿ì¿¡ µû¶ó »óÀÚ¸¦ ¼û±â°Å³ª ¾ø´Â °Íó·³ ÀÛ¾÷À» ÇØ¾ß ÇÒ °æ¿ì°¡ ÀÖ½À´Ï´Ù. ±×·² °æ¿ì¿¡ visibility¼Ó¼ºÀ» ÀÌ¿ëÇÕ´Ï´Ù.
  • visibility¼Ó¼ºÀÇ ¼Ó¼º °ªÀ¸·Î´Â visible/hiddenÀÌ ÀÖÀ¸¸ç, ¿ëµµ´Â ¾Æ·¡¿Í °°ÀÌ »ç¿ëµË´Ï´Ù.
    visible ¢Ñ »óÀÚ¸¦ º¸¿©ÁÝ´Ï´Ù.
    hidden ¢Ñ »óÀÚ¸¦ °¨Ãß¾î ÁÖÁö¸¸, »óÀÚÀÇ ¿µ¿ªÀº ±×´ë·Î À¯ÁöµÇ¸é¼­ ¿©¹éÀ¸·Î ³²°Ô µË´Ï´Ù.

  • visibilityÀÇ ¼Ó¼º °ªÀ» ÀûÁö ¾Ê¾ÒÀ» °æ¿ì¿¡´Â Ãʱ⠱⺻ °ªÀÎ visibleÀÌ Àû¿ëµË´Ï´Ù.

hidden Àû¿ë¿¹Á¦
¸Þ¸ðÀå
< html >
< head >
< style type="text/css" >
DIV.hid{font-family:±¼¸²;font-size:30pt;visible:hidden;}
DIV{color:blue;font-family:±¼¸²;font-size:10pt}

< /style >

< /head >
< body >
< DIV class="hid" >
¿øÅ¿¬´Ô < BR >
µ¿ÀüÀÌ µÇ±â¸¦< BR >
< /DIV >
< DIV >
¿ì¸® º¸Àß °Í ¾øÁö¸¸< BR >
µ¿ÀüÀÌ µÇ±â¸¦ ±âµµÇÏÁö< BR >
¸¶ÁÖ º¼ ¼ö´Â ¾ø¾îµµ< BR >
¿µ¿øÈ÷ ÇÔ²²ÇÏ´Â< BR >
µ¿ÀüÀÌ µÇ±â¸¦ ±âµµÇÏÀÚ
< /DIV >
< /body >
< /html >
ºê¶ó¿ìÀú
¿øÅ¿¬´Ô
µ¿ÀüÀÌ µÇ±â¸¦
¿ì¸® º¸Àß °Í ¾øÁö¸¸
µ¿ÀüÀÌ µÇ±â¸¦ ±âµµÇÏÁö
¸¶ÁÖ º¼ ¼ö´Â ¾ø¾îµµ
¿µ¿øÈ÷ ÇÔ²²ÇÏ´Â
µ¿ÀüÀÌ µÇ±â¸¦ ±âµµÇÏÀÚ


¢Ñ À¥ ºê¶ó¿ìÀú¿¡¼­ »ç¶óÁø ºÎºÐ
¼³¸í
  • À¥ ºê¶ó¿ìÀú¸¦ º¸¸é, »ó´Ü ºÎºÐ¿¡ °ø¹éÀÌ »ý±â¸é¼­ º¸ÀÌÁö ¾Ê´Â ºÎºÐÀÌ ÀÖ½À´Ï´Ù.
  • ¼Ó¼º °ªÀ¸·Î hiddenÀÌ Àû¿ëµÈ ¿¹·Î º¸ÀÌÁö´Â ¾ÊÁö¸¸ ¿µ¿ªÀÌ ¿©¹éÀ¸·Î ±×´ë·Î ³²¾Æ ÀÖ½À´Ï´Ù.

z-index

z-index

  • absolute, relative, hidden, visible µîÀ» »ç¿ëÇÏ´Ù º¸¸é º»ÀÇ ¾Æ´Ï°Ô ¹®¼­°¡ º¹ÀâÇØÁö°í »óÀÚ°¡ °ãÃļ­ º¸¿©Áö´Â °æ¿ì°¡ ¹ß»ýÇÒ ¼ö ÀÖ½À´Ï´Ù. ÀÌ·¸°Ô »óÀÚ°¡ °ãÄ¥ °æ¿ì ¾î¶² »óÀÚ¸¦ ¾Õ¿¡ º¸¿©ÁÖ°í, ¾î¶² »óÀÚ¸¦ µÚ¿¡ º¸¿©ÁÙ °ÍÀÎÁö¸¦ °áÁ¤ÇØ¾ß Çϴµ¥, À̶§ z-index¸¦ Ȱ¿ëÇϸé À¯¿ëÇÏ°Ô ¼ø¼­¸¦ Á¤ÇÒ ¼ö ÀÖ½À´Ï´Ù.
  • ÀÌó·³ z-index´Â stacking order¶ó ÇÏ¿© ³»¿ë¹°µéÀÌ ´©ÀûµÇ´Â ¼ø¼­¸¦ °áÁ¤ÇÒ ¶§ »ç¿ëÇϸç, z-indexÀÇ ±âº»°ªÀº 0À¸·Î µÇ¾î ÀÖÀ¸¸ç ¼ýÀÚ°¡ Ŭ¼ö·Ï À§¿¡ ³ªÅ¸³³´Ï´Ù.
  • z-index¸¦ Àû¿ëÇÏÁö ¾Ê¾ÒÀ» °æ¿ì¿¡ »óÀÚ°¡ ±³Â÷ÇÏ°Ô µÈ´Ù¸é, HTMLÄÚµå Áß ³ªÁß¿¡ ÀûÈù °ÍÀÌ À§¿¡ ³ªÅ¸³³´Ï´Ù.
  • ÀÌ z-index°³³äÀº ·¹À̾îÀÇ °³³ä°ú µ¿ÀÏÇÕ´Ï´Ù. "·¹À̾î=»óÀÚ" °³³äÀ¸·Î ÀÌÇØÇÏ½Ã¸é µÇ°Ú½À´Ï´Ù.
  • z-index´Â Ç×»ó absoluteÀÏ °æ¿ì¿¡¸¸ Àû¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ²À~! ±â¾ïÇϼ¼¿ä.

z-index¸¦ Àû¿ëÇÏÁö ¾ÊÀº °æ¿ì
¸Þ¸ðÀå < html >
< head >
< style type="text/css" >
P.one{position:absolute;left:50;top:50;width:200;height:150;color:black;
font-family:±¼¸²;font-size:15;background:yellow;border:solid}

P.two{position:absolute;left:110;top:100;width:200;height:150;color:blue;
font-family:±¼¸²;font-size:15;background:gray;border:solid}

P.three{position:absolute;left:160;top:150;width:200;height:150;color:pink;
font-family:±¼¸²;font-size:15;background:red;border:solid}
< /style >

< /head >
< body >
< P class="one">ONE< /P >
< P class="two" >TWO< /P >
< P class="three">THREE< /P >
< /body >
< /html >
ºê¶ó¿ìÀú
¼³¸í
  • z-index°ªÀÌ Àû¿ëµÇÁö ¾ÊÀº °æ¿ì´Â À§¿Í °°ÀÌ Å±×ÀÇ Àû¿ë¼ø¼­¿¡ µû¶ó ¸Ç ³ªÁß¿¡ ½áÁØ Å±װ¡ °¡Àå ¸Ç À§¿¡ ³ªÅ¸³³´Ï´Ù.

z-index¸¦ Àû¿ëÇÑ °æ¿ì
¸Þ¸ðÀå < html >
< head >
< style type="text/css" >
P.one{position:absolute;left:50;top:50;width:200;height:150;color:black;
font-family:±¼¸²;font-size:17;background:yellow;border:solid;z-index:2;}

P.two{position:absolute;left:110;top:100;width:200;height:150;color:blue;
font-family:±¼¸²;font-size:17;background:gray;border:solid;z-index:1;}

P.three{position:absolute;left:160;top:150;width:200;height:150;color:pink;
font-family:±¼¸²;font-size:17;background:red;border:solid;z-index:0;}
< /style >

< /head >
< body bgcolor=#FFFF66 >
< P class="one">ONE< /P >
< P class="two">TWO< /P >
< P class="three">THREE< /P >
< /body > < /html >
ºê¶ó¿ìÀú
¼³¸í
  • z-index °ª¿¡ µû¶ó¼­ »óÀÚÀÇ À§Ä¡°¡ ´Þ¶óÁ³ÁÒ? z-index °ªÀÇ ¼öÄ¡°¡ ³ôÀ»¼ö·Ï À§ÀÇ ±×¸²Ã³·³ »óÀ§¿¡ ¹èÄ¡ÇÏ°Ô µË´Ï´Ù.


Åõ¸í Å×ÀÌºí ¸¸µé±â

  • Åõ¸íÇÑ Å×À̺íÀº ¾Õ¿¡¼­ ¹è¿î ¹è°æÀ̹ÌÁö »ðÀÔ°ú borderÀÇ shorthand, filterÀÇ alpha ¼Ó¼ºÀÌ Àû¿ëµÇ¾î ¸¸µé¾î Áý´Ï´Ù.
  • ¿©±â¼­ »õ·Î µîÀåÇÏ´Â Alphpa(opacity=¼ýÀÚ)´Â ºÒÅõ¸íµµ¸¦ ÀǹÌÇÕ´Ï´Ù. ¼ýÀÚ°¡ ÀÛ¾ÆÁú¼ö·Ï Èñ¹ÌÇÏ°Ô Èå·ÁÁö´Â ±â¹ýÀÔ´Ï´Ù.
  • TABLE¿¡ Àû¿ëµÈ ½ºÅ¸ÀÏ Àû¿ë¹ýÀº Inline style sheet·Î¼­ Å×ÀÌºí¿¡ ¹è°æÀ̹ÌÁö¸¦ ³Ö°í, borderÀÇ shorthand¸¦ Àû¿ëÇÏ¿© Å׵θ® ±½±â´Â 7 border-styleÀº inset, border-color´Â blue·Î Àû¿ëÇÕ´Ï´Ù.
< TABLE style="background-image :url(À̹ÌÁö ÁÖ¼Ò) ;
border : 7 inset blue ; filter : alpha(opacity=¼öÄ¡);" >

alpha(opacity=10)
±æÀÌ ³¡³ª´Â °÷¿¡¼­µµ
±æÀÌ ÀÖ´Ù.
±æÀÌ ³¡³ª´Â °÷¿¡¼­µµ
±æÀÌ µÇ´Â »ç¶÷ÀÌ ÀÖ´Ù.
½º½º·Î º½±æÀÌ µÇ¾î
³¡¾øÀÌ °É¾î°¡´Â »ç¶÷ÀÌ ÀÖ´Ù.
°­¹°Àº È帣´Ù°¡ ¸ØÃß°í
»õµéÀº ³¯¾Æ°¡ µ¹¾Æ¿ÀÁö ¾Ê°í
Çϴðú ¶¥ »çÀÌÀÇ ¸ðµç ²ÉÀÙÀº Èð¾îÁ®µµ
º¸¶ó »ç¶ûÀ¸·Î ³²¾Æ ÀÖ´Â »ç¶÷ÀÌ ÀÖ´Ù.
alpha(opacity=30)
±æÀÌ ³¡³ª´Â °÷¿¡¼­µµ
±æÀÌ ÀÖ´Ù.
±æÀÌ ³¡³ª´Â °÷¿¡¼­µµ
±æÀÌ µÇ´Â »ç¶÷ÀÌ ÀÖ´Ù.
½º½º·Î º½±æÀÌ µÇ¾î
³¡¾øÀÌ °É¾î°¡´Â »ç¶÷ÀÌ ÀÖ´Ù.
°­¹°Àº È帣´Ù°¡ ¸ØÃß°í
»õµéÀº ³¯¾Æ°¡ µ¹¾Æ¿ÀÁö ¾Ê°í
Çϴðú ¶¥ »çÀÌÀÇ ¸ðµç ²ÉÀÙÀº Èð¾îÁ®µµ
º¸¶ó »ç¶ûÀ¸·Î ³²¾Æ ÀÖ´Â »ç¶÷ÀÌ ÀÖ´Ù.
alpha(opacity=50)
±æÀÌ ³¡³ª´Â °÷¿¡¼­µµ
±æÀÌ ÀÖ´Ù.
±æÀÌ ³¡³ª´Â °÷¿¡¼­µµ
±æÀÌ µÇ´Â »ç¶÷ÀÌ ÀÖ´Ù.
½º½º·Î º½±æÀÌ µÇ¾î
³¡¾øÀÌ °É¾î°¡´Â »ç¶÷ÀÌ ÀÖ´Ù.
°­¹°Àº È帣´Ù°¡ ¸ØÃß°í
»õµéÀº ³¯¾Æ°¡ µ¹¾Æ¿ÀÁö ¾Ê°í
Çϴðú ¶¥ »çÀÌÀÇ ¸ðµç ²ÉÀÙÀº Èð¾îÁ®µµ
º¸¶ó »ç¶ûÀ¸·Î ³²¾Æ ÀÖ´Â »ç¶÷ÀÌ ÀÖ´Ù.
alpha(opacity=80)
±æÀÌ ³¡³ª´Â °÷¿¡¼­µµ
±æÀÌ ÀÖ´Ù.
±æÀÌ ³¡³ª´Â °÷¿¡¼­µµ
±æÀÌ µÇ´Â »ç¶÷ÀÌ ÀÖ´Ù.
½º½º·Î º½±æÀÌ µÇ¾î
³¡¾øÀÌ °É¾î°¡´Â »ç¶÷ÀÌ ÀÖ´Ù.
°­¹°Àº È帣´Ù°¡ ¸ØÃß°í
»õµéÀº ³¯¾Æ°¡ µ¹¾Æ¿ÀÁö ¾Ê°í
Çϴðú ¶¥ »çÀÌÀÇ ¸ðµç ²ÉÀÙÀº Èð¾îÁ®µµ
º¸¶ó »ç¶ûÀ¸·Î ³²¾Æ ÀÖ´Â »ç¶÷ÀÌ ÀÖ´Ù.