[CSS] 1. 앨리먼트의 안과 밖의 여분을 조정해보쟈. (margin, padding) 강의이야기 | Posted on 2012. 2. 4. 21:59
해당 강의의 저작권은 Pure Ani's Blog의 주인장 Pure Ani에게 있습니다.
이번 강의에서는 필자가 가~장 많이 쓰는 CSS인 margin과 padding에 대해서 알아보겠습니다.
코딩에 자주 쓰이는 div나 span과 같은것들은 아래와 같은 구조를 하고 있습니다.
보시면 아시겠지만, 맨 바깥쪽에서부터 offset, margin, border, padding이 둘러싸고 있습니다.
이게 기본입니다.
※ 참고로 앨리먼트에는, 블록(block)과 인라인(inline)이 존재하는데..
CSS에서 볼때 가장 크게 느껴지는 차이점은 top과 bottom이 안먹힌다는 겁니다.
딱 그냥 코딩을 다 하고 시각적으로 봤을때 느껴지는 차이점이라면, 줄바꿈일까요?
ex1 : <div>a</div><div>b</div>라는 블록 앨리먼트를 코딩해보면 아래와 같이 나옵니다.
a
b
ex2 : <span>a</span><span>b</span>라는 인라인 앨리먼트를 코딩해보면 아래와 같이 나옵니다.
ab
margin과 padding의 옵션은 아래와 같습니다.
1. ( margin || padding ):상, 우, 하, 좌; // 시계 방향순.
2. ( margin || padding ):상하, 좌우; // 옵션이 2개뿐입니다.
3. ( margin || padding )-(top || right || bottom || left):수치; // 각기 하나의 옵션을 줄 수 있습니다.
그러면 한번 margin과 padding를 써보도록 해보겠습니다.
간단하게 2가지 예제만을 보겠습니다.
ex1 : <div style="margin-left:100px; width:100px; border:1px solid;">a</div>
왼쪽에 100px의 여분의 공간이 생긴게 보이실 겁니다.
참고로 현재 a라는 공간은 width:100px; height:20px; 입니다.
ex2 : <div style="padding-left:100px; width:100px; border:1px solid;">a</div>
마찬가지로 왼쪽에100px의 여분이 공간이 생깁니다.
참고로 현재 a라는 공간은 width:111px; height:20px; 입니다.
일단 딱 봤을때 느껴지는거라면 위에서 그림으로 보여드렸던 마진과 페딩의 위치에 따른 공간생성이겠죠?
일반 사람들은 마진이나 페딩이나 그게 그거라고 생각하는데, 마진과 페딩에 차이가 하나더 있지요?
마진과 페딩은 서로다른 width의 값을 가집니다.
마진의 경우는 제가 직접 100px을 줬으니 생겼지만..
페딩의 경우는 무언가가 추가됬습니다.
일단 border의 왼쪽과 오른쪽 값이 추가되었습니다.
그러면 나머지 9px이 남는데요.
이것은 글자의 크기입니다.
이와 같은 결과는 페딩의 경우는 마진보다 신경을 써줄것이 더 많다는것을 의미합니다.
※ Tip : 마진을 사용한 앨리먼트 중앙 정렬 방법입니다.
<div style="width:100px; margin:0px auto;">a</div>
화면(혹은 부모 앨리먼트의 가로길이)의 정 중앙으로 이동을 합니다.
이때 중요한것이라면, width의 값이 px로 정확하게 들어가야 한다는겁니다.
HTML에는 아래의 코드가 최상단부에 들어가 있어야 작동을 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
출처 : Pure Ani's Blog
이번 강의에서는 필자가 가~장 많이 쓰는 CSS인 margin과 padding에 대해서 알아보겠습니다.
코딩에 자주 쓰이는 div나 span과 같은것들은 아래와 같은 구조를 하고 있습니다.
보시면 아시겠지만, 맨 바깥쪽에서부터 offset, margin, border, padding이 둘러싸고 있습니다.
이게 기본입니다.
※ 참고로 앨리먼트에는, 블록(block)과 인라인(inline)이 존재하는데..
CSS에서 볼때 가장 크게 느껴지는 차이점은 top과 bottom이 안먹힌다는 겁니다.
딱 그냥 코딩을 다 하고 시각적으로 봤을때 느껴지는 차이점이라면, 줄바꿈일까요?
ex1 : <div>a</div><div>b</div>라는 블록 앨리먼트를 코딩해보면 아래와 같이 나옵니다.
a
b
ex2 : <span>a</span><span>b</span>라는 인라인 앨리먼트를 코딩해보면 아래와 같이 나옵니다.
ab
margin과 padding의 옵션은 아래와 같습니다.
1. ( margin || padding ):상, 우, 하, 좌; // 시계 방향순.
2. ( margin || padding ):상하, 좌우; // 옵션이 2개뿐입니다.
3. ( margin || padding )-(top || right || bottom || left):수치; // 각기 하나의 옵션을 줄 수 있습니다.
그러면 한번 margin과 padding를 써보도록 해보겠습니다.
간단하게 2가지 예제만을 보겠습니다.
ex1 : <div style="margin-left:100px; width:100px; border:1px solid;">a</div>
참고로 현재 a라는 공간은 width:100px; height:20px; 입니다.
ex2 : <div style="padding-left:100px; width:100px; border:1px solid;">a</div>
참고로 현재 a라는 공간은 width:111px; height:20px; 입니다.
일단 딱 봤을때 느껴지는거라면 위에서 그림으로 보여드렸던 마진과 페딩의 위치에 따른 공간생성이겠죠?
일반 사람들은 마진이나 페딩이나 그게 그거라고 생각하는데, 마진과 페딩에 차이가 하나더 있지요?
마진과 페딩은 서로다른 width의 값을 가집니다.
마진의 경우는 제가 직접 100px을 줬으니 생겼지만..
페딩의 경우는 무언가가 추가됬습니다.
일단 border의 왼쪽과 오른쪽 값이 추가되었습니다.
그러면 나머지 9px이 남는데요.
이것은 글자의 크기입니다.
이와 같은 결과는 페딩의 경우는 마진보다 신경을 써줄것이 더 많다는것을 의미합니다.
※ Tip : 마진을 사용한 앨리먼트 중앙 정렬 방법입니다.
<div style="width:100px; margin:0px auto;">a</div>
화면(혹은 부모 앨리먼트의 가로길이)의 정 중앙으로 이동을 합니다.
이때 중요한것이라면, width의 값이 px로 정확하게 들어가야 한다는겁니다.
HTML에는 아래의 코드가 최상단부에 들어가 있어야 작동을 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
출처 : Pure Ani's Blog
