이번에는 Padding의 자세한 사용법과 용도에 대해 써보겠습니다.

Padding은 의미상 패드를 생각하시면 됩니다만 안쪽 여백이라고 생각하시는게 훨씬 더 접근하기에 쉬울것입니다.
DIV라던지 하는 개체에서 안쪽 여백을 주지않으면 컨텐츠와 테두리가 딱 붙어 여유롭지 못하게 됩니다. 그래서 padding을 사용하게 되는데요.

선언 방법은 여러가지가 있습니다.

1. padding
2. padding-top
3. padding-bottom
4. padding-right
5. padding-left

이렇게 5가지가 있습니다.
차이점으로는 padding은 상하좌우의 모든 값을 정할 수 있고 padding-top 과같이 위치가 같이 붙어있는것은 특정 부분만 따로 지정할 수 있다는겁니다. 때에 따라서 잘 선정하여 사용한다면 코딩시 양이 줄어들 수 있습니다.

padding의 예를 볼까요?

.divobject {padding:10px}

이와 같은 경우는 Class명이 divobject인 개체의 padding을 상하좌우 모두 10픽셀로 하라는 뜻입니다.

그럼 아래의 예제는 무슨 뜻일까요?

.divobject {padding:10px 5px}

이와 같은 경우는 Class명이 divobject인 개체의 padding을 top과 bottom은 10픽셀로 left와 right는 5픽셀로 하라는 뜻입니다.

어떻게 그렇게 되는걸까요?
padding은 그 값으로 4가지를 가질 수 있습니다. 아래와 같이요 :)

padding:<top> <right> <bottom> <left>

그럼 이제 답이 나오죠!? 정답~!
4방향을 모두 지정할 수 있습니다.

예를들어 Top 10, Right 15, Bottom 20, Left 25픽셀을 주고싶다면?

padding:10px 15px 20px 25px

위와 같이 선언을 해주면 됩니다.

개별적으로 되는 padding-top과 같은것으로 작성한다면 무척 길어지겠지요..

padding-top:10px;padding-right:15px;padding-bottom:20px;padding-left:25px

이것과 저 위의 padding을 이용한것 어떤게 더 깔끔할까요?

하지만 처음 padding을 사용한 예제에서는 padding:10px 5px 만 했는데 top와 bottom이 10픽셀, left와 right가 5픽셀이 되었지요?
이런것처럼 2개만 선언이 되었을때는 앞의 10px는 Vertical(수직) Padding 뒤의 5px은 Horizontal(수평) Padding으로 선언되어 각각 "상하"와 "좌우"를 뜻하게 됩니다.

그렇다면!! 아래와같이 3개를 한다면??

padding:10px 5px 20px

뭐 정답은 간단하지요, 첫번째는 Top, 두번째 5px을 선언했는데 가장 뒤의 Left값이 없으니 5px은 Horizontal Padding값으로 그리고 세번째의 Bottom은 20px로 적용이 되게 됩니다 :)

이상 간단히 Padding을 알아보았습니다.

요점정리!!

• Padding: <top> <right> <bottom> <left>
• Padding: <Vertical> <Horizontal>
• Padding-top, Padding-bottom, Padding-right, Padding-left 의 개별 Padding

간단하게 "바닥에 비친듯한 효과를 만드는법" 을 알아보겠습니다.


1. [File - New] 로 새로운 캔버스를 생성합니다. 적당한 사이즈로..

2. 텍스트툴()을 이용하여 텍스트를 써줍니다. 저는 Tahoma / 60px 로 작성했습니다.
3. 작성된 텍스트 레이어에 마우스 우측클릭 하여 Duplicate Layer를 클릭해 레이어를 복제해줍니다.

4. 복제된 레이어를 선택하고 [Edit - Transform - Flip Vertical] 로 수직방향으로 뒤집어줍니다.

5. 뒤집어준 복제된 레이어를 이동 툴()을 사용해 기존의 텍스트의 아래쪽으로 끌어내려줍니다. (Shift키를 누른채 끌어주시면 직선으로 끌어내릴 수 있습니다.)

6. 복제된 레이어를 선택하고 Add Layer Mask버튼을 눌러 레이어 마스크를 추가해줍니다.


7. 그라디언트 툴()을 선택하고 옵션을 와 같이 선택, 색상은 와 같이 한 후 생성된 레이어 마스크에서 아래 그림과 같이 그라디언트를 적용합니다.


8. 그럼 아래와 같이 되었겠죠? 자자 이제 마무리단계!!

9. Layer Panel 에서 Opacity를 20%로 줄여줍니다.

10. 자 그럼 완성! 끝!입니다!

이상으로 간단한 효과에 대한 튜토리얼을 마칩니다.
너무나 간단한 내용이지만, 이렇게 과정을 쓰려니 아무리 줄여서 써도 복잡하군요 @_@

블로그 스킨 제작할 때 뿐 아니라, 최근 웹 표준의 준수와 시멘틱 웹에 관심이 높아지면서 CSS에 대한 관심은 너무 나도 높아져 가고있습니다.
스킨을 제작할때는 말할것도 없지요, 기본적으로 어떤 특정 내용들을 묶을때 DIV를 이용하여 묶고는 합니다.
여러종류를 묶을때는 DIV로 한줄의 짧은 텍스트는 SPAN을 쓰기도 하고 문단은 P라던지... 하지만 스킨 제작을 하다보면 DIV를 사용하여 각 개체를 묶어주는게 보통입니다.

오늘은 그런 각 개체의 여백을 조절하는 부분과 테두리에 대하여 알아보겠습니다.
들어가기에 앞서 먼저 이미지를 한번 살펴봐주세요.


눈치 빠른 분들은 위의 이미지를 보면 아! 이거구나~ 하고 금새 눈치 채실 것 같은데요?
총 4가지의 부분으로 나뉘어집니다.

1. 컨텐츠 영역
2. 안쪽 여백(Padding)
3. 바깥 여백(Margin)
4. 테두리(Border)
   

까만 구분선 안의 컨텐츠 영역과 안쪽 여백부분은 DIV 내부 영역이라고 하였는데 표현상 그렇게 한것이 아니고, DIV에 예를들어 배경색에 대한 스타일을 선언해주었다면 Padding 부분까지 영향을 받기에 해두었습니다.

좀 더 사이즈에 대해 자세히 알아봅시다!!

이렇게 포토샵으로 먼저 초안을 잡으면서 디자인 해놓고, 나중에 HTML과 CSS에서 코딩을 할 때에..

"음.. 난 가로 210에 세로 210으로 만들꺼니까 DIV의 width와 height를 210px로 해야지~" 라고 생각하신다면 안된다는 말이죠~

쉽게 설명하면 padding은 해당 개체(예:DIV)의 영역에 포함되고 border와 margin은 해당 개체의 주위를 둘러싸는 형태입니다.
padding은 개체의 영역에 포함된다고 해도 해당 개체의 사이즈에 속해있는게 아니라 또 다른 별도의 사이즈를 갖기에 초기 개체 사이즈를 넣어줄 때 padding영역을 뺀 값을 해주셔야합니다.

그럼 올바르게라면 이렇게 생각해야겠죠?
"음.. 난 가로 210에 세로 210 사이즈에, 테두리 5에 내부여백 10이니까.. DIV의 크기는 가로세로 180으로 해야겠구나!" 라고 되어야하는겁니다~

결론은 실제 사용할 수 있는 컨텐츠 사이즈만큼만 DIV의 가로 or 세로를 지정해주셔야 합니다.

위의 예제에 나온 소스코드는 아래처럼 되겠네요. 메모장에 붙여넣기 후 test.html로 저장해서 브라우져로 열어보세요~

<style>
    .teststyle
    {
        width:180px;
        height:180px;
        padding:10px;
        margin:10px;
        background-color:#ffff99;
        border:5px solid #e7b7dd;
    }
</style>

<div class="teststyle">Blogessence Contents</div>

오늘은 간단한 개념만 알려드리고자 하였고, 너무 길어지면 보는사람도 머리가 아프니까 여기서 끝마치도록 하겠습니다.
그냥 그때그때 생각나는것을 포스팅 하려했는데, 그렇다면 다음에 포스팅 할 내용도 정해졌군요..
이 다음엔 "padding과 margin의 자세한 사용법" 과 "border의 사용법"으로 나누어서 포스팅 하겠습니다.
도움이 되는분이 꼭 있길.. 없으면.. orz