개발 공부 기록하기

DAY 16. 여백 조절하는 속성: margin, padding 본문

프밍/CSS

DAY 16. 여백 조절하는 속성: margin, padding

태영(泰伶) 2022. 11. 11. 23:47

두 박스 모델 사이 여백 = 마진margin

한 박스 모델에서 테두리와 내용 사이 여백 = 패딩padding

 

한 번 만들어둔 것 잘 써먹는다ㅋㅋㅋ;;

 

1. 요소 주변 여백 margin 설정

     요소와 요소 사이의 간격을 조절할 때, 이 마진margin이라는 속성의 값을 건드리면 된다.

 

     margin: <크기> | <백분율> | auto ;

 

   

속성값 설명 예시
<크기> 너빗값, 높잇값을 px, em과 같은 단위와 수치로 지정. margin: 50px;
<백분율> 박스 모델을 포함한 부모 요소를 기준으로 너빗값, 높잇값을 %로 지정. margin: 0.1%;
auto display 속성에서 지정한 값에 맞게 적절한 값을 자동 지정.  

 

     전날 했던 테두리 디자인을 할 때처럼 margin도 상하좌우를 다르게 설정할 수 있다.

 

     margin-top, margin-right, margin-bottom, margin-left이 그것이다.

 

     이렇게 따로따로 설정하려고 값을 따로 적는 경우는,

     전날 했던 것처럼 순서는 top, right, bottom, left로 시계방향 순서대로 써 준다!

 

 

예제 1.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>박스모델 - 마진</title>
         <style>
            div {
              width: 200px;
              height: 100px;
              display: inline-block;
              border: 1px solid #222;
            }
            #margin1 {
               margin: 50px;				/* 상하좌우 4개 방향의 마진 모두 50px */
            }
            #margin2 {
               margin: 30px 50px;			/* 상하 마진 30px, 좌우 마진 50px */
            }
            #margin3 {
               margin: 30px 20px 50px;		/* 위 마진 30px, 오른쪽 마진 20px, 아래 마진 50px, 왼쪽 마진은 오른쪽 따라서 20px */
            }
            #margin4 {
               margin: 30px 50px 30px 50px;	/* 상하 마진 30px, 좌우 마진 50px */
            }
            #margin5 {
               margin-right: 20px;			/* 오른쪽 마진만 20px */
            }
         </style>
      </head>
      <body>
         <div id="margin1"></div>
         <div id="margin2"></div>
         <div id="margin3"></div>
         <div id="margin4"></div>
         <div id="margin5"></div>
      </body>
   </html>

↓

5개의 박스모델 각각에 둘러씌워진 주황색 margin 표시를 동시에 볼 수 있도록 캡처한 사진을 편집했다. 원래는 한 화면에서 이렇게 볼 수 없다(현재까지의 지식으로는 그렇다).

 

 

웹 문서 가운데 정렬

이런 margin 속성을 응용해서 웹 문서를 브라우저 화면의 가운데로 정렬할 수 있다.

우선, 가운데 정렬을 하려면 페이지상에 배치할 요소의 너빗값이 정해져 있어야 한다..!!

   ⇒ 요소가 차지한 너비 빼고 나머지를 CSS가 좌우 마진으로 자동 계산한다.

 

예제 2.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title></title>
         <style>
            body {
              background-color: #222;
            }
            #container {
              background-color: #fff;
              width:600px;
              margin: 20px auto;
              padding: 20px;
            }
            table, th, td {
              border: 1px solid #ccc;
              border-collapse: collapse;
            }
            th, td {
              padding: 10px 20px;
            }
         </style>
      </head>
      <body>
         <div id="container">
            <h1>레드향</h1>
            <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
            <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로 <br/>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
            <p>비타민 C와 비타민 P가 풍부해<br/> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
            <hr>
            <h2>레드향 샐러드 레시피</h2>
            <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
            <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
            <ol>
               <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
               <li>레드향과 아보카도, 토마토를 먹기 좋은 크기로 썰어둡니다.</li>
               <li>드레싱 재로를 믹서에 갈아줍니다.</li>
               <li>볼에 샐러드 채소와 썰어둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
            </ol>
            <hr>
            <h2>상품 구성</h2>
            <table>
               <caption>선물용과 가정용 상품 구성</caption>
               <colgroup>
                 <col style="background-color: #eee;">
                 <col>
                 <col span="2" style="width: 150px;">
               </colgroup>
               <thead>
                 <tr>
                   <th>용도</th>
                   <th>중량</th>
                   <th>갯수</th>
                   <th>가격</th>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                   <td rowspan="2">선물용</td>
                   <td>3kg</td>
                   <td>11~16과</td>
                   <td>35,000원</td>
                 </tr>
                 <tr>
                   <td>5kg</td>
                   <td>18~26과</td>
                   <td>52,000원</td>
                 </tr>
                 <tr>
                   <td rowspan="2">가정용</td>
                   <td>3kg</td>
                   <td>11~16과</td>
                   <td>30,000원</td>
                 </tr>
                 <tr>
                   <td>5kg</td>
                   <td>18~26과</td>
                   <td>47,000원</td>
                 </tr>
               </tbody>
            </table>
         </div>
      </body>
   </html>

↓

 

 

 

마진의 중첩margin overlap (= 마진 상쇄margin collapse)

 

     박스 모델이 세로로 이어질 때, 각 박스 모델 간의 간격을 의미하는 margin은

     작성자의 의도와는 다르게 더 큰 마진 하나만 남기고 합쳐져 버린다.

 

예제 3.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>박스모델 - 마진 중첩</title>
         <style>
            * {
              box-sizing: border-box;
            }
            div {
              width: 200px;		/* 너비 */
              height: 100px;		/* 높이 */
              margin: 30px;		/* 마진 */
            }
            #box1 { background: rgb(0, 77, 243); }
            #box2 { background: rgb(255, 72, 0); }
            #box3 { background: rgb(18, 219, 0); }
         </style>
      </head>
      <body>
         <div id="box1"></div>
         <div id="box2"></div>
         <div id="box3"></div>
      </body>
   </html>

↓

분명 각 상자 사이 간격이 div의 디자인을 따르자면 60px가 되었어야 맞다. but 현재 각각 30px이다.

     이렇게 된 이유!

          ⇒ 최상단, 최하단의 마진 크기 vs. 중간 마진 크기

                   → 중간 마진이 최상단 마진, 최하단 마진보다 지나치게 커지는 것 방지!

 

     중요한 건, 마진의 중첩은 아래위로 놓인 박스모델간에만 발생하지, 좌우간 박스모델에서는 발생하지 않는다는 점!!!

 

 

 

 

 

2. 콘텐츠와 테두리 사이 여백 padding 설정

     콘텐츠와 테두리 사이 여백을 말하는 padding 역시 상하좌우 각각을 다르게 지정할 수 있다.

 

     역시 같은 방법으로

     padding-top, padding-right, padding-bottom, padding-left

     의 방식으로 작성한다.

 

     이렇게 따로따로 설정하려고 값을 따로 적는 경우는,

     전날 했던 것처럼 순서는 top, right, bottom, left로 시계방향 순서대로 써 준다!

 

예제 4.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>박스모델 - 패딩</title>
         <style>
            h1 {
              display: inline-block;
              border: 1px solid #000;
            }            
            #padding1 { 
               padding: 20px 30px 40px 50px;
            }
            #padding2 {
               padding: 20px 30px; 
            }
            #padding3 {
               padding: 20px;
            }
         </style>
      </head>
      <body>
         <h1>레드향</h1>
            <h1 id="padding1">레드향</h1>
            <h1 id="padding2">레드향</h1>
            <h1 id="padding3">레드향</h1>
      </body>
   </html>

↓

4개의 박스모델 각각에 둘러씌워진 초록색 padding 표시를 동시에 볼 수 있도록 캡처한 사진을 편집했다. 원래는 한 화면에서 이렇게 볼 수 없다(현재까지의 지식으로는 그렇다).

 

 

 

 

 

 

 

책에 있는 실습.

table, th, td {
  border:1px solid #ccc;
  border-collapse: collapse;
}
th, td { 
  padding:10px 20px; 
}
div {
  border:1px solid #222;  /* 테두리 */
  padding: 20px;            /* 패딩 */
  margin-bottom: 30px;      /* 마진 */
}
#container {
  width:600px;  /* 컨테이너의 너비 */
  border:none;    /* 테두리 없앰 */
  margin: 0 auto; /* 화면 중앙에 배치 */
}
#description {
  border-top-left-radius: 30px;   /* 왼쪽 위 꼭짓점을 둥글게 */
  border-top-right-radius: 30px;  /* 오른쪽 위 꼭짓점을 둥글게 */
}
#package {
  border-bottom-left-radius: 30px;    /* 왼쪽 아래 꼭짓점을 둥글게 */
  border-bottom-right-radius: 30px;   /* 오른쪽 아래 꼭짓점을 둥글게 */
}
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="css/product-tmp.css">
</head>
<body>
  <div id="container">
    <div id="description">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
      <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
    </div>
    <div id="receipe">
      <h2>레드향 샐러드 레시피</h2>
      <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
      <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
      <ol>
        <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
        <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
        <li>드레싱 재료를 믹서에 갈아줍니다.</li>
        <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
      </ol>
    </div>   
    <div id="package">
      <h2>상품 구성</h2>
      <table>
        <caption>선물용과 가정용 상품 구성</caption>
        <colgroup>
          <col style="background-color:#eee;">
          <col>
          <col span="2" style="width:150px">
        </colgroup>
        <thead>
          <tr>
            <th>용도</th>
            <th>중량</th>
            <th>갯수</t>
            <th>가격</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2">선물용</td>
            <td>3kg</td>
            <td>11~16과</td>
            <td>35,000원</td>
          </tr>
          <tr>
            <td>5kg</td>
            <td>18~26과</td>
            <td>52,000원</td>
          </tr>
          <tr>
            <td rowspan="2">가정용</td>
            <td>3kg</td>
            <td>11~16과</td>
            <td>30,000원</td>
          </tr>   
          <tr>
            <td>5kg</td>
            <td>18~26과</td>
            <td>47,000원</td>
          </tr>
        </tbody>        
      </table>      
    </div>
  </div>
</body>
</html>

↓

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

'프밍 > CSS' 카테고리의 다른 글

DAY 18. 웹 요소 위치 지정: position, top, right, bottom, left  (0) 2022.11.14
DAY 17. 웹 문서의 레이아웃: display, float, clear  (0) 2022.11.12
DAY 15. 박스 모델 테두리 지정하기(2): border-radius, 원하는 꼭짓점만 둥글게  (0) 2022.11.10
DAY 14. 박스 모델 테두리 지정하기(1): border-style, border-width, border-color, border  (0) 2022.11.09
DAY 13. 웹 문서 내용을 박스 형태로 정의하기 (with CSS) (2) - width, height, box-sizing, box-shadow  (0) 2022.11.08
'프밍/CSS' Related Articles more
Comments