[html07]여백의 미:margin, padding #1

여백의 미

지금까지 제 강좌를 잘 따라오셨다면 여러분들은 텍스트도 꾸미실 수 있고, 이미지도 코딩에 넣으실 수 있고, 링크도 걸 수 있게 되셨을겁니다. 그런데 코딩을 하다보면 문제에 봉착하게 됩니다.

내가 만든 코딩이 뭔가 전문가스럽지 못하고 코딩끼리 딱 붙어있고, 답답한 느낌을 줍니다. 바로 이럴때 가장 크게 해결해주는게 여백입니다.

 

여백은 어떻게 주나요?

margin, padding 으로 여백을 줄 수 있습니다.

두개 명령어는 같은듯 하면서 다른 성격을 가지고 있습니다. ~~사실 이제는 이것조차 무효화하는 명령어까지 나왔지만.... 그래도 저는 레귤러한 설명을 해야하니까 ~~

실습으로 해보는게 낫겠죠? 눈으로 봐야 차이점을 아는겁니다.

실습

1. VS Code 실행
2. html로 저장
3. 기본구조 입력 (html:5 입력)
4. 아래 내용을 코딩하세요.

<h2>마진, 패딩의 차이</h2>
<div class="wrap">
    <div>A</div>
    <div>B</div>
</div>

5. 저번에 배웠던 CSS도 입혀주겠습니다.

<div style="background: #eee;">
    <div style="width:100px;height:100px; background: red;">A</div>
    <div style="width:100px;height:100px; background: blue;">B</div>
</div>

6. 총 2개의 div 박스를 만들었습니다. 바깥에는 회색 박스가 감싸고 있구요.
7. 특별한 빈 영역이 없습니다. 이제 이런것 만드시는건 너무 쉽죠?
8. A박스에만 margin:50px 을 부여해보겠습니다.

<div style="background: #eee;">
        <div style="width:100px;height:100px; margin:50px; background: red;">A</div>
        <div style="width:100px;height:100px; background: blue;">B</div>
    </div>

9. 여백이 적용 되었죠?
10. B박스에는 padding:50px을 부여해보겠습니다.

<div style="background: #eee;">
        <div style="width:100px;height:100px; margin:50px; background: red;">A</div>
        <div style="width:100px;height:100px; padding:50px; background: blue;">B</div>
    </div>

11. 차이가 느껴지시나요?
12. 마진은 타겟 바깥으로, 패딩은 타겟 안쪽으로 여백이 적용됐습니다.
13. 마진, 패딩은 위아래좌우로 각각 50px 씩 적용된 상태입니다. ※ 일부 꼼꼼하신 분들은 의문을 품으실겁니다. 왜 A박스 위엔 여백이 적용되지 않았느냐고 이 부분은 나중에 설명할테니 우선 코딩을 이렇게만 바꿔줍시다.

<div style="overflow:hidden;background: #eee;">
        <div style="width:100px;height:100px; margin:50px; background: red;">A</div>
        <div style="width:100px;height:100px; padding:50px; background: blue;">B</div>
    </div>

14. 이제 다 적용은 됐을겁니다.
15. 당연한 얘기지만 박스 A,B를 감싸고 있는 박스에도 margin:50px를 적용할 수 있으니 해보겠습니다.

<div style="overflow:hidden; margin:50px; background: #eee;">
        <div style="width:100px;height:100px; margin:50px; background: red;">A</div>
        <div style="width:100px;height:100px; padding:50px; background: blue;">B</div>
    </div>

16. margin을 padding으로 바꿔주겠습니다.

<div style="overflow:hidden; padding:50px; background: #eee;">
        <div style="width:100px;height:100px; margin:50px; background: red;">A</div>
        <div style="width:100px;height:100px; padding:50px; background: blue;">B</div>
    </div>

생각보다 어렵지 않죠? 다음 강의에서 뵙겠습니다.

2019/07/26 - [프로그램 강좌] - [html06]이미지로 코딩하기3 (문법설명이니 스킵해도 됨)

2019/07/25 - [프로그램 강좌] - [html05]이미지로 코딩하기2

2019/07/24 - [프로그램 강좌] - [html04]이미지로 코딩하기!

2019/07/11 - [프로그램 강좌] - [html03]CSS가 뭔데? 텍스트 꾸며보기

2019/07/08 - [프로그램 강좌] - [html02]html = head + body

2019/06/22 - [프로그램 강좌] - [html01]코딩은 누구나 할 수 있다?