CSS Box 스타일

 Box 스타일

■ border

   컨텐츠의 경계선을 지정

   윗쪽 border의 두께(width), 색상(color) 및 특성(style)을 지정 한다. 값은 border-width, border-style, color 값을 갖는다.

   형식

      {border : width_값 style_값 color_값}     ex) border: 1px solid black

      {border-top : width_값 style_값 color_값}

      {border-left : width_값 style_값 color_값}

      {border-right : width_값 style_값 color_값}

      {border-bottom : width_값 style_값 color_값}

   Scripting : object.style.borderTop(Right, Bottom, Left)Style [ = sStyle ] 

                  object.style.border [ = sBorder ]

   border-bottom 의 경계선은 height 속성이 부여 되지 않으면 표시되지 않는다.

■ border-width

  상하, 좌우 border의 두께를 지정 한다. 음수는 허용되지 않는다. 자체적인 foreground 특성을 가질 수 있다.

  형식

     {border-width : 속성값_1 속성값_2 속성값_3 속성값_4}

     {border-top-width : 길이 | thin | medium | thick}

     {border-left-width : 길이 | thin | medium | thick}

     {border-right-width : 길이 | thin | medium | thick}

     {border-bottom-width : 길이 | thin | medium | thick}

  값 : 길이, thin, medium, thick

  Scripting : object.style.borderTop(Right, Bottom, Left)Width [ = sWidth ] 

  예 : <p onmouseover="this.style.borderTopWidth='thin';" >....</p>

 

■ border-color

   border의 색상을 지정 한다.

    형식

      {border-color : 속성값_1 속성값_2 속성값_3 속성값_4}

      {border-top-color : 색이름 | RGB}

      {border-left-color : 색이름 | RGB}

      {border-right-color : 색이름 | RGB}

      {border-bottom-color : 색이름 | RGB}

   값 : 색이름, RGB

  Scripting : object.style.borderColor [ = sColor ] 

              object.style.borderTop(Right, Bottom, Left)Color [ = sColor ]

■ border-style

  border의 특성을 지정 한다.

  형식

    {border-style : 속성값_1 속성값_2 속성값_3 속성값_4}

    {border-top-style : none | hidden | solid | double | groove | ridge | insert | outset}

    {border-left-style : none | hidden | solid | double | groove | ridge | insert | outset}

    {border-right-style : none | hidden | solid | double | groove | ridge | insert | outset}

    {border-bottom-style : none | hidden | solid | double | groove | ridge | insert | outset}

  값

    none : 없음      hidden : 없음     dotted : 구형보양 점선    dashed : 사각형모양 점선

    solid : 실선     double : 이중선   groove : 움푹한 느낌 입체선

    ridge : 뾰적한 느낌 입체선         inset : 안으로 들어간 느낌 선

    outset : 밖으로 돌출 된 느낌 선

  Scripting:object.style.borderStyle [ = sStyle ] 

■ margin

  해당하는 내용의 위, 오른쪽, 아래쪽, 왼쪽 등의 여백을 설정 한다. 음수가 허용되나 주의 하여야 한다.

  형식

    {margin-top : 길이 | % | auto}

    {margin-right : 길이 | % | auto}

    {margin-bottom : 길이 | % | auto}

    {margin-left : 길이 | % | auto}

    {margin : 속성값_1 속성값_2 속성값_3 속성값_4} /* top right bottom  left */

 값 : 길이, %, auto

 auto를 사용 할 수 있는 css요소들 : width, margin-left,margin-right

 margin:0 auto; -> body영역에서 그 콘텐츠가 가운데로 정렬하게 된다.

 Scripting : object.style.margin [ = sMargin ] 

 - margin: <all>   //값이 하나 일때

 - margin: <top-bottom> <left-right>     //값이 2개 일때

 - margin: <top> <left-right> <bottom>   //값이 3개 일때

 - margin: <top> <right> <bottom> <left> //값이 4개 일때 //padding도 동일하다.

   margin-left/right 에 실제 숫자값이 아닌 auto라는 값을 주면 왼쪽과 오른쪽의 너비를 동일하게 하겠다는 의미.

■ padding

  상하, 좌우 padding(테두리와의 간격) 두께를 지정 한다. 음수는 허용되지 않는다.

  형식

    {padding-top : 길이 | % | auto}

    {padding-right : 길이 | % | auto}

    {padding-bottom : 길이 | % | auto}

    {padding-left : 길이 | % | auto}

    {padding : 속성값_1 속성값_2 속성값_3 속성값_4} /* top right bottom left */

  값 : 길이, %, auto

  width: auto 인 경우 padding은 무시.

  Scripting : object.style.padding [ = sPadding ]