본문 바로가기

   
Programming/CSS

CSS 레이아웃:border

반응형

CSS 레이아웃:border

exam.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

        <head>

               <title></title>

               <meta name="generator" content="editplus" />

               <meta name="author" content="김종현" />

               <style type="text/css">

                       #box1 {

                              width:100px;

                              height:100px;

                             

                              border:1px orange solid;

                              /*

                              border-style:solid;

                              border-color:orange;

                              border-width:1px;

                              */

                              font-size:12px;

 

 

                       }

 

                       #box2 {

                              width:100px;

                              height:100px;

                              border:dotted orange 1px;

                       }

 

                       #box3 {

                              width:100px;

                              height:100px;                        

                              border:inset orange 7px;

                       }

 

                       #item {

                              font-size:12px;

                               /*

                              border:10px dotted red;

                              border-top-style:dotted;

                              border-bottom-width:1px;

                              border-left-color:yellow;

                              */

 

                              border:1px solid red;

                              /*그룹화 순서 12시방향에서 시계방향으로 돌아간다. top right bottom left*/

                              /*

                              border-width:5px 15px 30px 45px;

                              border-width:10px 30px;

                              */

                              border-width:1px 12px;

                              padding:3px;

 

                       }

               </style>

        </head>

 

        <body>

               <!-- Ex19_border.htm -->

               <div id="box1">div 상자라는 개념에 가장 근접한 개념이라 div태그를 많이 사용한다.</div>

               <br />

 

               <div id="box2">div 상자라는 개념에 가장 근접한 개념이라 div태그를 많이 사용한다.</div>

               <br />

 

               <div id="box3">div 상자라는 개념에 가장 근접한 개념이라 div태그를 많이 사용한다.</div>

               <br /><br />

 

               <div id="item">테두리를 위아래 왼쪽 오른쪽 각각 스타일을 줄수 있다.</div>

               <br />

               <p>그룹화 순서 12시방향에서 시계방향으로 돌아간다. top right bottom left</p>

        </body>

</html>

결과



반응형