CSS 태그 간격 늘리는 padding 그리고 margin 차이점 그리고 사용 방법
오늘 수업은 매우 알찼습니다. padding (패딩) 그리고 margin (마진) 에 대해서 다시한번 그 개념을 짚는 시간이었습니다. 또한 다양한 쓰임새를 파악할 수 있었습니다. 예전에 이게 너무 햇갈려서 사용하는데, 그리고 수정하는데 어려움이 많았지만 지금은 입맛대로 꾸밀 수 있을 것 같습니다.
티스토리를 입문하시고, 조금 용기내어 스킨을 수정하려고 하면 도무지 알 수 없는 코딩들 때문에 어떻게 손을 대야 좋을지 몰랐다면, 지금은 이제 어떤 부분을 고쳐야 하는건지에 대한 감이 조금씩 오고 있습니다. 두리뭉실하게 알고 있던 부분이 더 확고해졌습니다. 말이 길어졌군요. 바로 본론으로 들어가도록 하겠습니다.
padding 개념 및 사용 방법
먼저 padding에 대한 개념과 간단한 사용 방법을 알아보겠습니다. 우선 HTML을 이렇게 구성해 봤습니다. 기왕 배우시는거 똑같이 한번 응용해서 같이 진행해 보세요. 내부스타일 방식으로 p태그에 class 값을 부여했습니다.
그리고 방금 만든 txt01 클래스 속성에 padding 값을 저렇게 하나만 넣었습니다. 그러면 어떻게 변하는지 살펴보겠습니다.
padding: 위/아래/좌/우 늘어나는 값;
적용하지 않은 p태그 문장과 적용된 문장의 차이를 살펴보시기 바랍니다. 적용된 문장은 구별하기 편하도록 백그라운드 배경색을 넣어주었습니다. padding은 예문에 나온대로 입니다. 우리가 추운 겨울 패딩 옷을 입으면 몸이 커지잖아요? 그런 개념이라고 생각하시면 됩니다. 패딩은 자신의 영역을 넓히는 것 입니다. 다음 숫자를 하나만 넣어주면 상/하/좌/우 모두의 영역이 입력한 수치만큼 늘어납니다.
이번에는 두개의 값을 입력해 보겠습니다. 이 의미는 다음과 같습니다.
padding: 위/아래 좌/우;
첫번째는 상/하의 패딩값을, 두번째는 좌/우의 패딩값을 의미합니다. 결국 위/아래로 20픽셀씩 늘어나고, 좌/우로 50픽셀씩 늘어나게 됩니다.
이렇게 결과값을 얻을 수 있습니다.
숫자가 3개가 들어가는 경우는 어떨까요? 다음과 같습니다.
padding: 위 좌/우 아래;
결국 예시처럼 작성하면 위로 20픽셀, 좌/우로 각각 50픽셀, 아래는 0픽셀이 늘어나게 될 것입니다.
그렇습니다. 이렇게 결과를 얻을 수 있습니다. 하지만 이 방법은 거의 사용되지는 않습니다.
그러면 숫자가 4개가 들어가는 경우는 어떨까요?
padding: 위 오른쪽 아래 왼쪽;
시계방향대로 움직인다는것을 기억해 주시기 바랍니다. 예문대로 숫자를 입력한다면 위로 20, 오른쪽으로 50, 아래로 0, 왼쪽으로 70픽셀이 늘어나게 됩니다.
네. 이런 결과를 얻을 수 있습니다. 이 뿐만 아니라, 각 한 방향에 대해서만 늘어나도록 할 수도 있는데, 그 방법은 다음과 같습니다.
padding-top : 위로 확장
padding-bottom : 아래로 확장
padding-left : 왼쪽으로 확장
padding-right : 오른쪽으로 확장
이건 직접 한번 입력해보시면 금방 파악하실 수 있을 것 입니다.
margin 개념 및 사용 방법
이제는 margin 사용방법을 알아보겠습니다. 마찬가지로 늘리는 방법 중 하나인데 padding 과는 다소 다릅니다. padding이 자신의 몸을 늘리는 것이라고 한다면 margin은 내 몸은 그대로이고 주변 공간을 늘리는 것 입니다.
스타일은 현재 이렇게 만들었습니다. div01 을 만든 이유는 마진값의 변화에 있어서 쉽게 파악하기 위해서 입니다. 굳이 없어도 되는 요소 입니다.
그리고 마찬가지로 p태그에 클래스값을 부여했고, 해당 클래스의 스타일에 margin 값을 입력해 보겠습니다. 적용되는 원리는 위에서 설명드린 padding 과 똑같습니다. 예시대로 마크업 하시면 위/아래/좌/우 모두 50픽셀씩 떨어지게 됩니다.
알아보기 쉽도록 p태그의 배경색을 갈색으로 만들었습니다. 그리고 아까 만든 div 영역의 테두리를 만들어서 구별이 쉽게 했습니다. 지금 보시는 것 처럼 50픽셀 만큼 떨어진것을 알 수 있습니다. 단 오른쪽의 경우는 div가 가로영역이 반응형이라 창 크기에 따라 변화가 되어 다소 구별이 어려운 점 양해 부탁드립니다.
이번에는 두가지 숫자를 마크업한 경우입니다.
위/아래로는 50픽셀이 벌어지게 되고, 양 옆으로는 10픽셀씩 떨어지게 됩니다.
세 개의 숫자 입력 경우 입니다. 각각 위, 좌/우, 아래로 벌어지게 됩니다.
네. 이렇게 됩니다.
이번에는 숫자 4개를 넣었습니다. 위로 50, 오른쪽으로 10, 아래로 80, 왼쪽으로 100픽셀을 벌어지게 마크업이 된 경우입니다.
그렇습니다. 이렇게 됩니다.
padding 과 margin의 차이를 이제 좀 아시겠죠? 나 스스로의 부피를 키우려면 padding을, 나는 그대로고 주변의 공간을 늘리고 싶을 때에는 margin을 사용하시면 됩니다. 숫자 입력하는 원리는 둘 다 똑같으니 기호에 맞게 마크업 하시면 되겠습니다. 끝.
"친절한효자손 취미생활" 을 검색!
