[CSS] width, height, margin, padding 기초를 튼튼히 !

안녕하세요 Aura 입니다.

 

바로 강의들어가죠,

 

 

---

 

1. width

 

width 가 무엇인가..

순간적으로 기억 안나는분이 있을겁니다.

 

width는 이 캡처본에서 나왔듯이 " 폭,너비 " 를 말합니다.

css에서 width값을주는것은 너비값을준다. 라고 말할수잇죠.

그리고 저번 강좌에서 말한

id와 class 중 id를 이용하여서 설명하겟습니다.

#test{
 width:100px;
}

 

width에는 px,em,pt,vmin,vmax 등이 들어갑니다.

저는 대부분 px와 em을 많이사용하죠.

 

여담은 그만하고 width:100px; 라고 했는데

어렵게 생각하실거 없습니다.

그냥 너비를 100px로 지정해주엇다고 생각하면됩니다.

 

참쉽죠?

 

 

 

2. height

 

height도 순간적으로 기억못하는분이 있으실거같은데 !

 

 

 

이것도 준비햇죠 후후

솔직히 모른다고 부끄러운게 아닙니다.(필자도 순간적으로 까먹)

예 뭐 width와 다르지않습니다.

 

#test{
 height:100px;
}

 

이것도 역시 px,em,pt,vmin,vmax 등이 들어갑니다.

뭘 사용하시든 자유이십니다 !

 

소스 해석도 뭐.. width랑 같습니다.

높이를 100px로 지정!

 

 

3. margin , padding

 

자 여기서 헷갈리시는 분들이 많을겁니다.

저역시도 margin과 padding 을 이해하기 어려웟구요..

 

 

 

이 그림으로 설명을 드리겠습니다.

 

먼저 빨간선을 기준으로하여 밖에있는 선을 A로

안에있는 선을 B로 나누겠습니다.

 

그림을보고 바로 이해하시는분도 있을건데 모르는분을 위해서 글로 설명을 드리겠습니다.

 

A와 기준선의 거리를 margin => 바깥 여백

B와 기준선의 거리를 padding => 안쪽 여백

 

이라고 합니다.

이해가 안되셧다면 댓글을 남겨주세요 !

 

margin과 padding은 그림에서 보이듯 left, top, right, bottom을 따로따로 지정을 할 수 있습니다.

사용하는방법은 아래와 같습니다.

 

#test{
margin : 10px;
margin-left:10px;
margin : 10px 0 0 0;
}

 

3가지를 적은이유는 다 있습니다 허허!

margin : 10px;

이것은 전체를 통틀어서 10px만큼의 바깥 여백을 준다는 말입니다.

margin-left : 10px;

이것은 왼쪽만 10px의 여백을 준다는 말입니다.

margin : 10px 0 0 0;

이게 가장 헷갈리는 것중 하나인데요,

왼쪽부터 left top right bottom 순으로 됩니다. 시계방향이라고 외우시면 편합니다.

가끔 top과 bottom을 헷갈려서 디자인할때 애먹는분들이 많습니다. 이점 유의하시기 바랍니다.

padding 도 margin과 같은방법으로 값을 설정해줍니다.

여백의 위치가 다를뿐이죠.