6. margin, padding, border 속성 -바닥부터 시작하는 CSS-

2016. 12. 30. 08:17 from COMPUTER/CSS


6. margin, padding, border 속성     -바닥부터 시작하는 CSS-      

 

block요소로 레이아웃을 만들 때

contents: block요소 안에 있는 내용.

border : block요소의 경계선.

padding : block요소 경계선(border)과 컨텐츠 사이의 간격을 말함.

margin : block요소 경계선 외부에 존재하는 보이지않는 공백을 말함.

 

width, height : block요소의 내부영역의 크기를 지정한다. 실제 박스의 크기는 다르다. 박스의 크기를 구할 때는 

일반적으로 아래의 공식을 사용하지만 브라우저가 다 맞지는 않는다. 


 박스의 폭 = 좌우 마진 + 좌우 테두리 + 좌우 패딩 + width

박스의 높이 = 상하 마진 + 상하 테두리 + 상하 패딩 + height

IE 비표준 모드에서는 내부영역 + 패딩 + 마진 = width (또는 height)가 된다.

 

width와 height 속성만 지정한 예

예 6-1

pop-uptext
  1. <html>
  2.   <style>
  3.     body {
  4.       margin: 0;
  5.     }
  6.     .div1 {
  7.       width: 100px;
  8.       height: 100px;
  9.       background: pink;
  10.       text-align: center;
  11.     }
  12.   </style>
  13.   <body>
  14.     <div class="div1">div1</div>
  15.   </body>
  16. </html>

 

border 속성을 지정한 예

예 6-2

pop-uptext
  1. <html>
  2.   <style>
  3.     body {
  4.       margin: 0;
  5.     }
  6.     .div1 {
  7.       width: 100px;
  8.       height: 100px;
  9.       border: 5px solid;
  10.       background: pink;
  11.       text-align: center;
  12.     }
  13.   </style>
  14.   <body>
  15.     <div class="div1">div1</div>
  16.   </body>
  17. </html>


margin 속성을 지정한 예

예 6-3

pop-uptext
  1. <html>
  2.   <style>
  3.     body {
  4.       margin: 0;
  5.     }
  6.     .div1 {
  7.       width: 100px;
  8.       height: 100px;
  9.       border: 5px solid;
  10.       margin: 10px;
  11.       background: pink;
  12.       text-align: center;
  13.     }
  14.   </style>
  15.   <body>
  16.     <div class="div1">div1</div>
  17.   </body>
  18. </html>

 

padding 속성을 지정한 예

예 6-4

pop-uptext
  1. <html>
  2.   <style>
  3.     body {
  4.       margin: 0;
  5.     }
  6.     .div1 {
  7.       width: 100px;
  8.       height: 100px;
  9.       border: 5px solid;
  10.       margin: 10px;
  11.       padding: 10px;
  12.       background: pink;
  13.       text-align: center;
  14.     }
  15.   </style>
  16.   <body>
  17.     <div class="div1">div1</div>
  18.   </body>
  19. </html>


1. margin 속성

일괄 지정

margin:

값이 하나일 경우 : '상하좌우’

값이 두 개일 경우 : '상하' '좌우’

값이 세 개일 경우 : '상' '좌우' '하’

값이 네 개일 경우 : '상' '우' '하' '좌' (시계 방향으로 돌아가며 지정된다.)

각각의 값은 공백으로 구분한다.

 

부분 지정

margin-top:

margin-right:

margin-bottom:

margin-left:

 

px, pt, em, %, auto, inherit 등의 값이 올 수 있고 기본 값은 0 이다.(음수 값도 허용됨)

테이블의 내부요소를 제외한 모든 요소에 적용될 수 있다.

 

block요소에 width 값을 가로길이보다 작게 설정한 경우, 좌우margin 값에 'auto'를 지정하면 박스 자체가 화면의 가로 중앙에 

정렬이 된다.(박스안의 내용이 중앙 정렬이 되는 것이 아님)


예 6-5

pop-uptext
  1. <html>
  2.   <style>
  3.     body {
  4.       margin: 0;
  5.     }
  6.     .div1 {
  7.       width: 100px;
  8.       height: 100px;
  9.       border: 5px solid;
  10.       margin: 0 auto;
  11.       padding: 10px;
  12.       background: pink;
  13.     }
  14.   </style>
  15.   <body>
  16.     <div class="div1">div1</div>
  17.   </body>
  18. </html>


block요소의 세로 정렬은 배우 까다로운 문제이다. 무작정 상하 margin을 auto를 준다고 되는 것도 아니다. 

이 문제는 다음 기회에 따로 설명하기로 한다.


 

2. padding 속성 (margin과 거의 같다고 봐라)


일괄 지정

padding:

값이 하나일 경우 : '상하좌우’

값이 두 개일 경우 : '상하' '좌우’

값이 세 개일 경우 : '상' '좌우' '하’

값이 네 개일 경우 : '상' '우' '하' '좌' (시계 방향으로 돌아가며 지정된다.)

각각의 값은 공백으로 구분한다.

 

개별 지정

padding-top:

padding-right:

padding-bottom:

padding-left:

 

px, pt, em, %, inherit 등의 값이 올 수 있고 기본 값은 0 이다.(margin과 달리 음수 값은 허용이 안 되고 auto 값은 없음)

테이블 관련 요소 중 셀 요소를 제외한 다른 요소에는 적용이 안 되고, 그 외의 요소에는 모두 적용된다.


예 6-6

pop-uptext
  1. <html>
  2.   <style>
  3.     body {
  4.       margin: 0;
  5.     }
  6.     .div1 {
  7.       width: 100px;
  8.       height: 100px;
  9.       border: 1px solid;
  10.       background: pink;
  11.     }
  12.     .div2 {
  13.       width: 100px;
  14.       height: 100px;
  15.       border: 1px solid;
  16.       padding: 10px;
  17.       background: pink;
  18.     }
  19.   </style>
  20.   <body>
  21.     <div class="div1">padding 없는 div1</div>
  22.     <div class="div2">padding 있는 div1</div>
  23.   </body>
  24. </html>

box가 padding을 가지면 커져버린다.

글자(컨텐츠)와 경계선의 간격이 벌어진다.


 

3. border 속성

border 속성 값에는 다음과 같이 세 가지가 있고 모든 요소에 적용 가능하다.


border-width :

굵기 (thin, medium(기본 값), thick, 길이, inherit)


예 6-7

pop-uptext
  1. <html>
  2.   <style>
  3.     body {
  4.       margin: 0;
  5.     }
  6.     .div1 {
  7.       width: 200px;
  8.       border: thin solid;
  9.       background: coral;
  10.     }
  11.     .div2 {
  12.       width: 200px;
  13.       border: medium solid;
  14.       /*기본 값*/
  15.       background: coral;
  16.     }
  17.     .div3 {
  18.       width: 200px;
  19.       border: thick solid;
  20.       background: coral;
  21.     }
  22.     .div4 {
  23.       width: 200px;
  24.       border: 6px solid;
  25.       background: coral;
  26.     }
  27.   </style>
  28.   <body>
  29.     <div class="div1">border: thin div1</div>
  30.   </br>
  31.   <div class="div2">border: medium div2</div>
  32. </br>
  33. <div class="div3">border: thick div3</div>
  34. </br>
  35. <div class="div4">border: 6px div4</div>
  36. </body>
  37. </html>

 

border-style :

모양 (none(기본 값), hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit 등)


예 6-8

pop-uptext
  1. <html>
  2.   <style>
  3.     body {
  4.       margin: 0;
  5.       background: linen;
  6.     }
  7.     .div1 {
  8.       width: 200px;
  9.       border: 2px none;
  10.       background: peru;
  11.     }
  12.     .div2 {
  13.       width: 200px;
  14.       border: 2px hidden;
  15.       background: peru;
  16.     }
  17.     .div3 {
  18.       width: 200px;
  19.       border: 2px dotted;
  20.       background: peru;
  21.     }
  22.     .div4 {
  23.       width: 200px;
  24.       border: 2px dashed;
  25.       background: peru;
  26.     }
  27.     .div5 {
  28.       width: 200px;
  29.       border: 2px solid;
  30.       background: peru;
  31.     }
  32.     .div6 {
  33.       width: 200px;
  34.       border: 3px double;
  35.       background: peru;
  36.     }
  37.     .div7 {
  38.       width: 200px;
  39.       border: 5px groove;
  40.       background: peru;
  41.     }
  42.     .div8 {
  43.       width: 200px;
  44.       border: 5px ridge;
  45.       background: peru;
  46.     }
  47.     .div9 {
  48.       width: 200px;
  49.       border: 5px inset;
  50.       background: peru;
  51.     }
  52.     .div10 {
  53.       width: 200px;
  54.       border: 5px outset;
  55.       background: peru;
  56.     }
  57.   </style>
  58.   <body>
  59.     <div class="div1">border:none div1</div>
  60.   </br>
  61.   <div class="div2">border: hidden div2</div>
  62. </br>
  63. <div class="div3">border: dotted div3</div>
  64. </br>
  65. <div class="div4">border: dashed div4</div>
  66. </br>
  67. <div class="div5">border: solid div5</div>
  68. </br>
  69. <div class="div6">border: double div6</div>
  70. </br>
  71. <div class="div7">border: groove div7</div>
  72. </br>
  73. <div class="div8">border: ridge div8</div>
  74. </br>
  75. <div class="div9">border: inset div9</div>
  76. </br>
  77. <div class="div10">border: outset div10</div>
  78. </body>
  79. </html>

 

border-color :

색상 (Hexadecimal color<가장 많이 사용>, RGB color, RGBA color, HSL color, HSLA color, Predefined/Cross-browser color names<색 이름을 사용>, transparent<투명을 지정>, inherit<상속 받음>)

(기본 값: 글자의 색을 따른다.)

 

Hexadecimal color

{ border-color:#00ff00; }

 

RGB color :

{ border-color:rgb(255,0,0); }

 

RGBA color : RGB+Alpha값(=투명도 값을 말한다)

{ border-color:rgba(255,0,0,0.5); } /* 0은 투명, 1은 불투명 */

 

HSL color :

hsl은 색조(hue), 채도(Saturation), 밝기(Lightness)를 의미하며 hue의 수치는 0부터 360으로 색상환의 각도를 의미함.

0과 360도: R(빨간색)

120도: 녹색(G)

240도: 파란색(B)

채도와 밝기는 백분율로 표기함.

{ border-color:hsl(120,65%,75%); }

 

HSLA color : HSL+Alpha값(=투명도 값을 말한다)

{ border-color:hsla(120,65%,75%,0.3); } /* 0은 투명, 1은 불투명 */


예 6-9

pop-uptext
  1. <html>
  2.   <style>
  3.     body {
  4.       margin: 0;
  5.     }
  6.     .div1 {
  7.       width: 200px;
  8.       border: 5px solid;
  9.       border-color: #0000ff;
  10.       background: plum;
  11.     }
  12.     .div2 {
  13.       width: 200px;
  14.       border: 5px solid;
  15.       border-color: rgb(255,0,0);
  16.       background: plum;
  17.     }
  18.     .div3 {
  19.       width: 200px;
  20.       border: 5px solid;
  21.       border-color: rgba(255,0,0,0.5);
  22.       background: plum;
  23.     }
  24.     .div4 {
  25.       width: 200px;
  26.       border: 5px solid;
  27.       border-color: hsl(120,65%,75%);
  28.       background: plum;
  29.     }
  30.     .div5 {
  31.       width: 200px;
  32.       border: 5px solid;
  33.       border-color: hsla(120,65%,75%,0.3);
  34.       background: plum;
  35.     }
  36.     .div6 {
  37.       width: 200px;
  38.       border: 5px solid;
  39.       border-color: aqua;
  40.       background: plum;
  41.     }
  42.   </style>
  43.   <body>
  44.     <div class="div1">border-color: #0000ff; div1</div>
  45.   </br>
  46.   <div class="div2">border-color:rgb(255,0,0); div2</div>
  47. </br>
  48. <div class="div3">border-color:rgba(255,0,0,0.5); div3</div>
  49. </br>
  50. <div class="div4">border-color:hsl(120,65%,75%); div4</div>
  51. </br>
  52. <div class="div5">border-color:hsla(120,65%,75%,0.3); div5</div>
  53. </br>
  54. <div class="div6">border-color:aqua; div6</div>
  55. </body>
  56. </html>


border 설정의 예)


개별적 너비 설정

border-top-width

border-right-width

border-bottom-width

border-left-width

 

일괄적 너비 설정

border-width:상 우 하 좌; /* 값이 4 개

border-width:상 좌우 하; /* 값이 3 개

border-width:상하 좌우; /* 값이 2 개

border-width:상하좌우; /* 값이 1 개


개별적 색 설정

border-top-color

border-right-color

border-bottom-color

border-left-color


일괄적 색 설정

border-color:상 우 하 좌; /* 값이 4 개

border-color:상 좌우 하; /* 값이 3 개

border-color:상하 좌우; /* 값이 2 개

border-color:상하좌우; /* 값이 1 개

 

개별적 스타일 설정

border-top-style

border-right-style

border-bottom-style

border-left-style

 

일괄적 스타일 설정

border-style:상 우 하 좌; /* 값이 4 개

border-style:상 좌우 하; /* 값이 3 개

border-style:상하 좌우; /* 값이 2 개

border-style:상하좌우; /* 값이 1 개

 

통합 설정하기

width, style, color의 순서는 상관없고 생략도 가능. 생략 시는 기본 값으로 대치됨.

style을 생략하면 기본 값이 none이므로 아무 변화가 없다. 그러니 style 값은 꼭 넣어라.

border: width style(꼭 필요) color;

 

부위별 통합 설정.

border-top: width style color;

border-right: width style color;

border-bottom: width style color;

border-left: width style color;

 

4. border-radius 속성

CSS3에 추가된 속성으로 축약 속성이며 4방향의 모서리에 지정될 반지름을 지정해서 둥근 모서리를 만들 때 사용한다.

top-left, top-right, bottom-right. bottom-left 순서로 값이 지정됨.(좌상에서 시계방향으로 돌아 좌하에서 끝남.)

배경 이미지를 지정하면 모서리가 둥근 이미지도 만들어 낼 수 있다.

 

px, pt, em, % 등으로 반지름의 길이를 지정한다.




그림에서 보는 것처럼 원형 또는 타원형의 모양을 구사할 수 있다.

타원형을 구사할 경우 "가로반지름값/세로반지름값" 형식으로 기록한다.

 

원형: 일괄 반지름 지정. (마진이나 패딩의 경우와 흡사하게 적용된다)

border-radius: 좌상 우상 우하 좌하; /* 값이 4 개인 경우 */

border-radius: 좌상 우상=좌하 우하; /* 값이 3 개인 경우 */

border-radius: 좌상=우하 우상=좌하; /* 값이 2 개인 경우 */

border-radius: 좌상=우상=좌하=우하; /* 값이 1 개인 경우 */

 

각 모서리에 같은 값을 준 경우

예 6-10

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       div {
  5.         border: 2px solid #a1a1a1;
  6.         padding: 10px 40px;
  7.         background: #dddddd;
  8.         width: 300px;
  9.         border-radius: 20px;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <div>The border-radius 속성으로 둥근 모서리의 box를 만들 수 있다</div>
  15.   </body>
  16. </html>

 

각 모서리에 다른 값을 준 경우

예 6-11

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       div {
  5.         border: 2px solid #a1a1a1;
  6.         padding: 10px 40px;
  7.         background: #dddddd;
  8.         width: 300px;
  9.         border-radius: 20px 30px 40px 50px;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <div>The border-radius 속성으로 둥근 모서리의 box를 만들 수 있다</div>
  15.   </body>
  16. </html>

 

두 개의 값을 사용한 경우 좌상=우하, 우상=좌하

예 6-12

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       div {
  5.         border: 2px solid #a1a1a1;
  6.         padding: 10px 40px;
  7.         background: #dddddd;
  8.         width: 300px;
  9.         border-radius: 10px 50px;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <div>The border-radius 속성으로 둥근 모서리의 box를 만들 수 있다</div>
  15.   </body>
  16. </html>

 

타원형: 원형: 일괄 반지름 지정.

border-radius: 좌상 우상 우하 좌하 / 좌상 우상 우하 좌하; /* 값이 4 개*/

"/"를 기준으로 왼쪽 값은 타원의 가로 반지름이고 오른쪽 값은 세로 반지름이 된다.

%를 사용하면 해당 박스의 가로, 세로 길이를 기준으로 한다. 각 모서리에서 50%를 주면 원형이 된다.

"/"를 기준으로 좌우 값은 1~4개를 사용할 수 있고 적용규칙은 위와 같다.

 

타원의 모서리를 만들 경우

예 6-13

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       div {
  5.         border: 2px solid #a1a1a1;
  6.         padding: 10px 40px;
  7.         background: #dddddd;
  8.         width: 300px;
  9.         border-radius: 50px /30px;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <div>The border-radius 속성으로 둥근 모서리의 box를 만들 수 있다</div>
  15.   </body>
  16. </html>

 

개별적 반지름 지정.

border-top-left-radius:

border-top-right-radius:

border-bottom-right-radius:

border-bottom-left-radius:

 

5. border-collapse 속성

 

<table>태그에 사용되는 CSS속성으로 각 셀간의 간격이 생기는 것을 없애준다.

 

table {border-collapse: collapse;}

 

collapse : 각 셀의 테두리가 합쳐진다.

separate : 각 셀의 테두리가 분리된다.(기본 값)

inherit : 부모 요소로부터 값을 상속 받는다.

 

예 6-14

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       .table1 {
  5.         border-collapse: collapse;
  6.       }
  8.       table,
  9.       td,
  10.       th {
  11.         border: 1px solid black;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <p>
  17.       일반 테이블</p>
  18.     <table>
  19.       <tr>
  20.         <th>과일</th>
  21.         <th>생선</th>
  22.       </tr>
  23.       <tr>
  24.         <td>사과</td>
  25.         <td>조기</td>
  26.       </tr>
  27.       <tr>
  28.         <td>포도</td>
  29.         <td>고등어</td>
  30.       </tr>
  31.     </table>
  32.     <br/>
  33.     <p>collapse 테이블</p>
  34.     <table class="table1">
  35.       <tr>
  36.         <th>과일</th>
  37.         <th>생선</th>
  38.       </tr>
  39.       <tr>
  40.         <td>사과</td>
  41.         <td>조기</td>
  42.       </tr>
  43.       <tr>
  44.         <td>포도</td>
  45.         <td>고등어</td>
  46.       </tr>
  47.     </table>
  49.     <p>
  50.       <b>알림:</b>
  51.       IE8이전 버전에서는 !DOCTYPE을 명시하지 않을 경우 예상치 않는 결과가 나올 수도 있다.</p>
  52.   </body>
  53. </html>

 

6. border-spacing

<table>태그 사용 시 바깥 경계선과 셀 사이의 거리를 지정하는데 border-collapse 속성이 separate일 경우만 가능.

(collapse라면 경계선이 없는 상태가 되므로 작동 안함)

 

length length : cm, mm, in, pt, pc 또는 em, ex, px등을 사용함.

첫 번째 값은 좌우, 두 번째 상하 값이며 하나의 값을 사용할 경우 상하좌우가 모두 적용된다.

 

예 6-15

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table.ex1 {
  5.         border-collapse: separate;
  6.         border-spacing: 10px 30px;
  7.       }
  8.     </style>
  9.   </head>
  10.   <body>
  11.     <b>적용 전</b>
  12.     <table border="1">
  13.       <tr>
  14.         <td>사과</td>
  15.         <td>배</td>
  16.       </tr>
  17.       <tr>
  18.         <td>감자</td>
  19.         <td>고구마</td>
  20.       </tr>
  21.     </table>
  22.     <br/>
  23.     <b>적용 후</b>
  24.     <table border="1" class="ex1">
  25.       <tr>
  26.         <td>사과</td>
  27.         <td>배</td>
  28.       </tr>
  29.       <tr>
  30.         <td>감자</td>
  31.         <td>고구마</td>
  32.       </tr>
  33.     </table>
  35.     <p>
  36.       <b>알림:</b>
  37.       IE8은 !DOCTYPE을 선언해야 지원됩니다.</p>
  39.   </body>
  40. </html>
  41. </tr>
  42. <tr>
  43. <td>감자</td>
  44. <td>고구마</td>
  45. </tr>
  46. </table>
  47. <br>
  48. <table border="1" class="ex1">
  49. <tr>
  50. <td>사과</td>
  51. <td>배</td>
  52. </tr>
  53. <tr>
  54. <td>감자</td>
  55. <td>고구마</td>
  56. </tr>
  57. </table>
  58. <p>
  59. <b>알림:</b>
  60. IE8은 !DOCTYPE을 선언해야 지원됩니다.</p>
  61. </body>
  62. </html>

 

7. border-image관련

자주 쓰이지 않으므로 다음기회에 설명하기로 함.


저작자표시 비영리 변경금지

'COMPUTER > CSS' 카테고리의 다른 글

8. font 관련 속성들 -바닥부터 시작하는 CSS-  (0) 2017.01.07
7. text에 관련된 속성들 -바닥부터 시작하는 CSS-  (0) 2017.01.05
5. position 속성 -바닥부터 시작하는 CSS-  (0) 2016.12.24
4. float 속성 -바닥부터 시작하는 CSS-  (0) 2016.12.08
CSS의 절대단위와 상대단위 -막간학습-  (0) 2016.12.07
Posted by star story :

티스토리툴바

Snippet :: Code View :: "+location.href+' 
'+b+"

티스토리툴바

");top.consoleRef.document.close()}$(".snippet-container").each(function(b){$(this).find("a.snippet-text").click(function(){var d=$(this).parents(".snippet-wrap").find(".snippet-formatted");var c=$(this).parents(".snippet-wrap").find(".snippet-textonly");d.toggle();c.toggle();if(c.is(":visible")){$(this).html("html")}else{$(this).html("text")}return false});$(this).find("a.snippet-window").click(function(){var c=$(this).parents(".snippet-wrap").find(".snippet-textonly").html();a(c);$(this).blur();return false})});$(".snippet-toggle").each(function(b){$(this).click(function(){$(this).parents(".snippet-container").find(".snippet-wrap").toggle()})})});