[html08]여백의 미: margin, padding #2

여백의 미2

지난 시간에 padding, margin 기본적인 사용법을 배워봤습니다. 하지만 텍스트에도, 이미지에도 적용할 수 있다는 사실 아셨나요?

실습: 텍스트에 여백 지정해보기

일부러 바뀌는 변화를 잘 보이기 위해 bg를 썼습니다.

<h2>마진, 패딩 실습</h2>
<div style="overflow:hidden; background: #eee;">
	<p>안녕하세요.</p>
</div>

p태그에 margin:50px 을 입력해보겠습니다.

<div style="overflow:hidden; background: #eee;">
    <p style="margin:50px;">안녕하세요.</p>
</div>

margin은 타겟 바깥으로 적용되는거 기억하시죠?

그런데 항상 위,아래,좌,우 균등하게 margin값을 지정해야하는건 아닙니다.

<div style="overflow:hidden; background: #eee;">
	<p style="margin:10px 20px 50px 30px;">안녕하세요.</p>
</div>

방금 지정한 margin은 위 10px, 우 20px, 아래 50px, 좌 30px 이렇게 줄 수 있습니다.

또 위아래 값이 같다면 이렇게도 쓸수 있습니다.

<div style="overflow:hidden; background: #eee;">
	<p style="margin:50px 30px;">안녕하세요.</p>
</div>

위아래로는 50px, 좌우는 30px 이런 형태로도 설정이 가능합니다.

padding도 역시 같은 문법입니다. 한번 해보세요.

<div style="overflow:hidden; background: #eee;">
	<p style="padding:10px 20px 50px 30px;">안녕하세요.</p>
</div>

읽어주셔서 감사드리고, 다음 강의에서 뵙겠습니다.

2019/08/14 - [프로그램 강좌] - [html07]여백의 미:margin, padding #1

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]코딩은 누구나 할 수 있다?