AllAcc?ess2007. 8. 5. 20:12

자바 스크립트로 레이어 속성 다루기


자바 스크립트로 스타일 시트의 속성을 다루는 방법에 대해서는 이미 8장에서 설명한 바 있다. 이 방법을 통해서 우리는 스타일 시트로 정의된 레이어의 여러가지 속성을 다루어 보고자 한다. 그러기 위해서는 먼저 CSS의 속성에 대응되는 JSS속성을 알아야한다.


margin 관련 속성


CSS속성                                           JSS속성

margin-top                                        marginTop

margin-right                                      marginRight

margin-bottom                                   marginBottom

margin-left                                        marginLeft

margin                                              margin


padding 관련 속성


CSS속성                                           JSS속성

padding-top                                      paddingTop

padding-right                                    paddingRight

padding-bottom                                 paddingBottom

padding-left                                      paddingLeft

padding                                            padding


border 관련 속성


CSS속성                                           JSS속성

border-top-style                                borderTopStyle

border-right-style                              borderRightStyle

border-bottom-style                           borderBottomStyle

border-left-style                                borderLeftStyle

border-style                                      borderStyle


border-top-width                               borderTopWidth

border-right-width                             borderRightWidth

border-bottom-width                          borderBottomWidth

border-left-width                               borderLeftWidth

border-width                                     borderWidth


border-top-color                                borderTopColor

border-right-color                              borderRightColor

border-bottom-color                           borderBottomColor

border-left-color                                borderLeftColor

border-color                                      borderColor


border-top                                         borderTop

border-right                                       borderRight

border-bottom                                    borderBottom

border-left                                         borderLeft

border                                               border


레이어 관련 속성

width                                                width

height                                               height

top                                                    top

right                                                  right

bottom                                               bottom

left                                                    left

z-index                                             zindex

overflow                                            overflow

clip                                                   clip

visibility                                             visibility'


자바스크립트로 레이어에 접근하기 위해서는 Explorer의 all속성아나 getElementById메서드를 사용한다. all속성은 Explorer에서만 지원되지만 getElementById는 Explorer와 Netscape 5이상에서 동시에 지원하기 때문에 두 브라우저에서 호환되는 기능을 구현하려면 getElementById메서드를 사용하여야 한다. 두 방법을 사용하여 레이어의 스타일에 접근하는 방법은 다음과 같다.


syntax[신텍스] 구문론[법],통사론[법],문장론[morphology[형태]]

example) document.all["레이어의 아이디"].style.속성

              document.getElementById("레이어의 아이디").style.속성


다음은 위의 방법을 사용하여 레이어의 속성을 자바 스크립트로 변경하는 example이다. 이 example는 두 개의 leyer를 정의하고 첫 번째 leyer에 마우스가 위차하면 자신의 속성을 바꿀뿐 아니라 다른 leyer의 속성도 변경하도록 한 example이다


Sample) example


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>Tag All System </TITLE>
 <meta http-equiv="Content-type" Content="text/html;charset=euc-kr">
 <style type="text/css">
 <!--
    DIV{width:200px;height:100px;background-color:#BOEOFF;}
 //-->
 </style>
 <script type="text/javascript">
 <!--
 document.title=" :: DIV javascirpt로 leyer,div 다루기";
 document.oncontextmenu = new Function("return false");
 document.onselectstart = new Function("return false");
    document.ondragstart = new Function("return false");

 function change(obj)
 {
 obj.style.border = "solid 1px red";
  obj.style.backgroundColor = "#FFE0B0";
 document.getElementById("lay2").style.visibility = "visible";
 }

 function unchange(obj)
 {
  obj.style.border = "none";
  obj.style.backgroundColor ="#B0E0FF";
  document.getElementById("lay2").style.visibility = "hidden";
 }
 //-->
 </script>
  </HEAD>
  <BODY>
  <h2>자바 스크립트 레이어 다루기</h2>
  <Div ID="lay1" onMouseOver="change(this)" onMouseOut="unchange(this)">
  레이어 1 입니다.
  </Div>

  <DIV ID="lay2" style="visibility:hidden;">
  레이어 2 입니다.
  </DIV>
  </BODY>
</HTML>




Browser에 독립적인 layer.DIV 만들기


지금까지 우리는 Netscape 5이전의 Browser에서 Layer객체를 통하여 layer를 다루는 method과 Explorer와 Netscape 5이상의 browser에서 style sheets를 통해서 leyer 접근하는 method를 살펴보았다. but 실제로 우리가 만든 web text를 보는 user가 어떤 browser를 사용할지는 알수 없다. so user의 browser에 관계없이 동일한 화면을 output하도록 하려면 browser를 구분하여 그에 따라 layer와 관련된 속성들을 사용해야 한다.


먼저 browser를 구분하는 method을 보자. netscape 5 before에서는 layer Array을 backup[support]하고 Explorer와 netscape 5 after에서는 getElementById를 support하므로 next의 text을 통해서 user의 browser kind of 따라서 nn아나 ie변수에 값이 지정된다.


nn = (document.layers) ? 1: 0;

ie  = (document.getElementById) ? 1: 0;


and browser의 kind of 에 따라 nn이 1 인 경우에는 layer 객체를 변수에 지정하고 ie가 1인 경우에는 layer의 style을 변수에 지정한다.


if(nn) 변수 = document.layers["레이어 아이디"]

if(ie) 변수 = document.getElementById("레이어 아이디").style


next 의 example은 next to before 에서 descripsion한 method을 이용하여 browserf를 구분하고 layer와 관련된 속성을 ex나 nets의 version에 관계없이 동일한 기능을 수행하도록 만들어진것이다. 주석을 참고하여 실행해 보기 바란다.


Sample Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>Tag All System Technique </TITLE>
 <meta http-equiv="Content-type" Content="text/html;charset=euc-kr">
 <style type="text/css">
 <!--
 //-->
 </style>
 <script type="text/javascript">
 <!--
 document.title=" :: DIV javascirpt로 leyer,div 다루기";
 document.oncontextmenu = new Function("return false");
 document.onselectstart = new Function("return false");
    document.ondragstart = new Function("return false");
   
 // Netscape 5 version before인 경우
 nn = (document.layers) ? 1: 0;

    // Explorer or Netscape 5 after인 경우
 ie = (document.getElementById) ? 1: 0;

 function init()
 {
 
 //netscape 5 before 인 경우 layer를 변수에 지정
 if(nn) layer1 = document.layers["div1"]

 //explorer or netscape 5 after 인 경우
 //layer의 style을 변수에 지정
 if(ie) layer1 = document.getElementById("div1").style
 }

 function move_left_right(val)
 {
 //좌표값을 숫자로 변환
      var temp = parseInt(layer1.left);
     layer1.left = temp+ val;
  alert(layer1.left);
 }

    //layer를 세로 방향으로 이동하는 함수
 function move_up_down(val)
 {
 var temp = parseInt(layer1.top)
 layer1.top = temp + val;
 }

 //layer를 절대좌표로 이동하는 함수
 function move_layer(x,y)
 {
  layer1.left = x;
  layer1.top = y;
 }

 //layer를 보이는 함수
 function show_layer()
 {
 //netscape 5 before인 경우 visibility = show
 //아니면 visible
 layer1.visibility =(nn)? "show":"visible";
 }

 //layer를 감추는 함수
 function hide_layer()
 {
 //netscape 5 before인 경우 visibility = hide
 //아니면 hidden
 layer1.visibility =(nn)? "hide":"hidden";
 }
 //-->
 </script>
  </HEAD>
  <BODY onload="init();">
  <Form>
  <input type="button" value="Left" onClick="move_left_right(-20)">
  <input type="button" value="Right" onClick="move_left_right(20)">
  <input type="button" value="UP" onClick="move_up_down(-20)">
  <input type="button" value="Down" onClick="move_up_down(20)">

  <input type="button" value="절대좌표 : 100, 100" onClick="move_layer(100,100)">
  <input type="button" value="절대좌표 : 300, 200" onClick="move_layer(300,200)">

  <input type="button" value="Show" onClick="show_layer()">
  <input type="button" value="Hidden" onClick="hide_layer()">
  </Form>

  <Div ID="div1" style="position:absolute; left:200; top:100; width:100;background-color:red">
 
  </Div>
  </BODY>
</HTML>
<!--

parseInt 함수는 문자(열)을 숫자로 바꿔주는 함수입니다.
parseInt(theStr, baseNum) 에서
theStr : 문자(열) 부분을 나타냄.
baseNum : Base 진수 (10진수, 8진수, 16진수 등등)로서 생략 가능함.
ss1 = parseInt(str2.charAt(0),10); 를 보면요.
str2.charAt(0)은 str2 라는 변수에 담긴 글자 중 첫번째 글자를 의미합니다.
(만약 str2 = '12345' 라면 charAt(0)은 1, charAt(1)은 2, charAt(2)는 3이 됩니다. 이와 같은 형식을 인덱스라고 합니다. 그리고 charAt() 은 한글자를 추출해오는 함수라고 보시면 됩니다. 그리고 자바스크립트에서는 인덱스는 0부터 시작합니다.)
따라서 전체 문장의 의미는 str2라는 변수에 담긴 문자 중 첫번째 문자를 추출해서 10진수로 변환한 숫자를 ss1이라는 변수에 넣어라 라는 의미가 됩니다.
)

-->


next to before 의 example는 browser에 독립적인 layer를 사용하는 간단한 EX를 나타낸 것이다. 이와 비슷한 방법으로 layer에 관련된 다른 속성들을 이용하는 Ex도 많이 있지만 뒤에서 javascript의 활용 Examples 다룰 때 더 자세하게 설명하기로 하고 이상으로 layer에 대한 설명을 마칠까 한다.

Posted by aspirinirony
AllAcc?ess2007. 5. 22. 11:50
색상 코드표 입니다

 

※ 원하는 색깔을 드래그해서 복사하십시오.
#93DAFF #98DFFF #9DE4FF #A2E9FF #A7EEFF #ACF3FF #B0F7FF #B4FBFF #B9FFFF #C0FFFF
#87CEFA #91D8FA #A5D8FA #AFDDFA #B9E2FA #C3E7FA #CDECFA #D7F1FA #E1F6FA #EBFBFF
#00BFFF #0AC9FF #14D3FF #1EDDFF #28E7FF #32F1FF #3CFBFF #46FFFF #96FFFF #C8FFFF
#00A5FF #00AFFF #00B9FF #00C3FF #00CDFF #00D7FF #00E1FF #00EBFF #00F5FF #00FFFF
#1EA4FF #28AEFF #32B8FF #3CC2FF #46CCFF #50D6FF #5AE0FF #6EE0FF #6EEAFF #78F3FF
#1E90FF #289AFF #32A4FF #3CAEFF #46B8FF #50C2FF #5ACCFF #64D6FF #6EE0FF #78EAFF










#96A5FF #A0AFFF #AAB9FF #B4C3FF #BECDFF #C8D7FF #D2E1FF #DCEBFF #E8F5FF #F4FFFF
#86A5FF #90AFFF #9AB9FF #A4C3FF #AECDFF #B8D7FF #CCE1FF #E0EBFF #EBF5FF #F9FFFF
#6495ED #6E9FED #78A9ED #82B3ED #8CBDED #96C7ED #A0D1F7 #AADBFF #B4E5FF #BEEFFF










#0078FF #0A82FF #148CFF #1E96FF #28A0FF #32AAFF #3CB4FF #46BEFF #50C8FF #5AD2FF
#0064FF #0A6EFF #1478FF #1E82FF #288CFF #3296FF #3CA0FF #46AAFF #50B4FF #5ABEFF
#0000FF #3232FF #5050FF #646EFF #6478FF #6482FF #648CFF #6496FF #64A0FF #64AAFF
#4169E1 #4B73E1 #557DE1 #5F87E1 #6991E1 #739BE1 #7DA5E1 #87AFEB #91B9F5 #9BC3FF
#0064CD #0A6ECD #1478CD #1E82CD #288CD2 #3296D7 #3CA0E1 #46AAEB #50B4F5 #5ABEF5
#5A5AFF #6464FF #6E6EFF #7878FF #8282FF #8C8CFF #A0A0FF #B4B4FF #C8C8FF #D2D2FF










#7B68EE #8572EE #8F7CEE #9986EE #A390EE #AD9AEE #B7A4EE #C1AEEE #CBB8EE #D5C2EE
#6A5ACD #7E6ECD #8878CD #9282CD #9C8CCD #A696CD #B0A0CD #BAAAD7 #C4B4E1 #CEBEE1
#0000CD #2828CD #4646CD #6464CD #6E6ED7 #7878E1 #8282EB #8C8CF5 #9696FF #A0A0FF
#00008C #14148C #28288C #3C3C8C #50508C #646496 #7878AA #8C8CBE #A0A0C8 #B4B4DC
#483D8B #52478B #5C518B #665B8B #70658B #7A6F95 #84799F #8E83A9 #988DB3 #A297BD
#000069 #1E3269 #323C73 #3C467D #3C5087 #3C5A91 #46649B #506EA5 #5A78AF #6482B9
#3DFF92 #47FF9C #51FFA6 #5BFFB0 #65FFBA #6FFFC4 #79FFCE #75FFCA #7AFFCF #7FFFD4
#55EE94 #5FEE9E #69EEA8 #73EEB2 #7DEEBC #87EEC6 #91F8D0 #9BFFDA #A5FFE4 #AFFFEE
#66CDAA #70D2B4 #7AD7BE #84DCC8 #8EE1D2 #98EBDC #9DF0E1 #A2F5E6 #A7FAEB #ACFFEF










#AAEBAA #B4F0B4 #BEF5BE #C8FAC8 #D2FFD2 #DCFFDC #E1FFE1 #E6FFE6 #EBFFEB #F0FFF0
#80E12A #8AE634 #94EB3E #9EF048 #A8F552 #B2FA5C #BCFF66 #C1FF6B #C6FF70 #CBFF75
#52E252 #5CE75C #66EC66 #70F170 #7AF67A #84FB84 #89FB89 #8EFB8E #93FB93 #98FB98
#64CD3C #6ED746 #78E150 #82EB5A #8CF064 #96F56E #9BFA73 #A0FA78 #A5FA7D #AAFA82










#13C7A3 #18CCA8 #1DD1AD #22D6B2 #27DBB7 #2CE0BC #31E0C1 #36E0C6 #3BE0CB #40E0D0
#46B4B4 #50BEBE #5AC8C8 #64D2D2 #6EDCDC #73E1E1 #78E6E6 #7DEBEB #82F0F0 #87F5F5
#20B2AA #2ABCB4 #34C6BE #3ED0C8 #48DAD2 #52E4DC #57E9E1 #5CEEE6 #61F3EB #66F8F0
#5F9EA0 #69A8AA #73B2B4 #7DBCBE #87C6C8 #91D0D2 #96D5D7 #9BDADC #A0DFE1 #A5E3E6










#3CB371 #46BD7B #50C785 #5AD18F #64DB99 #6EE5A3 #73EAA8 #78EFAD #7DF4B2 #82F9B7
#2E8B57 #389561 #429F6B #4CA975 #56B37F #60BD89 #65C28E #6AC793 #6FCC98 #74D19D
#228B22 #2C952C #369F36 #40A940 #4AB34A #54BD54 #5EC75E #63CC63 #68D168 #6DD66D
#497649 #538053 #5D8A5D #679467 #719E71 #7BA87B #80AD80 #85B285 #8AB78A #8FBC8F
#006400 #0A6E0A #147814 #1E821E #288C28 #329632 #3CA03C #41A541 #46AA46 #4BAF4B










#008C8C #0A9696 #14A0A0 #1EAAAA #28B4B4 #32BEBE #37C3C3 #3CC8C8 #41CDCD #46D2D2
#008080 #0A8A8A #149494 #1E9E9E #28A8A8 #32B2B2 #37B7B7 #3CBCBC #41C1C1 #46C6C6
#FFB6C1 #FFBBC6 #FFC0CB #FFC5D0 #FFCAD5 #FFCFDA #FFD4DF #FFD9E4 #FFDEE9 #FFE3EE
#FFAAAF #FFB4B9 #FFBEC3 #FFC8CD #FFD2D7 #FFDCE1 #FFE1E6 #FFE6EB #FFEBF0 #FFF0F5
#FF9E9B #FFA8A5 #FFB2AF #FFBCB9 #FFC6C3 #FFD0CD #FFD5D2 #FFDAD7 #FFDFDC #FFE4E1
#FF7A85 #FF848F #FF8E99 #FF98A3 #FFA2AD #FFACB7 #FFB1BC #FFB6C1 #FFBBC6 #FFC0CB
#FF5675 #FF607F #FF6A89 #FF7493 #FF7E9D #FF88A7 #FF92B1 #FF9CBB #FFA6C5 #FFB0CF










#FF82FF #FF8CFF #FF96FF #FFA0FF #FFAAFF #FFB4FF #FFBEFF #FFC8FF #FFD2FF #FFDCFF
#FF7DB4 #FF87BE #FF91C8 #FF9BD2 #FFA5DC #FFAFE6 #FFB4EB #FFB9F0 #FFBEF5 #FFC3FA
#FF69B4 #FF73BE #FF7DC8 #FF87D2 #FF91DC #FF9BE6 #FFA5F0 #FFAAF5 #FFAFFA #FFB4FF
#FF1493 #FF1E9D #FF28A7 #FF32B1 #FF3CBB #FF46C5 #FF50CF #FF5AD9 #FF64E3 #FF6EED










#DB7093 #DB7A9D #DB84A7 #E08EB1 #E598BB #EAA2C5 #EAB1D4 #EFACCF #F4BBDE #F4B6D9
#D7567F #DC6089 #E16A93 #E6749D #EB7EA7 #F088B1 #F592BB #FA9CC5 #FFA6CF #FFB0D9
#C71585 #C71F8F #C73399 #C73DA3 #CC47AD #D151B7 #D65BC1 #E065CB #EA6FD5 #F479DF










#CD1039 #CD1F48 #CD2E57 #CD3861 #CD426B #D24C75 #D7567F #DC6089 #E16A93 #E6749D
#B9062F #B91A4D #BE2457 #C32E61 #C8386B #CD4275 #D24C7F #D75689 #DC6093 #E16A9D
#FAEB78 #FAF082 #FAF58C #FAFA96 #FAFAA0 #FAFAAA #FAFAB4 #FAFABE #FAFAD2 #FAFAD2
#FFDC3C #FFE146 #FFE650 #FFEB5A #FFF064 #FFF56E #FFFA78 #FFFA82 #FFFF8C #FFFF96
#FFC81E #FFD228 #FFD732 #FFDC3C #FFE146 #FFE650 #FFEB5A #FFF064 #FFF56E #FFF978
#FFB400 #FFBE0A #FFC314 #FFC81E #FFCD28 #FFD232 #FFD73C #FFDC46 #FFE150 #FFE65A










#FDCD8C #FDD296 #FDD7A0 #FDDCAA #FDE1B4 #FDE6BE #FDEBC8 #FDF5D2 #FDF5DC #FDF5E6
#FAC87D #FACD87 #FAD291 #FAD79B #FADCA5 #FAE1AF #FAE6B9 #FAEBC3 #FAEBCD #FAEBD7
#FFA500 #FFAF0A #FFB914 #FFC31E #FFCD28 #FFD732 #FFDC37 #FFE13C #FFE641 #FFEB46
#FF9100 #FF9B00 #FFA500 #FFAF00 #FFB900 #FFC300 #FFC800 #FFCD00 #FFD200 #FFD700
#FF8200 #FF8C0A #FF9614 #FFA01E #FFAA28 #FFB432 #FFB937 #FFBE3C #FFC341 #FFC846










#FFA98F #FFB399 #FFBDA3 #FFC7AD #FFD1B7 #FFDBC1 #FFE0C6 #FFE5CB #FFEAD0 #FFEFD5
#FFA374 #FFAD7E #FFB788 #FFC192 #FFCB9C #FFD0A1 #FFD5A6 #FFDAAB #FFDFB0 #FFE4B5
#FF9473 #FF9E7D #FFA887 #FFB291 #FFBC9B #FFC6A5 #FFD0AF #FFD0AF #FFD5B4 #FFDAB9
#FF7F50 #FF895A #FF9364 #FF9D6E #FFA778 #FFB182 #FFBB8C #FFC091 #FFC596 #FFCA9B










#CD853F #CD8F49 #D29953 #D7A35D #DCAD67 #E1B771 #E6C17B #EBC680 #F0CB85 #F5D08A
#D2691E #D27328 #D27D32 #D7873C #DC9146 #E19B50 #E6A55A #EBAA5F #EBAF64 #F0B469
#AE5E1A #B86824 #C2722E #CC7C38 #D68642 #E0904C #E59551 #EA9A56 #EF9F5B #F4A460
#8B4513 #8B4F1D #8B5927 #8B6331 #906D3B #957745 #9F814F #A48654 #A98B59 #AE905E
#FF9696 #FFA0A0 #FFAAAA #FFB4B4 #FFBEBE #FFC8C8 #FFD2D2 #FFDCDC #FFE6E6 #FFF0F0
#F08080 #F08A8A #F09494 #F59E9E #FAA8A8 #FAB2B2 #FAB7B7 #FABCBC #FAC1C1 #FAC6C6
#F56E6E #F57878 #F58282 #F58C8C #F59696 #F5A0A0 #F5AAAA #FAB4B4 #FABEBE #FAC8C8
#F06464 #F06E6E #F07878 #F08282 #F08C8C #F09696 #F4A0A0 #F4AAAA #F4B4B4 #FEBEBE










#FF0000 #FF3232 #FF4646 #FF5050 #FF5A5A #FF6464 #FF6E6E #FF7878 #FF8282 #FF8C8C
#EB0000 #EB3232 #EB4646 #EB5050 #EB5A5A #EB6464 #F06E6E #F57878 #FA8282 #FA8C8C
#CD0000 #CD3C3C #CD4646 #CD5050 #D25A5A #D76464 #DC6E6E #E17878 #E68282 #EB8C8C










#CD5C5C #CD6666 #CD7070 #CD7A7A #D28484 #D78E8E #DC9898 #E6A2A2 #EBACAC #F0B6B6
#B90000 #B93232 #B93C3C #B94646 #B95050 #BE5A5A #C35F5F #C86464 #CD6969 #D26E6E
#B22222 #B24040 #B24A4A #B25454 #B75E5E #BC6868 #C17272 #CB7776 #CB7C7C #D08180
#A52A2A #AA3E3E #AF4848 #B45252 #BE5C5C #C36666 #CD7070 #CD7A7A #D28484 #D78E8E
#800000 #803232 #853C3C #8F4646 #945050 #9E5A5A #A36464 #AD6E6E #B77878 #C18282
#CD853F #CD8B45 #CD904A #D2954F #D29A54 #D79F59 #D7A45E #E1A963 #E1AE68 #E6B36D
#DB631F #E56D29 #E57733 #EA813D #EF8B47 #EF904C #F49551 #F49A56 #F49F5B #F4A460
#D2691E #D27328 #D77D32 #D7873C #DC9146 #E19B50 #E6A055 #EBA55A #F0AA5F #F5AF64
#A0522D #A05C37 #A06641 #A5704B #AA7A55 #B4845F #B98E69 #C39873 #CDA27D #D7AC87
#8B4513 #8B4F1D #8B5927 #8B6331 #906D3B #9A7745 #A4814F #AE8B59 #B89563 #C29F6D










#DA70D6 #DF75DB #E47AE0 #E97FE5 #EE84EA #F389EF #F88EF4 #FD93F9 #FF98FE #FF9DFF
#BA55D3 #BF5AD8 #C45FDD #C964E2 #CE69E7 #D36EEC #D873F1 #DD78F6 #E27DFB #E782FF
#9932CC #9E37D1 #A33CD6 #A841DB #AD46E0 #B24BE5 #B750EA #BC55EF #C15AF4 #C65FF9
#9400D3 #9905D8 #9E0ADD #A30FE2 #A814E7 #AD19EC #B21EF1 #B723F6 #BC28FB #C12DFF










#942894 #9E329E #A83CA8 #B246B2 #BC50BC #C65AC6 #D064D0 #DA6EDA #E478E4 #EE82EE
#8c008c #960a96 #a014a0 #aa1eaa #b428b4 #be32be #c83cc8 #d246d2 #dc50dc #e65ae6
#800080 #8a0a8a #941494 #9e1e9e #a828a8 #b232b2 #bc3cbc #c646c6 #d050d0 #da5ada
#834683 #8d508d #975a97 #a164a1 #ab6eab #b578b5 #bf82bf #c98cc9 #d396d3 #dda0dd










#828282 #8c8c8c #969696 #a0a0a0 #aaaaaa #b4b4b4 #bebebe #c8c8c8 #d2d2d2 #dcdcdc
#000000 #282828 #323232 #3c3c3c #464646 #505050 #5a5a5a #646464 #6e6e6e #787878

 
snow #FFFAFA
 
ghostwhite #F8F8FF
 
whitesmoke #F5F5F5
 
gainsboro #DCDCDC
 
floralwhite #FFFAF0
 
oldlace #FDF5E6
 
linen #FAF0E6
 
antiquewhite #FAEBD7
 
papayawhip #FFEFD5
 
blanchedalmond #FFEBCD
 
bisque #FFE4C4
 
peachpuff #FFDAB9
 
navajowhite #FFDEAD
 
moccasin #FFE4B5
 
cornsilk #FFF8DC
 
ivory #FFFFF0
 
lemonchiffon #FFFACD
 
seashell #FFF5EE
 
honeydew #F0FFF0
 
mintcream #F5FFFA
 
azure #F0FFFF
 
aliceblue #F0F8FF
 
lavender #E6E6FA
 
lavenderblush #FFF0F5
 
mistyrose #FFE4E1
 
white #FFFFFF
 
black #000000
 
darkslategrey #2F4F4F
 
dimgrey #696969
 
slategrey #708090
 
lightslategrey #778899
 
grey #BEBEBE
 
lightgrey #D3D3D3
 
midnightblue #191970
 
navyblue #000080
 
navy #000080
 
cornflowerblue #6495ED
 
darkslateblue #483D8B
 
slateblue #6A5ACD
 
mediumslateblue #7B68EE
 
lightslateblue #8470FF
 
mediumblue #0000CD
 
royalblue #4169E1
 
blue #0000FF
 
dodgerblue #1E90FF
 
deepskyblue #00BFFF
 
skyblue #87CEEB
 
lightskyblue #87CEFA
 
steelblue #4682B4
 
lightsteelblue #B0C4DE
 
lightblue #ADD8E6
 
powderblue #B0E0E6
 
paleturquoise #AFEEEE
 
darkturquoise #00CED1
 
mediumturquoise #48D1CC
 
turquoise #40E0D0
 
cyan #00FFFF
 
lightcyan #E0FFFF
 
cadetblue #5F9EA0
 
mediumaquamarine #66CDAA
 
aquamarine #7FFFD4
 
darkgreen #006400
 
darkolivegreen #556B2F
 
darkseagreen #8FBC8F
 
seagreen #2E8B57
 
mediumseagreen #3CB371
 
lightseagreen #20B2AA
 
palegreen #98FB98
 
springgreen #00FF7F
 
lawngreen #7CFC00
 
green #00FF00
 
chartreuse #7FFF00
 
mediumspringgreen #00FA9A
 
greenyellow #ADFF2F
 
limegreen #32CD32
 
yellowgreen #9ACD32
 
forestgreen #228B22
 
olivedrab #6B8E23
 
darkkhaki #BDB76B
 
khaki #F0E68C
 
palegoldenrod #EEE8AA
 
lightgoldenrodyellow #FAFAD2
 
lightyellow #FFFFE0
 
yellow #FFFF00
 
gold #FFD700
 
lightgoldenrod #EEDD82
 
goldenrod #DAA520
 
darkgoldenrod #B8860B
 
rosybrown #BC8F8F
 
indianred #CD5C5C
 
saddlebrown #8B4513
 
sienna #A0522D
 
peru #CD853F
 
burlywood #DEB887
 
beige #F5F5DC
 
wheat #F5DEB3
 
sandybrown #F4A460
 
tan #D2B48C
 
chocolate #D2691E
 
firebrick #B22222
 
brown #A52A2A
 
darksalmon #E9967A
 
salmon #FA8072
 
lightsalmon #FFA07A
 
orange #FFA500
 
darkorange #FF8C00
 
coral #FF7F50
 
lightcoral #F08080
 
tomato #FF6347
 
orangered #FF4500
 
red #FF0000
 
hotpink #FF69B4
 
deeppink #FF1493
 
pink #FFC0CB
 
lightpink #FFB6C1
 
palevioletred #DB7093
 
maroon #B03060
 
mediumvioletred #C71585
 
violetred #D02090
 
magenta #FF00FF
 
violet #EE82EE
 
plum #DDA0DD
 
orchid #DA70D6
 
mediumorchid #BA55D3
 
darkorchid #9932CC
 
darkviolet #9400D3
 
blueviolet #8A2BE2
 
purple #A020F0
 
mediumpurple #9370DB
 
thistle #D8BFD8
 
snow1 #FFFAFA
 
snow2 #EEE9E9
 
snow3 #CDC9C9
 
snow4 #8B8989
 
seashell1 #FFF5EE
 
seashell2 #EEE5DE
 
seashell3 #CDC5BF
 
seashell4 #8B8682
 
AntiqueWhite1 #FFEFDB
 
AntiqueWhite2 #EEDFCC
 
AntiqueWhite3 #CDC0B0
 
AntiqueWhite4 #8B8378
 
bisque1 #FFE4C4
 
bisque2 #EED5B7
 
bisque3 #CDB79E
 
bisque4 #8B7D6B
 
PeachPuff1 #FFDAB9
 
PeachPuff2 #EECBAD
 
PeachPuff3 #CDAF95
 
PeachPuff4 #8B7765
 
NavajoWhite1 #FFDEAD
 
NavajoWhite2 #EECFA1
 
NavajoWhite3 #CDB38B
 
NavajoWhite4 #8B795E
 
LemonChiffon1 #FFFACD
 
LemonChiffon2 #EEE9BF
 
LemonChiffon3 #CDC9A5
 
LemonChiffon4 #8B8970
 
cornsilk1 #FFF8DC
 
cornsilk2 #EEE8CD
 
cornsilk3 #CDC8B1
 
cornsilk4 #8B8878
 
ivory1 #FFFFF0
 
ivory2 #EEEEE0
 
ivory3 #CDCDC1
 
ivory4 #8B8B83
 
honeydew1 #F0FFF0
 
honeydew2 #E0EEE0

honeydew3 #C1CDC1
 
honeydew4 #838B83
 
LavenderBlush1 #FFF0F5
 
LavenderBlush2 #EEE0E5
 
LavenderBlush3 #CDC1C5
 
LavenderBlush4 #8B8386
 
MistyRose1 #FFE4E1
 
MistyRose2 #EED5D2
 
MistyRose3 #CDB7B5
 
MistyRose4 #8B7D7B
 
azure1 #F0FFFF
 
azure2 #E0EEEE
 
azure3 #C1CDCD
 
azure4 #838B8B
 
SlateBlue1 #836FFF
 
SlateBlue2 #7A67EE
 
SlateBlue3 #6959CD
 
SlateBlue4 #473C8B
 
RoyalBlue1 #4876FF
 
RoyalBlue2 #436EEE
 
RoyalBlue3 #3A5FCD
 
RoyalBlue4 #27408B
 
blue1 #0000FF
 
blue2 #0000EE
 
blue3 #0000CD
 
blue4 #00008B
 
DodgerBlue1 #1E90FF
 
DodgerBlue2 #1C86EE
 
DodgerBlue3 #1874CD
 
DodgerBlue4 #104E8B
 
SteelBlue1 #63B8FF
 
SteelBlue2 #5CACEE
 
SteelBlue3 #4F94CD
 
SteelBlue4 #36648B
 
DeepSkyBlue1 #00BFFF
 
DeepSkyBlue2 #00B2EE
 
DeepSkyBlue3 #009ACD
 
DeepSkyBlue4 #00688B
 
SkyBlue1 #87CEFF
 
SkyBlue2 #7EC0EE
 
SkyBlue3 #6CA6CD
 
SkyBlue4 #4A708B
 
LightSkyBlue1 #B0E2FF
 
LightSkyBlue2 #A4D3EE
 
LightSkyBlue3 #8DB6CD
 
LightSkyBlue4 #607B8B
 
SlateGray1 #C6E2FF
 
SlateGray2 #B9D3EE
 
SlateGray3 #9FB6CD
 
SlateGray4 #6C7B8B
 
LightSteelBlue1 #CAE1FF
 
LightSteelBlue2 #BCD2EE
 
LightSteelBlue3 #A2B5CD
 
LightSteelBlue4 #6E7B8B
 
LightBlue1 #BFEFFF
 
LightBlue2 #B2DFEE
 
LightBlue3 #9AC0CD
 
LightBlue4 #68838B
 
LightCyan1 #E0FFFF
 
LightCyan2 #D1EEEE
 
LightCyan3 #B4CDCD
 
LightCyan4 #7A8B8B
 
PaleTurquoise1 #BBFFFF
 
PaleTurquoise2 #AEEEEE
 
PaleTurquoise3 #96CDCD
 
PaleTurquoise4 #668B8B
 
CadetBlue1 #98F5FF
 
CadetBlue2 #8EE5EE
 
CadetBlue3 #7AC5CD
 
CadetBlue4 #53868B
 
turquoise1 #00F5FF
 
turquoise2 #00E5EE
 
turquoise3 #00C5CD
 
turquoise4 #00868B
 
cyan1 #00FFFF
 
cyan2 #00EEEE
 
cyan3 #00CDCD
 
cyan4 #008B8B
 
DarkSlateGray1 #97FFFF
 
DarkSlateGray2 #8DEEEE
 
DarkSlateGray3 #79CDCD
 
DarkSlateGray4 #528B8B
 
aquamarine1 #7FFFD4
 
aquamarine2 #76EEC6
 
aquamarine3 #66CDAA
 
aquamarine4 #458B74
 
DarkSeaGreen1 #C1FFC1
 
DarkSeaGreen2 #B4EEB4
 
DarkSeaGreen3 #9BCD9B
 
DarkSeaGreen4 #698B69
 
SeaGreen1 #54FF9F
 
SeaGreen2 #4EEE94
 
SeaGreen3 #43CD80
 
SeaGreen4 #2E8B57
 
PaleGreen1 #9AFF9A
 
PaleGreen2 #90EE90
 
PaleGreen3 #7CCD7C
 
PaleGreen4 #548B54
 
SpringGreen1 #00FF7F
 
SpringGreen2 #00EE76
 
SpringGreen3 #00CD66
 
SpringGreen4 #008B45
 
green1 #00FF00
 
green2 #00EE00
 
green3 #00CD00
 
green4 #008B00
 
chartreuse1 #7FFF00
 
chartreuse2 #76EE00
 
chartreuse3 #66CD00
 
chartreuse4 #458B00
 
OliveDrab1 #C0FF3E
 
OliveDrab2 #B3EE3A
 
OliveDrab3 #9ACD32
 
OliveDrab4 #698B22
 
DarkOliveGreen1 #CAFF70
 
DarkOliveGreen2 #BCEE68
 
DarkOliveGreen3 #A2CD5A
 
DarkOliveGreen4 #6E8B3D
 
khaki1 #FFF68F
 
khaki2 #EEE685
 
khaki3 #CDC673
 
khaki4 #8B864E
 
LightGoldenrod1 #FFEC8B
 
LightGoldenrod2 #EEDC82
 
LightGoldenrod3 #CDBE70
 
LightGoldenrod4 #8B814C
 
LightYellow1 #FFFFE0
 
LightYellow2 #EEEED1
 
LightYellow3 #CDCDB4
 
LightYellow4 #8B8B7A
 
yellow1 #FFFF00
 
yellow2 #EEEE00
 
yellow3 #CDCD00
 
yellow4 #8B8B00
 
gold1 #FFD700
 
gold2 #EEC900
 
gold3 #CDAD00
 
gold4 #8B7500
 
goldenrod1 #FFC125
 
goldenrod2 #EEB422
 
goldenrod3 #CD9B1D
 
goldenrod4 #8B6914
 
DarkGoldenrod1 #FFB90F
 
DarkGoldenrod2 #EEAD0E
 
DarkGoldenrod3 #CD950C
 
DarkGoldenrod4 #8B6508
 
RosyBrown1 #FFC1C1
 
RosyBrown2 #EEB4B4
 
RosyBrown3 #CD9B9B
 
RosyBrown4 #8B6969
 
IndianRed1 #FF6A6A
 
IndianRed2 #EE6363
 
IndianRed3 #CD5555
 
IndianRed4 #8B3A3A
 
sienna1 #FF8247
 
sienna2 #EE7942
 
sienna3 #CD6839
 
sienna4 #8B4726
 
burlywood1 #FFD39B
 
burlywood2 #EEC591
 
burlywood3 #CDAA7D
 
burlywood4 #8B7355
 
wheat1 #FFE7BA
 
wheat2 #EED8AE
 
wheat3 #CDBA96
 
wheat4 #8B7E66
 
tan1 #FFA54F
 
tan2 #EE9A49
 
tan3 #CD853F
 
tan4 #8B5A2B
 
chocolate1 #FF7F24
 
chocolate2 #EE7621
 
chocolate3 #CD661D
 
chocolate4 #8B4513
 
firebrick1 #FF3030
 
firebrick2 #EE2C2C
 
firebrick3 #CD2626
 
firebrick4 #8B1A1A
 
brown1 #FF4040
 
brown2 #EE3B3B
 
brown3 #CD3333
 
brown4 #8B2323
 
salmon1 #FF8C69
 
salmon2 #EE8262
 
salmon3 #CD7054
 
salmon4 #8B4C39
 
LightSalmon1 #FFA07A
 
LightSalmon2 #EE9572
 
LightSalmon3 #CD8162
 
LightSalmon4 #8B5742
 
orange1 #FFA500
 
orange2 #EE9A00
 
orange3 #CD8500
 
orange4 #8B5A00
 
DarkOrange1 #FF7F00
 
DarkOrange2 #EE7600
 
DarkOrange3 #CD6600
 
DarkOrange4 #8B4500
 
coral1 #FF7256
 
coral2 #EE6A50
 
coral3 #CD5B45
 
coral4 #8B3E2F
 
tomato1 #FF6347
 
tomato2 #EE5C42
 
tomato3 #CD4F39
 
tomato4 #8B3626
 
OrangeRed1 #FF4500
 
OrangeRed2 #EE4000
 
OrangeRed3 #CD3700
 
OrangeRed4 #8B2500
 
red1 #FF0000
 
red2 #EE0000
 
red3 #CD0000
 
red4 #8B0000
 
DeepPink1 #FF1493
 
DeepPink2 #EE1289
 
DeepPink3 #CD1076
 
DeepPink4 #8B0A50
 
HotPink1 #FF6EB4
 
HotPink2 #EE6AA7
 
HotPink3 #CD6090
 
HotPink4 #8B3A62
 
pink1 #FFB5C5
 
pink2 #EEA9B8
 
pink3 #CD919E
 
pink4 #8B636C
 
LightPink1 #FFAEB9
 
LightPink2 #EEA2AD
 
LightPink3 #CD8C95
 
LightPink4 #8B5F65
 
PaleVioletRed1 #FF82AB
 
PaleVioletRed2 #EE799F
 
PaleVioletRed3 #CD6889
 
PaleVioletRed4 #8B475D
 
maroon1 #FF34B3
 
maroon2 #EE30A7
 
maroon3 #CD2990
 
maroon4 #8B1C62
 
VioletRed1 #FF3E96
 
VioletRed2 #EE3A8C
 
VioletRed3 #CD3278
 
VioletRed4 #8B2252
 
magenta1 #FF00FF
 
magenta2 #EE00EE
 
magenta3 #CD00CD
 
magenta4 #8B008B
 
orchid1 #FF83FA
 
orchid2 #EE7AE9
 
orchid3 #CD69C9
 
orchid4 #8B4789
 
plum1 #FFBBFF
 
plum2 #EEAEEE
 
plum3 #CD96CD
 
plum4 #8B668B
 
MediumOrchid1 #E066FF
 
MediumOrchid2 #D15FEE
 
MediumOrchid3 #B452CD
 
MediumOrchid4 #7A378B
 
DarkOrchid1 #BF3EFF
 
DarkOrchid2 #B23AEE
 
DarkOrchid3 #9A32CD
 
DarkOrchid4 #68228B
 
purple1 #9B30FF
 
purple2 #912CEE
 
purple3 #7D26CD
 
purple4 #551A8B
 
MediumPurple1 #AB82FF
 
MediumPurple2 #9F79EE
 
MediumPurple3 #8968CD
 
MediumPurple4 #5D478B
 
thistle1 #FFE1FF
 
thistle2 #EED2EE
 
thistle3 #CDB5CD
 
thistle4 #8B7B8B
 
grey0 #000000
 
grey1 #030303
 
grey2 #050505
 
grey3 #080808
 
grey4 #0A0A0A
 
grey5 #0D0D0D
 
grey6 #0F0F0F
 
grey7 #121212
 
grey8 #141414
 
grey9 #171717
 
grey10 #1A1A1A
 
grey11 #1C1C1C
 
grey12 #1F1F1F
 
grey13 #212121
 
grey14 #242424
 
grey15 #262626
 
grey16 #292929
 
grey17 #2B2B2B
 
grey18 #2E2E2E
 
grey19 #303030
 
grey20 #333333
 
grey21 #363636
 
grey22 #383838
 
grey23 #3B3B3B
 
grey24 #3D3D3D
 
grey25 #404040
 
grey26 #424242
 
grey27 #454545
 
grey28 #474747
 
grey29 #4A4A4A
 
grey30 #4D4D4D
 
grey31 #4F4F4F
 
grey32 #525252
 
grey33 #545454
 
grey34 #575757
 
grey35 #595959
 
grey36 #5C5C5C
 
grey37 #5E5E5E
 
grey38 #616161
 
grey39 #636363
 
grey40 #666666
 
grey41 #696969
 
grey42 #6B6B6B
 
grey43 #6E6E6E
 
grey44 #707070
 
grey45 #737373
 
grey46 #757575
 
grey47 #787878
 
grey48 #7A7A7A
 
grey49 #7D7D7D
 
grey50 #7F7F7F
 
grey51 #828282
 
grey52 #858585
 
grey53 #878787
 
grey54 #8A8A8A
 
grey55 #8C8C8C
 
grey56 #8F8F8F
 
grey57 #919191
 
grey58 #949494
 
grey59 #969696
 
grey60 #999999
 
grey61 #9C9C9C
 
grey62 #9E9E9E
 
grey63 #A1A1A1
 
grey64 #A3A3A3
 
grey65 #A6A6A6
 
grey66 #A8A8A8
 
grey67 #ABABAB
 
grey68 #ADADAD
 
grey69 #B0B0B0
 
grey70 #B3B3B3
 
grey71 #B5B5B5
 
grey72 #B8B8B8
 
grey73 #BABABA
 
grey74 #BDBDBD
 
grey75 #BFBFBF
 
grey76 #C2C2C2
 
grey77 #C4C4C4
 
grey78 #C7C7C7
 
grey79 #C9C9C9
 
grey80 #CCCCCC
 
grey81 #CFCFCF
 
grey82 #D1D1D1
 
grey83 #D4D4D4
 
grey84 #D6D6D6
 
grey85 #D9D9D9
 
grey86 #DBDBDB
 
grey87 #DEDEDE
 
grey88 #E0E0E0
 
grey89 #E3E3E3
 
grey90 #E5E5E5
 
grey91 #E8E8E8
 
grey92 #EBEBEB
 
grey93 #EDEDED
 
grey94 #F0F0F0
 
grey95 #F2F2F2
 
grey96 #F5F5F5
 
grey97 #F7F7F7
 
grey98 #FAFAFA
 
grey99 #FCFCFC
 
grey100 #FFFFFF
Posted by aspirinirony
AllAcc?ess2007. 5. 17. 13:49
<meta http-equiv="Page-Enter"content="revealTrans(Duration=5.0,Transition=23)">
Posted by aspirinirony
AllAcc?ess2007. 2. 26. 22:50

참고: http://www.alistapart.com/articles/slidingdoors


Web Standard에 기반한 CSS를 사용한 Tab 구현시

Tab 모서리를 라운드 처리하는 방법


겹치는 2개의 background image를 사용한다.

이 때 2개의 background 를 사용하기 위해

element 2개가 필요한데

tab을 표현하는 경우 <li> 와 <a> 를 활용한다.

(적절히 활용할 것이 무엇인지 경우에 따라 다를 수 있다.)


선행하는 <li>에 아래로 깔리는 이미지를

뒤따르는 <a>에 위에 덮히는 이미지를

background 로 잡아준다.


아래로 깔리는 이미지는 크기를 넉넉히 잡고

위로 덮히는 이미지는 크기를 최소화 한다.


자세한 구현 방법은 위 출처 참고


예) www.mozilla.org

사용자 삽입 이미지


Posted by aspirinirony
AllAcc?ess2007. 2. 26. 22:47
W3C 8 박스(box) 모델 Trio 홈페이지 

CSS 박스 모델은 문서계통(tree)에서 엘레멘트에 생성된 사각형 박스를 기술하고, 보이는 양식화 모델에 따라서 배치한다. 페이지 박스는 박스의 특수한 종류로, 페이지화된 메디아(paged media) 항목에 기술되어 있다.

8.1 박스(box) 규격

각 박스는 내용 지역(content area 예: 텍스트, 이미지, 등)과 선택적 주위의 패딩, 테두리마진 지역들을 갖는다; 각 지역 속성은 아래에 그 정의가 기술되었다. 다음 도표는 이 지역들이 어떻게 연관되고, 마진(margin), 테두리(border)와 패딩(padding)의 용어가 사용되는가를 설명한다:

내용(content), 패딩(padding), 테두리(border)과 마진(margin)들의 관계를 설명하는 이미지(image)   [D]

마진, 테두리와 패딩은 왼쪽, 오른쪽, 맨위과 바닥 부분들로 나뉘어 질 수 있다(예: 도표에서, 왼쪽 마진(margin)은 "LM", 오른쪽 패딩(padding)은 "RP", 맨위 테두리(border)는 "TB", 등으로).

각 네 지역들(내용, 패딩, 테두리와 마진)의 주변으로 구분되는 부분을 모서리("edge")라 부르고, 각 박스는 네개의 모서리(edge)들을 갖는다:

내용 모서리(content edge) 또는 내부 모서리(inner edge)
그 엘레멘트의 내용의 표현의 주위를 둘러 싼다.
패딩 모서리(padding edge)
박스 패딩 주위를 둘러 싼다. 만일 패딩이 0의 너비를 가지면, 그 패딩 모서리는 내용 모서리와 같다. 박스의 패딩 모서리는, 박스에 의하여 형성된, 용기블럭(containing block)의 모서리를 정의한다.
테두리 모서리(border edge)
박스 테두리의 주위를 둘러 싼다. 만일 테두리가 0의 너비를 가지면, 테두리 모서리는 그 패딩 모서리와 같다.
마진 모서리(margin edge) 또는 바깥쪽 모서리(outer edge)
박스 마진의 주위를 둘러 싼다. 만일 마진이 0의 너비를 가지면, 마진 모서리는 그 테두리 모서리와 같다.

각 모서리는 왼쪽, 오른쪽, 맨위, 바닥 모서리로 나눌 수 있다.

박스의 내용 지역에 대한 크기인 내용 너비내용 높이는 여러가지 요인에 따라 다르다: 엘레멘트가 생성하는 박스의 'width' 또는 'height' 속성을 설정하는가, 그 박스가 텍스트 또는 다른 박스를 포함하는가, 그 박스가 테이블(table)인가, 등 박스 너비와 높이들은 보이는 양식화 모델 세부사항에서 다뤘다.

박스 너비는 왼쪽과 오른쪽 마진, 테두리, 패딩과 내용 너비들의 합계로 주어진다. 박스 높이는 왼쪽과 오른쪽 마진, 테두리, 패딩과 내용 높이들의 합계로 주어진다.

박스에서 여러 지역의 배경 스타일은 다음과 같이 결정된다:

  • 내용 지역: 엘레멘트의 'background' 속성으로 생성.
  • 패딩 지역: 엘레멘트의 'background' 속성으로 생성.
  • 테두리 지역: 엘레멘트의 테두리 속성으로 생성.
  • 마진 지역: 마진들은 항상 투명하다.

8.2 마진, 패딩, 테두리들의 예제

이 예제는 마진(margin), 패딩(padding)과 테두리(border)들이 어떻게 작용하는가를 설명한다. 예제 HTML 문서에서:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>마진, 패딩, 테두리들의 예제</TITLE>
      <STYLE type="text/css">
         UL {
            background: green;
            margin: 12px 12px 12px 12px;
            padding: 3x 3px 3px 3px;
            /* 테두리들이 설정되지 않음 */
         }
         LI {
           color: black;  /* 텍스트 색상은 검정 */
           background: gray;  /* 내용, 패딩(padding)은 회색 */
           margin: 12px 12px 12px 12px;
           padding: 12px 0px 12px 12px; /* 오른쪽은 패딩 0px 임 */
           list-style: none   /* 목록 항목 앞에 그림문자들이 없슴 */
           /* 테두리들이 설정되지 않음 */
        }
        LI.withborder {
           border-style: dashed;
           border-width: medium;  /* 모든 면들에  테두리 너비를 설정 함 */
           border-color: black;
        }
     </STYLE>
  </HEAD>

  <BODY>
  <UL>
    <LI>First element of list
    <LI class="withborder">Second element of list is longer
      to illustrate wrapping.
    </UL>
  </BODY>
</HTML>

문서계통에서의 결과는(다른 관계들 중에서) 한 UL 엘레멘트에 두개의 LI 자식(child)들을 갖는다.

다음 도표의 첫번째는 이 예제에서 무엇이 생성되는가를 설명한다. 두번째는, UL 엘레멘트의 마진, 패딩과 테두리들사이의 관계와, 그 자식인 LI 엘레멘트와의 관계를 설명한다.

모체와 자식(child)의 마진(margin), 테두리(border)와 패딩(padding)들의 관계를 설명하는 이미지(image).   [D]

다음의 사항에 유의하라:

  • 각 LI 박스의 내용 너비는 위에서 아래로(top-down) 계산된다; 각 LI 박스의 용기블럭(containing block)은 그 UL 엘레멘트에 의하여 형성된다.
  • 각 LI 박스의 높이는 그 내용 높이, 더하기 맨위와 바닥 패딩, 테두리와 마진들로 주어진다. 수직 마진들은 LI 박스들사이에서 통합(collapse)됨에 유의하라.
  • LI 박스들의 오른쪽 패딩은 0의 너비로 설정되었다('padding' 속성). 두번째 설명에서 그 효과가 명백하다.
  • LI 박스의 마진들은 항상 투명하다. 따라서, UL 패딩의 배경색(녹색)과 내용 지역이 부각된다.
  • 두번째 LI 엘레멘트는 점선으로 된 테두리('border-style' 속성)를 지정한다.

8.3 마진(margin) 속성:

마진 속성은 박스의 마진 지역(margin area) 너비를 지정한다. 다른 마진 속성은 그들의 해당 면 만을 결정하는 데 반해, 'margin' 약식속성은 네면의 모든 마진들을 설정한다.

다음 값들 중 하나가 될 수 있는 속성 <margin-width> 값 타입(value type)의 정의를 참조하라:

<길이>
고정된 너비를 지정한다.
<백분율>
백분율은 생성된 박스의 용기블럭(containing block)너비에 대하여 계산된다. 이는 'margin-top''margin-bottom'에서 일치하며, 페이지 박스 높이를 참조하는 백분율 페이지 문맥 안에서는 예외이다.
auto
기능은 너비와 마진의 계산 항목을 참조하라.

마진 속성의 음수값은 허용되나, 특정 적용의 한계들이 있을 수 있다.

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
값:  <margin-width> | inherit
최초값:  0
적용:  모든 엘레멘트들
전달:  안됨
백분율:  포함한 블럭(block)의 너비를 참조
메디아:  visible(보이는)

이 속성들은 박스의 맨위, 오른쪽, 바닥, 왼쪽 마진을 시계방향으로 설정한다.

예제:

H1 { margin-top: 2em }
'margin'
값:  <margin-width>{1,4} | inherit
최초값:  약식속성들에 정의되지 않음
적용:  모든 엘레멘트들
전달:  안됨
백분율:  포함한 블럭(block)의 너비를 참조
메디아:  visible(보이는)

'margin' 속성은 스타일쉬트 안에서 한 번에 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'들을 설정하는 약식속성이다.

값이 하나 만 있으면, 모든 면들에 적용된다.
값이 두개 있으면, 맨위와 바닥 마진은 첫 값으로, 오른쪽과 왼쪽 마진은 두째 값으로 설정된다.
값이 세개 있으면, 맨위는 첫 값으로, 왼쪽과 오른쪽은 두째 값으로, 바닥은 세째 값으로 설정된다.
값이 네개 있으면, 각각은 맨위, 오른쪽, 바닥, 왼쪽의 순서(시계방향)로 설정된다.

예제:

BODY { margin: 2em }  /* 모든 마진들을 2em으로 설정 */
BODY { margin: 1em 2em }  /* 맨위 & 바닥 = 1em, 오른쪽 & 왼쪽 = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

위 예제의 마지막 명령은 아래 예제와 같다:

BODY {
   margin-top: 1em;
   margin-right: 2em;
   margin-bottom: 3em;
   margin-left: 2em; /* 반대쪽(right)에서 복사 */
}

8.3.1 마진들의 통합

이 규격에서, 마진(margin)들의 통합(collapsing)의 표현은, 두개이상의 박스(서로 옆에 있거나 네스트된)들의 인접 마진(이들을 분리하는 패딩이나 테두리 지역이 아닌)들이 통합되어, 단일한 마진을 형성한다.

CSS2에서 수평 마진들은 절대로 통합되지 않는다.

수직 마진들은 박스들사이에서 통합될 수 있다:

  • 정상 흐름(normal flow)에서 블럭(block) 박스들의 두개이상의 인접 수직 마진들은 통합된다 그 결과 마진 너비는 인접 마진 너비들의 최대로 된다. 음수 마진의 경우, 음수 인접 마진의 절대값 최대를 양수 인접 마진들의 최대로 부터 뺀다. 만일 양수 마진이 없으면, 음수 인접 마진의 절대 값 최대를 0(zero)로 부터 뺀다.
  • 유동된(floated) 박스와 다른 박스의 수직 마진들사이에서는 통합이 이루어 지지 않는다.
  • 절대적으로와 상대적으로 위치된 박스의 마진들은 통합(collapse)되지 않는다.

통합된 마진의 설명은 마진, 패딩, 테두리의 예제를 참조하라.

8.4 패딩(padding) 속성:

패딩 속성들은 박스의 패딩 지역 너비를 지정한다. 제작자가 패딩 속성으로 그 해당 면 만을 설정하는데 반해, 약식속성 'padding'은 한 번의 설정으로 모든 네면들의 패딩을 설정한다.

여기서 정의된 속성은 값 타입 <padding-width>를 참조하며, 다음 중 한 값을 가질 수 있다:

<길이>
고정된 너비를 지정한다.
<백분율>
백분율은 생성된 박스의 용기블럭너비에 대하여, 또한 'padding-top''padding-bottom'에 대해서도 계산된다.

마진 속성과는 달리, 패딩 값은 음수값이 될 수는 없다. 마진 속성과 같이, 패딩의 백분율 값은 생성된 박스의 용기블럭(containing block) 너비의 속성들을 참조한다.

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
값:  <padding-width> | inherit
최초값:  0
적용:  모든 엘레멘트들
전달:  안됨
백분율:  포함한 블럭의 너비를 참조
메디아:  visible(보이는)

이 속성은 박스의 맨위, 오른쪽, 바닥과 왼쪽 패딩을 시계방향으로 설정한다.

예제:

BLOCKQUOTE { padding-top: 0.3em }
'padding'
값:  <padding-width>{1,4} | inherit
최초값:  약식속성들에 정의되지 않음
적용:  모든 엘레멘트들
전달:  안됨
백분율:  포함한 블럭의 너비를 참조
메디아:  visible(보이는)

'padding' 속성은 스타일쉬트에서 한번에 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'을 설정하는 약식속성이다.

값이 하나 만 있으면, 모든 면들에 적용된다.
값이 두개이면, 맨위와 바닥 패딩은 첫 값으로, 오른쪽과 왼쪽 패딩은 두째 값으로 설정된다.
값이 세개이면, 맨위는 첫 값으로, 왼쪽과 오른쪽은 두째 값으로, 바닥은 세째 값으로 설정된다.
값이 네개이면, 각각은 맨위, 오른쪽, 바닥, 왼쪽의 순서(시계방향)로 설정된다.

패딩 지역의 표면 색상 또는 이미지는 'background' 속성를 통하여 지정한다:

예제:

H1 {
   background: white;
   padding: 1em 2em;
}

위 예제는 수직 패딩('padding-top''padding-bottom')을 '1em'으로, 수평 패딩('padding-right''padding-left')를 '2em'으로 설정한다. 단위 'em'은 그 엘레멘트의 글꼴 크기(font size)에 상대적이고, '1em'은 그 사용 글꼴의 크기와 같다.

8.5 테두리(border) 속성

테두리 속성들은 박스의 테두리 지역 너비, 색상 스타일을 지정한다. 이 속성은 모든 엘레멘트에 적용된다.

주석. 특히 HTML에서, 사용도구들은, 일반적인("ordinary") 엘레멘트들에서와는 다르게, 일부 엘레멘트(예: button, menu, 등)에서는, 테두리들을 읽어 표현할 수 있다.

8.5.1 테두리 너비:

테두리 너비 속성은 테두리 지역의 너비를 지정한다, 이 항목에서 정의된 속성은 값 타입 <border-width>를 참조하며, 다음 중 하나의 값을 갖는다:

thin
얇은(thin) 테두리.
medium
보통(medium) 테두리.
thick
두꺼운(thick) 테두리.
<길이>
테두리의 두께는 명시적인 값이다. 명시적 테두리 너비는 음수가 될 수 없다.

앞의 세가지 값들의 해석은 사용도구에 따라 다르나, 다음 관계를 준수하여야 한다:

'thin' <='medium' <= 'thick'.

나아가, 이 너비들은 한 문서를 통하여 균일하여야 한다.

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
값:  <border-width> | inherit
최초값:  medium
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)

이 속성들은 박스의 맨위, 오른쪽, 바닥, 왼쪽 테두리 너비를 시계방향으로 설정한다.

'border-width'
값:  <border-width>{1,4} | inherit
최초값:  각 속성들을 보라
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)

이 속성은 스타일쉬트에서 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'를 한번에 설정하는 약식속성이다.

값이 하나 만 있으면, 모든 면들에 적용된다.
값이 두개이면, 맨위와 바닥 테두리는 첫 값으로, 오른쪽과 왼쪽 테두리는 두째 값으로 설정된다.
값이 세개이면, 맨위는 첫 값으로, 왼쪽과 오른쪽은 두째 값으로, 바닥은 세째 값으로 설정된다.
값이 네개이면, 각각은 맨위, 오른쪽, 바닥, 왼쪽의 순서(시계방향)로 설정된다.

예제:

아래 예제에서, 주석(comment)들은 결과적인 맨위, 오른쪽, 바닥, 왼쪽 테두리의 너비를 순서대로 나타낸다:

H1 { border-width: thin }  /* thin thin thin thin */
H1 { border-width: thin thick }  /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thick */

8.5.2 테두리(border) 색상:

테두리 색상 속성은 박스의 테두리 색상을 지정한다.

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
값:  <색상> | inherit
최초값:  그 'color' 속성값
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)
'border-color'
값:  <색상>{1,4} | transparent | inherit
최초값:  각 속성들을 보라
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)

'border-color'는 네 테두리들의 색상 속성을 지정하며, 값들은 다음의 의미를 갖는다:

<색상>
색상값을 지정한다.
transparent
이 테두리는 너비를 가질 수 있지 만 투명(transparent)하다.

'border-color' 속성은 네가지 값의 종류들 중 한가지를 가질 수 있고, 그 값들은, 'border-width'에서와 같은 방식으로, 다른 면들의 색상들을 설정한다.

엘레멘트의 테두리 색상이 테두리 속성에서 지정되지 않았으면, 사용도구들은, 테두리 색상의 계산된 값과 같이, 그 엘레멘트의 'color' 속성값을 사용하여야 한다.

예제:

이 예제에서, 테두리는 두꺼운 검정 실선이 된다.

P {
   color: black;
   background: white;
   border: solid;
}

8.5.3 테두리(border) 스타일:

이 테두리 스타일 속성들은 박스 테두리 줄의 스타일(solid, double, dashed, 등)을 지정한다. 이 항목에서 정의된 속성은 <border-style> 값 타입을 참조하며, 다음 중 하나가 될 수 있다:

none
테두리가 없슴. 이 값은 'border-width'의 계산된 값를 강제로 '0'으로 만든다.
hidden
'none'과 같으나, 테이블(table) 엘레멘트테두리의 해상도 마찰(conflict resolution)에서는 예외이다.
dotted
테두리가 점선이다.
dashed
테두리가 짧은 선 조각들의 연속이다.
solid
테두리는 단일한 줄이다.
double
테두리가 두개의 실선(solid) 줄로 된다. 두 줄들의 합계와 그 사이의 공간은 'border-width'의 값과 같다.
groove
테두리가 창(canvas)에서 조각(파진)된 것처럼 보인다.
ridge
'grove'의 반대: 테두리가 창에서 튀어나온 것처럼 보인다.
inset
테두리가 창에서 전체 박스가 깔려있는(embed) 것처럼 보인다.
outset
'inset'의 반대: 테두리가 창에서 전체 박스가 튀어나온 것처럼 보인다.

모든 테두리들은 박스 배경의 맨위 그려진다. 'groove', 'ridge', 'inset', 'outset' 값들에 따라 그려진 테두리의 색상은 그 엘레멘트의 'color' 속성에 따라 다르다.

규격에 부합하는 HTML 사용도구은 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', 'outset'들을 'solid'로 해석해도 된다.

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
값:  <border-style> | inherit
최초값:  none
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)
'border-style'
값:  <border-style>{1,4} | inherit
최초값:  각 속성들을 보라
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)

'border-style' 속성은 네 테두리의 스타일을 설정한다. 이는 네가지 값 중의 하나가 될 수 있으며, 그 값들은, 위에 기술된 'border-width'에서와 같이 다른 면들을 설정한다.

예제:

#xy34 { border-style: solid dotted }

위 예제에서, 수평 테두리들은 'solid'가 되고, 수직 테두리들은 'dotted'가 된다.

테두리 스타일의 최초값이 'none' 이므로, 테두리 스타일이 설정되지 않는 한, 테두리는 보이지 않는다.

8.5.4 테두리(border) 약식속성:

'border-top', 'border-right', 'border-bottom', 'border-left'
값:  [ <'border-top-width'> || <'border-style'> || <색상> ] | inherit
최초값:  각 속성들을 보라
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)

이는 박스 맨위, 오른쪽, 바닥, 왼쪽 테두리의 너비, 스타일, 색상을 설정하는 약식속성이다.

예제:

H1 { border-bottom: thick solid red }

위 명령은 H1 엘레멘트의 아래쪽 테두리의 너비, 스타일, 색상를 설정한다. 생략된 값은 그들의 최초값들로 설정된다. 다음 명령은 테두리 색상을 지정하지 않았으므로, 이 테두리는 'color' 속성에 의하여 지정된 색상을 갖는다:

H1 { border-bottom: thick solid }
'border'
값:  [ <'border-width'> || <'border-style'> || <색상> ] | inherit
최초값:  각 속성들을 보라
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는)

'border' 속성은 박스의 모든 네 테두리들에 같은 너비, 색상, 스타일을 설정하는 약식속성이다. 'margin', 'padding' 속성의 약식 명령들과는 달리, 이 'border' 속성은 네 테두리들에 다른 값들을 설정할 수 없다. 그렇게 하기 위하여서는, 하나이상의 다른 테두리 속성들을 사용하여야 한다.

예제:

예를 들어, 아래 첫번째 명령은 그 다음에 있는 네개의 명령들에 의하여 설정된 것과 같다:

P { border: solid red }

P {
   border-top: solid red;
   border-right: solid red;
   border-bottom: solid red;
   border-left: solid red
}

이 속성들은, 어느 정도 기능성이 중첩되어 있어 어떤 명령들을 어떤 순서로 지정하는가는 중요하다.

예제:

이 예제를 보자:

BLOCKQUOTE {
   border-color: red;
   border-left: double;
   color: black
}

위 예제에서, 왼쪽 테두리의 색상은 검정이며, 다른 테두리들은 적색이다. 이는 'border-left'가 너비, 스타일, 색상을 설정하였기 때문이다. 'border-left' 속성에 의하여 색상값이 주어지지 않았으므로, 그 'color' 속성으로 부터 가져 온다. 'color' 속성이 'border-left' 속성 다음에 설정되지 않았기 때문이다.


페이지 맨위로맨위Trio 홈페이지 문서( http://trio.co.kr/webrefer/css2/box.html#box-dimensions)는 자유로이 연결 사용이 가능함.
(수정일 12/16/2006 19:28:44)

Posted by aspirinirony
AllAcc?ess2007. 2. 10. 01:42
난 툴로 layout을 잡지 않고 일일이 소스를 만들어간다..

비주얼 스튜디오로 layout을 잡아도 되지만 왠지.. 그냥 하는게 버릇이 되어나서 일일이 소스 치고 확인하고.. 머리굴리고.. 담배피고..

처음엔  그냥 notepad에서 하다가.. editplus로 바꾸었는데.. 이게 브라우져가 IE전용이라서 가끔 그냥 생각없이 지나치면 fox에서 개털난다..

난 왠만해선 layout을 설정할때 position을 주지 않는다.

특정 개체외엔 주지 않는것은 거의 대부분이겠지만 아니면 툴로 만들어 사용했을 경우 자동으로 position이 주어지지만 나같이 일일이 손으로 치고 확인하는 놈에겐 position은 짜증나는것이다..

뭐 absolute야 상관 없겠지만 이것이 상속되는 layer에서 일어나는 일이 허다해서 두 브라우져를 생각할때 너무 힘들다..

특히 지금 만들고 있는 것은 모든것이 position이며 width값이 %이다.. %로 width값을 모두 주는 것은 아니지만.. layout에서 가장신경쓰이는 부분인 클라이언트의 디스플레이값에 반응하는 layout의 설정이다..

정적이며 일부분과 일정 개체에 동적 데이터를 주입시키는 ajax도 있고 script도 있지만 난.. AJAX 이라는 인터페이스를 FLASH와 동등한 느낌을 가지는 것이라..

layer의 동적인 생성에서 position의 상속과 주위의 layer들이 반응하는  부분을 일일이 다 컨트롤하려니 머리 터진다..

IE는 그래도 익숙하니 괜찮아 문제는 NS이다..
relative와 absolute, fixed IE와 NS의 상속개념이 틀리며.. margin과 padding의 개념도 틀리고 %라는 개념 또한 틀리다..

IE는 layer한 개체에 %를 주면 %에 충실하게 반능한다.. 그런데 NS는 %를 주면 이 %를 이해하려든다..
우선 비어있는 페이지에 달랑하나의 layer개체에 position absoute 값으로 Top%를 주면 두 브라우져모두 %에 반능한다..

문제는 개체속의 개체의 %값에 해석이다.. relative에 상속되는 absolute에서 %를 주면 두 부라우져가 다른 해석을 한다는것이 문제이다.. 우선 IE는 %에 반응하지만 top 90%를 준다고 하면 화면아래로 살아지는데 있데 스크롤바가 반능이 없다는 것이다.. 이론이론..

그리고 NS는 %를 이해하려는것인지 상속개체의 속성값에 %를 맞추는데 이건 종잡기가 힘들다..
누구는 px를 쓸지 몰라서 안쓰는지.. 꼭 %를 써야하며 써야 다른 부수적인 부분에서 쉽게 만들어갈수있는데.. 두 부라우져가 해석하는 것이 틀려 나름데로 고민하다..

해결해버렸다.. 두부라우져를 인식할수 있는 styleshoot 주석을 import시키는 것 이때 주는 NS이며 IE가 필요한것은 IE전용 CSS로 사용했다. ... 아이고 머리야..




'AllAcc?ess' 카테고리의 다른 글

Sliding Doors of CSS - Douglas Bowman  (0) 2007.02.26
CSS 박스(box) 모델  (0) 2007.02.26
Flash [No.01] 모양트윈  (0) 2007.02.10
Flash를 시작하며  (0) 2007.02.09
CSS Design libary [ display : block, inline, none ]  (0) 2007.02.04
Posted by aspirinirony
AllAcc?ess2007. 2. 4. 00:41
IE와 Fox를 사용하면서 알게된 표준적 코드사용에서 CSS부분 또한 많은 차이가 있음을 알았고 그로인해 기존의 지식들에 새로운 추가적 정보들을 끼워넣어야 하는 상황에 이르렇다.

ASP,net을 하면서 visual studio를 사용하니 표준적 코드를 사용하는 것을 알고 하는지 코드가 자동생성되어 사용하는것인지 모를정도로 나의 지식을 형편없었다.. 처음으로 돌아가는 것은 내가 바보로 다시 돌아간다는 뜻인 것같다... 새롭게 시작한다는 것도 이상하다.. 돌아갈곳이 있는 곳도 아니지만..

그저 이제 또 걸어야지 라는 생각으로 해봐야지...

CSS Design 에서 display의 역활은 중요하고 할수있겠지..

none이되면 없어져 버리니까..
block이되면 나타나고.. 그런데.. inline 이것은 무엇일까...

div 와 span의 차이 tr과 td의 차이 세로의 나열과 가로의 나열 그러면 어떻게 사용할까?

우선 사용해보자..

layer를 준비하고 소소한 style을 적용할 준비를 하고..

<div style="display:;">block</div>
<div style="display:;">inline</div>
<div style="display:;">none</div>

이제 스타일 적용. all block

block
inline
none

당연 이렇게 나온다..

div 이기에 이렇게 나온다.. 그럼 all inline으로

block
inline
none

span이 아니다. div이다.. 모두 display를 inline으로 주니 span처럼 같은 line에서 뿌린다..
단어의 뜻만큼 inline 이다..
 none은 안한다..

해봐야 볼수없으니..

그럼 block에만 block을 준다.

block
inline
none

block에 display block을 하니 block에서 줄을 바꾸어 다음 소스를 뿌린다.

그럼 block 과 none에 block을 준다.

block
inline
none

생각해보면 inline을 선언하면 다음소스를 같은 라인으로 뿌려야 하지만 다음 소스의 display가 block이니 block 되어 버렸다.

그런데 중요한 사실은 display의 선언에서 inline의 설정이다. inline 다음의 dispaly가 없다면 어떻게 될까

block
inline
무설정
inline
무설정

무설정 즉 style 설정자체가 없다면 본래의 tag 속성되로 뿌려진다. inline다음에 span이 오면 같은 라인에 뿌려지지만 div가 오면 다음라인으로 내려간다...

display의 설정으로 모두 inline으로 만든다면 어떻게 될까?

block
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline
inline


같은 라인에서 계속 뻗어나가 뿌려진다...

이로써 inline 속성을 잘 알아 보았다..




Posted by aspirinirony
AllAcc?ess2007. 2. 2. 00:12

적용 및 테스트 IE & FireFox2

 

리스트(목록)태그를 네비게이션 메뉴바로 활용한 예 입니다.

실제로 메뉴에 사용된 HTML 태그는, 다음과 같이 매우 간결합니다.

 

 

[ 메뉴에 사용된 HTML 태그 ]

<ul id="mainMenu">
  <li><a href="/products/">Products</a></li>
  <li><a href="/downloads/">Downloads</a></li>
  <li><a href="/purchase/">Purchase</a></li>
  <li><a href="/support/">Support</a></li>
  <li><a href="/partners/">Partners</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

 

먼저 간단히, 메뉴 디자인의 설계를 살펴 보겠습니다.

ul태그에서 아래쪽 테두리값을 이용해 베이스 라인을 깔아두었기 때문에, 실제 박스가 차지하는 크기는 26px(25px+1px)가 됩니다. 리스트 항목(li)태그에 적절한 좌우패딩값을 주어 메뉴간 간격을 설정할 수 있습니다.
박스의 영역 높이(25px) 안쪽에 자리잡는 메뉴항목(<a></a>)은, 마우스 오버에 대한 아래쪽 테두리값을 3px로 설정했습니다. 따라서, 테두리를 제외한 22px범위 영역의 높이와 패딩값을 설정하도록 합니다.

 

[ 사용한 스타일 시트 ]

 

<style type="text/css">

#mainMenu{
  list-style: none;
  margin: 0; padding: 0 0 25px 5px;

  background-color: #000000; border-bottom: 1px solid #ffcc00;
}

영역의 아래쪽에 패딩값을 25px로 주어, border-bottom이 베이스 라인으로 표현되게 합니다.

ul박스가 웹페이지에서 표현되는 세로의 실제 사이즈는 26px(25px+1px)입니다.

메뉴텍스트의 좌측간격이 15px이고, 아래의 li의 좌측 패딩값(10px)이므로 ul의 왼쪽 패딩은 5px로 설정합니다.


#mainMenu li{
 
float: left;
  margin: 0; padding: 0 10px;
}

가로로 나열된 메뉴이기 때문에, float: left를 사용하여, 리스트 항목들을 좌에서 우로 배치하도록 합니다.

설계된 내용에 따라, 좌/우 공통으로 10px의 패딩값을 설정합니다. 메뉴간 간격(20px)

#mainMenu a{
 
display: block;
  margin: 0; padding: 5px 0 1px 0;  
  height: 16px;

  font-family: verdana; font-size: 9px; color: #ffffff; font-weight: bold;
  text-decoration:none;
}

li태그의 배치 속성이 float: left인 관계로, 안쪽에 위치하는 a태그를 블록레벨로 설정하여, 정확한 레이아웃을 만들 수 있도록 합니다. 상(5px),(1px), 영역높이(16px)의 합은 실제 영역높이(25px)에서 롤오보 보더값(3px)를 제외한 값입니다. (5px+1px+16px = 25px-3px)


#mainMenu a:visited{ color: #ffffff; }
#mainMenu a:hover{ color: #ff6600; }
#mainMenu a:active{ color: #0066ff; }
#mainMenu a:hover, #mainMenu a:active{ border-bottom: 3px solid #ffcc00; }

</style>

a태그에 롤 오버 스타일입니다. 아래쪽에 3px두께의 테두리(border)를 만들도록 하였습니다.

 

롤 오버 이미지를 활용한 네비게이션 바

약간만 손을 본다면, 아래와 같은 이미지를 활용한 네비게이션 바를 만들 수 있습니다.

[ 사용한 스타일 시트 ]
 
<style type="text/css">

#mainMenu{
  list-style: none;
  margin: 0; padding: 0 0 25px 5px;

  background-color: #000000; border-bottom: 1px solid #ffcc00;
}

#mainMenu li{
 
float: left;
  margin: 0; padding: 0 10px;
}

#mainMenu a{
  display: block;
  margin: 0; padding: 5px 0 4px 0;  
  height: 16px;

  font-family: verdana; font-size: 9px; color: #ffffff; font-weight: bold;
  text-decoration:none;
}

#mainMenu a:visited{ color: #ffffff; }
#mainMenu a:hover{ color: #ff6600; }
#mainMenu a:active{ color: #0066ff; }
#mainMenu a:hover, #mainMenu a:active{

  background: url(images/line_dot.gif) no-repeat 50% 100%;

}

</style>

위와 같이, a태그의 아래쪽 테두리(border)를 없앴기 때문에, 아래여백을 (1px→4px)로 테두리 크기만큼 키워줍니다. 끝으로, 롤 오버 스타일에서, 가로는 가운데, 세로는 아래쪽에 이미지가 표현되도록 했습니다. (50% 100%)
 
이렇게 작성된 코드는, 유지/관리가 매우 쉽고 또한, 이식 작업도 매우 유용하게 합니다.

출처 : http://blog.naver.com/einmong/10011718294


출처에서 가져온 코드를 적용해 보았으나 li태그가 가로로 나오지 못했습니다..

그래서 만들어 봤습니다.

<style type="text/css">
#mainMenu { margin:0px;padding: 0px 0px 25px 5px;background-color: #000000; border-bottom: 1px solid #ffcc00;list-style:none;}
#mainMenu li{ float: left;margin: 0; padding: 0 10px;}
#mainMenu a{ float:left;display:block;padding: 5px 0px 1px 0px;  font-family: verdana; font-size: 12px; color: #ffffff; font-weight: bold;
  text-decoration:none;}
#mainMenu a:visited{ color: #ffffff; }
#mainMenu a:hover{ color: #ff6600; }
#mainMenu a:active{ color: #ffffff; }
#mainMenu a:hover, #mainMenu a:active{ border-bottom: 3px solid #ffcc00; }
</style>
</HEAD>
<BODY>
<div style="float:left;background:#DAE0D2 ;line-height:normal;">
<ul id="mainMenu">
  <li><a href="/products/">Products</a></li>
  <li><a href="/downloads/">Downloads</a></li>
  <li><a href="/purchase/">Purchase</a></li>
  <li><a href="/support/">Support</a></li>
  <li><a href="/partners/">Partners</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>
</div>



Posted by aspirinirony
AllAcc?ess2007. 2. 1. 02:55
List의 정리에 ul 과 li tag는 유용하게 사용되고 있습니다..


그러나 이 사용에 있어 Browser간의 여백 패딩 블릿이미지을 처리하는데 있어 표현의 차이가 들어납니다..

웹 페이지의 레이아웃을 유지하기 위해 table태그나 div span을 사용했다면 더욱 편리한 CSS로 이를 극복할수 있습니다.

우선 list-style:none margin-left: text-indent의 사용상 주의가 필요합니다.

IE7에 경우 text-indent값에 영향을 받지 안고 있으며 Firefox 2.0은 값의 영을 받고 있습니다.

기본적으로 margin과 padding을 설정해주는 것이 두브라우져의 레이아웃 차이를 없엘수 있습니다.

ul {margin : 0px; padding:0px;}  /* li 내에 상속됩니다.*/

=> ul {margin : 0px; padding:0px;} ;   <=이 부분을 주의 해야하는데 stylesheet를 사용하는데 있어 이 콘론은 올바른 표기법이 아닌것으로 간주하여 fox에선 무시처리를 해버리니 주의하세요..

<li> 및 display속성값이 [list-item]인 경우 다음과 같은 스타일을 적용할 수 있습니다.
* <ol> <ul> 에 다음의 속성을 지정하면, 해당 태그의 서브 <li>요소에는 모두 상속됩니다.
ol 번호가 있는 목록이며 ul은 번호가 없는 목록이지만 list라는 티를 내는 마커를 보여주죠.

=> TYPE 애트리뷰트는 LI에 개별적으로 TYPE이 지정되니 않는 한 전체 목록의 형태을 반환하거나 지정합니다. BODY에 지정된 font 애트리뷰트의 줄 높이가 UL 엘레멘트의 line-height에 상속되고 BODY의 font-size 애트리뷰트가 LI의 font-size보다 크면 LI의 항목들은 BODY의 font-size에 의하여 표현됩니다. LI 엘레멘트가 스타일쉬트(CSS)로 절대 위치를 가지면 목록 항목의 마커(marker)는 표시되지 않습니다. IE6에서 스타일 display 속성의 디폴트값은 list-item입니다.

[ 리스트 속성의 일괄 지정 ]

list-style: type image position;

리스트의 글머리표의 종류를 지정(type), 글머리표의 이미지를 지정(image) 글머리표의 표시위치 지정(position)을 지정합니다. 속성값인 type, image, position은 아래에서 설명할 속성값을 따릅니다.

[ 글머리표의 종류 지정 ]

list-style-type: disc(초기값);

글머리표의 이미지가 있는 경우에는, 이미지가 우선적으로 표시됩니다. 이미지가 없거나(none) 지정한 이미지를 표시할 수 없는 경우, 이 설정값이 유효하게 됩니다. 구버전의 IE에서는 인식되지 않으나, IE7에서는 인식이됩니다.

다음과 같은 속성값을 이용할 수 있습니다.

none : 글머리표를 표시하지 않습니다.

disc : 검은색 원(기본 값)

circls : 선으로 그려진 원

square : 선으로 그려진 사각형

lower-roman : 로마숫자 소문자

upper-roman : 로마숫자 대문자

lower-greek : 그리스 문자 소문자

decimal : 일반 숫자

decimal-leading-zero : 첫 자리에 0을 붙인 숫자

lower-latin, lower-alpha : 알파벳 소문자

upper-latin, upper-alpha : 알파벳 대문자

hebrew : 히브리 숫자

armenian : 아르메니아 숫자

georgian : 그로지아 숫자


<ul style="list-style-type: lower-roman;">

    * index
    * content
    * postscripe

[ 글머리표 이미지 지정 ]

list-style-image: url();

디폴트 값은 none입니다. 아래와 같이 사용할 수 있습니다.

<ul style="list-style-image: url(ico_note.gif);">

  • index
  • content
  • postscripe

글머리표 이미지 표시 위치 지정 ]

list-style-position: outside(초기값);

리스트 항목의 박스에 대한 글머리표의 위치를 설정하는 속성입니다.

사용할 수 있는 속성값으로는 inside 와 outside가 있으며 디폴트 값은 outside입니다.

 

<ul style="border: 1px solid; list-style-image: url(ico_note.gif);">

  • index
  • content
  • postscripe
 

<ul style="border: 1px solid; list-style-position: inside; list-style-image: url(ico_note.gif);">

  • index
  • content
  • postscripe

위 예의 경우, margin: 0; padding: 0; width: 200px로 지정되어 있습니다. 테두리를 1px로 설정하였으므로, 박스의 레이아웃은 가로 202px가 됩니다. 글머리표 이미지를 inside로 설정한 경우는 이 202px안에 모두 표기가 됩니다.

 

outside의 경우는 해당 박스의 여백이나 패딩값에 관계없이 박스의 외곽에 표기됩니다. 심지어 외곽 박스의 영역 을 침범해서라도 표기가 됩니다. 다만, 외곽 박스가 <body>인 경우에는, IE7의 경우에는 패딩영역에만 표기됩니다. 즉, FireFox2경우에는 패딩영역이든 여백(margin)영역이든 표기할 공간이 있으면 표기해 주나, IE7의 경우에는 여백(margin)영역만 존재하고 패딩영역이 없는 경우 글머리표 이미지는 표기가 되지 않습니다.

 

<ul style="border: 1px solid; list-style-position: inside; list-style-image: url(ico_note.gif);">

  <li style="list-style-position: outside;">index</li>

  • index
  • content
  • postscripe

 

이 상, 리스트 항목의 글머리표에 대한, 속성설정에 대하여 살펴보았습니다. 이 항목들만을 가지고 글머리표 레이아웃을 설정하는 방법에는 한계가 있습니다. 글머리표로 사용한 이미지의 크기에 따라, 상하 높이를 설정하는 부분이 없기 때문입니다.

 참고 사항으로 IE7에 경우 이미지와 li 내 약간의 여백이 존재하며. Fox의 경우 그림과 같이 border와 image사이의 여백이 없습니다  IE7로 볼경우와 Fox로 볼경우의 차이를 느낄려면 동일한 페이지를 두 브라우져로 동시에 보면 알수 있을 것입니다. 

ul{ list-style: none; margin: 0; padding: 0;}

따라서, 레이아웃을 위한 일반적인 사용에는 위와 같이 사용할 뿐입니다.



모든 Browser를 올바르게 처리하게 위해서 navigater를 사용할수도 있겠지만 W3C 표준을 따른다면

Borwser에 구해 받지 않을 수도 있습니다. 하지만 cursor와 같은 IE전용 태그는 유용하지만 Firefox에선 사용되지 않으며 overflow의 경우도 차이가 많이 나고 있습니다..

유용한 태그를 사용할수 있다면 Browser마다 따로 설정해주는것은 고욕이며 생산성에 문제를 느끼기에표준을 따르면서 script로 이를 대체할수 있는 방법을 개발해야 겠습니다.



Posted by aspirinirony
AllAcc?ess2007. 1. 29. 18:17
Posted by aspirinirony
«이전  1  다음»