Padding과 Margin의 차이점

UXUI 디자이너가 CSS를 알아야 하는 것은 필수적은 아니지만, 알고 있으면 디자인 작업을 더욱 원활하게 처리할 수 있습니다.

​

CSS는 디자인 요소의 스타일링을 담당하는 웹 기술로, 디자인 요소의 레이아웃, 색상, 폰트, 크기 등을 지정할 수 있습니다. 따라서, CSS를 알고 있으면 디자인 요소의 스타일링을 더욱 세밀하게 제어할 수 있고, 개발자와 의사소통을 더욱 원활하게 할 수 있습니다.

​

또한, 최근에는 UXUI 디자이너가 HTML/CSS/JavaScript 등의 웹 기술을 알고 있어야 하는 경우가 늘고 있습니다. 이는 디자인 요소를 직접 구현할 수 있는 능력이 필요하기 때문입니다. 따라서, 웹 디자인 분야에서 일하는 경우에는 CSS를 알고 있으면 더욱 유리합니다.

 

피그마에서도 css코드로 내보내주는 기능이 있습니다.

Inspect 창에서 해당 디자인의 css를 확인할 수 있습니다.

그런 의미에서 오늘은 Padding과 Margin의 차이점에 대해 알아보겠습니다.

 

 

padding은 요소 내부에 있는 콘텐츠와 테두리(border) 간의 간격을 지정하는 속성입니다. 즉, padding은 요소의 내부 공간을 조절합니다. padding의 값이 클수록 요소 내부의 콘텐츠가 테두리와 더 멀어지게 됩니다.

 

 

margin은 요소와 요소 간의 간격을 지정하는 속성입니다. 즉, margin은 요소의 외부 공간을 조절합니다. margin의 값이 클수록 요소와 요소 간의 간격이 더 멀어집니다.

 

 

예를 들어, "padding: 100px"으로 설정하면 요소의 내부에 있는 모든 콘텐츠와 테두리 간에 100px의 간격이 자동으로 적용됩니다.

 

 

"margin: 30px"으로 설정하면 요소와 요소 간에 30px의 간격이 자동으로 적용됩니다.

​

margin은 요소의 외부 여백을 지정하는 데 사용됩니다. 즉, 요소의 테두리와 주변 요소 사이의 공간을 지정합니다. margin은 요소의 위치와 주변 요소들과의 간격을 조절하는 데 사용됩니다. margin은 요소의 전체 크기에 영향을 미치지 않습니다.

​

예를 들어, 다음과 같은 CSS 코드를 살펴보겠습니다.

​

```

div {

width: 200px;

height: 100px;

border: 1px solid black;

padding: 10px;

margin: 20px;

}

```

​

이 코드는 div 요소를 생성하고, 해당 요소에 대해 width, height, border, padding, margin을 지정합니다. 이 경우, div 요소의 실제 크기는 width + (border * 2) + (padding * 2) = 222px x height + (border * 2) + (padding * 2) = 122px입니다. 또한, div 요소와 주변 요소들과의 간격은 margin 값에 따라 결정됩니다.

​

따라서, padding과 margin은 각각 다른 기능을 수행하므로, 디자인 작업 시에 요소의 내부 간격을 조절해야 하는 경우 padding을 사용하고, 요소 간의 간격을 조절해야 하는 경우 margin을 사용합니다.

 

 

 

https://www.letapefigma.com/

Letape Figma 레탑피그마