BLOG ARTICLE 테이블 | 2 ARTICLE FOUND

  1. 2014.02.06 [CSS] 박스, 테이블 모델 (2)
  2. 2014.02.06 [CSS] 박스, 테이블 속성

[CSS] 박스, 테이블 모델 (2)

프로그래밍/CSS/HTML 2014. 2. 6. 19:45

박스모델 CSS_2편 : margin , padding 

 

 

 

아래의 그림과 같이

margin은 (border기준)바깥쪽 여백이고

padding은 (border기준) 안쪽 여백입니다.

 

 

 

스타일시트에서 사용하는 형식은

 

 

{margin:30px;} (상/하/좌/우 모두동일)
{margin:20px 40px;}  (상하 / 좌우)
{margin:0px 20px 30px;} (상 / 좌우 / 하)
{margin: 20px 30px 40px 50px;} (상 / 하 / 좌 / 우)

* (margin-top, margin-right, margin-bottom, margin-left의 형식으로 특정값 지정 가능)

 

 

{padding:30px;} (상/하/좌/우 모두동일)
{padding:20px 40px;}  (상하 / 좌우)
{padding:0px 20px 30px;} (상 / 좌우 / 하)
{padding: 20px 30px 40px 50px;} (상 / 하 / 좌 / 우)

* (padding-top, padding-right, padding-bottom, padding-left의 형식으로 특정값 지정 가능)

 

 

>결과가 눈에 잘 보이지 않아서 결과는 생략 하였습니당~

 

 

단, margin 사용시 주의하실점이 있습니다~

 

 

두개 이상의 margin값이 세로 방향으로 만났을 경우

하나의 margin으로 합쳐지는 현상이 발생하니 주의해서 사용하세요~ 

이상입니다~

 

 

 

[출처] [CSS]박스모델 CSS-2편|작성자 Yun

저작자표시

'프로그래밍 > CSS/HTML' 카테고리의 다른 글

[CSS] 박스, 테이블 속성  (0) 2014.02.06
[CSS] css 선택자, 속성  (0) 2014.02.06
AND

[CSS] 박스, 테이블 속성

프로그래밍/CSS/HTML 2014. 2. 6. 19:43

 

박스모델  CSS속성 -1편

 

width / height / border

 

 

 

간단하게 width / height / border 에 대해서 알아볼게요! 

(width와 height는 잘 아실걸로 생각하고 PASS하겠습니다.)

 

 

 

 

border는 테두리와 관련된 속성입니다.

 

 

이렇게 사용하시면 되는데요, 사용할 수 있는 모양의 값은

solid, dashed, dotted, groove, outset , hidden, ridge, inset, putset 등이 있습니다.

 

 

 

 

결과부터 보도록 하겠습니다!

박스 모양을 다양하게 활용할 수 있겠네요!!

 


 

<!DOCTYPE html>
    <html>
       <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
            <title></title>
            <style type="text/css">
                 p{width:400px; height:70px;}   /*p태그의 모든 사이즈를 한번에 지정해 주었습니다.*/
                 .box1 {none; /* border:0 */}
                 .box2 {hidden;}
                 .box3 {border:3px dotted #333;}
                 .box4 {border:3px dashed #333;}
                 .box5 {border:3px solid #333;}
                 .box6 {border:3px double #333;}
                 .box7 {border:3px groove #333;}
                 .box8 {border:3px ridge #333;}
                 .box9 {border:3px inset #333;}
                 .box10 {border:3px outset #333;}
                 .box11 {border-top:1px solid #333; border-bottom:1px solid #333;}
              </style>

      </head> 

    

      <body>
             <p class="box1" style="border-style:1px;">box1-박스의 테두리가 none으로 지정된 경우</p>
             <p class="box2">box2-박스의 테두리가 hidden으로 지정된 경우</p>
             <p class="box3">box3-박스의 테두리가 dotted로 지정된 경우</p>
             <p class="box4">box4-박스의 테두리가 dashed로 지정된 경우</p>
             <p class="box5">box5-박스의 테두리가 solid로 지정된 경우</p>
             <p class="box6">box-6박스의 테두리가 double로 지정된 경우</p>
             <p class="box7">box-7박스의 테두리가 groove로 지정된 경우</p>
             <p class="box8">box-8박스의 테두리가 ridge로 지정된 경우</p>
             <p class="box9">box-9박스의 테두리가 inset으로 지정된 경우</p>
             <p class="box10">box-10박스의 테두리가 outset으로 지정된 경우</p>
             <p class="box11">box-11박스의 테두리를 위와 아래만 주기!</p>
 </body>
</html>

이상입니당~

 

 

 

[출처] [CSS] 박스모델 CSS속성 -1편|작성자 Yun

 

저작자표시

'프로그래밍 > CSS/HTML' 카테고리의 다른 글

[CSS] 박스, 테이블 모델 (2)  (0) 2014.02.06
[CSS] css 선택자, 속성  (0) 2014.02.06
AND

티스토리툴바