13. 레이아웃(여백 관련 옵션)

 

 

1. padding 옵션

- width/ height로 정해진 구역(테두리) 내에서 컨텐츠와의 간격을 의미
- 주요 옵션 : 전체, 상, 하, 좌, 우를 따로 조정할수 있음

    <style>
        .base {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: cornsilk;
            margin-bottom: 10px;
        }
        
        .padding1 {
            padding: 30px;
        }
        
        .padding2 {
            padding-top: 20px;
            padding-left: 50px;
        }
        
        .padding3 {
            padding: 50px 20px;
        }
        
        .padding4 {
            padding: 10px 50px 100px;
        }
        
        .padding5 {
            padding: 10px 50px 100px 200px;
        }
        
        .padding6 {
            padding: 30px;
            padding-left: 80px;
        }
    </style>

    <div class="base">0. 원본 padding 옵션</div>
    <div class="base padding1">1. 전체 padding 30px 옵션</div>
    <div class="base padding2">2. 상 : 20px / 좌 : 50px padding 옵션</div>
    <div class="base padding3">3. 상하 : 50px / 좌우 20px padding 옵션 ※비추</div>
    <div class="base padding4">4. 상 10px, 좌우 : 50px, 하 : 100px padding 옵션 ※비추</div>
    <div class="base padding5">5. 상 10px, 좌 : 200px, 하 : 100px, 우 : 50px padding 옵션 ※비추</div>
    <div class="base padding6">6. 실무 방법 : 전체 padding + 필요한 방향에 따로 지정</div>
    <hr><br>

0. 원본 padding 옵션

1. 전체 padding 30px 옵션

2. 상 : 20px / 좌 : 50px padding 옵션

3. 상하 : 50px / 좌우 20px padding 옵션 ※비추

4. 상 10px, 좌우 : 50px, 하 : 100px padding 옵션 ※비추

5. 상 10px, 좌 : 200px, 하 : 100px, 우 : 50px padding 옵션 ※비추

6. 실무 방법 : 전체 padding + 필요한 방향에 따로 지정

---

 

2. Margin 옵션

- width / height로 정해진 구역(테두리)의 외부(밖) 컨텐츠 간 간격을 조절하는 영역
- 주요 옵션 : 전체, 상, 하, 좌, 우

    <style>
        .base2 {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: palegreen;
        }
        
        .margin1 {
            margin: 30px;
        }
        
        .margin2 {
            margin-top: 20px;
            margin-left: 100px;
        }
        
        .margin3 {
            margin: 50px 100px;
        }
        
        .margin4 {
            margin: 100px 200px 300px;
        }
        
        .margin5 {
            margin: 10px 50px 100px 200px;
        }
        
        .margin6 {
            margin: 30px;
            margin-top: 100px;
        }
    </style>

    <div class="base2"> 0. 원본 margin</div>
    <hr>
    <div class="base2 margin1"> 1. 전체 margin</div>
    <hr>
    <div class="base2 margin2"> 2. top 20px, left 100px margin</div>
    <hr>
    <div class="base2 margin3"> 3. 상하 :50px, 좌우:100px margin </div>
    <hr>
    <div class="base2 margin4"> 4. 상 : 100px, 좌우:200px, 하:300px margin </div>
    <hr>
    <div class="base2 margin5"> 5. 상 : 10px, 우 : 50px, 하 : 100px 좌 :200px margin</div>
    <hr>
    <div class="base2 margin6"> 6. 전체 margin 30px + top:100px</div>

0. 원본 margin

---

1. 전체 margin

---

2. top 20px, left 100px margin

---

3. 상하 :50px, 좌우:100px margin

---

4. 상 : 100px, 좌우:200px, 하:300px margin

---

5. 상 : 10px, 우 : 50px, 하 : 100px 좌 :200px margin

---

6. 전체 margin 30px + top:100px

 

3. padding margin 복합사용

 - 두 여백을 동시에 사용하는 것이 일반적

    <style>
        .composite1 {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 30px;
            border: rgb(209, 37, 37) solid 1px;
        }
        
        .composite2 {
            text-align: center;
            width: 100%;
            margin-bottom: 20px;
            border: black solid 1px;
        }
    </style>

    <div class="composite2">
        <img src="resources/image/flower2.PNG" class="composite1">
        <img src="resources/image/flower2.PNG" class="composite1">
        <img src="resources/image/flower2.PNG" class="composite1">
    </div>

    <div class="composite2">
        <img src="resources/image/flower2.PNG" class="composite1">
        <img src="resources/image/flower2.PNG" class="composite1">
        <img src="resources/image/flower2.PNG" class="composite1">
    </div>

    <div class="composite2">
        <img src="resources/image/flower2.PNG" class="composite1">
        <img src="resources/image/flower2.PNG" class="composite1">
        <img src="resources/image/flower2.PNG" class="composite1">
    </div>

 

---

"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우

민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."