엘리먼트들의 구조

1) 콘텐츠 영역이란?

텍스트나 이미지와 같은 콘텐츠를 가지며, 그것을 포함할 정도로 충분한 크기의 박스 내부에 위치한다.

콘텐츠 영역은 주위에 빈 공간을 가지고 있지 않다는 점을 주목한다.

콘텐츠 영역을 선으로 그어 표시한다면 아래와 같은 이미지가 될 것이다.

2) 패딩이란 무엇인가? ( 내부 공간 )

콘텐츠 영역은 주위에 패딩이라는 층을 가질 수 있다.

패딩은 선택적인 것이므로, 꼭 필요한 것은 아니지만 콘텐츠와 박스 사이에 시각적인 여백을 주기 위해 사용할 수 있다. 패딩은 투명하며 자신만의 색을 가지지 않는다.

ㅇㄹㄴㄹ

패딩은 위, 아래 , 왼쪽, 오른쪽 각각 제어가 가능하다.

3) 테두리 ( border ) 는 무엇인가? ( 내부 공간 외부 공간 구분선 )

패딩 주위에는 선택 가능한 테두리(Border)를 가질 수 있다.

테두리는 패딩을 둘러싸며 선 형식이기 때문에 같은 페이지에 있는 다른 콘텐츠 사이를 시각적으로 분리하는 역할을 한다. 넓이/색/스타일 변경도 가능하다.

4) 마진(margin)이란? ( 외부 공간 )

마진 또한 선택적이며 테두리(border)를 둘러싸고 있습니다.

마진은 같은 페이지에 있는 다른 콘텐츠 사이에 빈 공간을 추가하는 역할을 합니다.

만약 두개의 콘텐츠가 아주 인접해 있을 경우 마진을 이용해 사이에 빈 공간을 넣을 수가 있습니다.

패딩과 마찬가지로 마진또한 투명하며 자신만의 색을 가지지 않습니다.

마진을 줬을 경우

마진을 주지 않았을 경우

- 정리 -

패딩과 마진의 차이점 : 

패딩은 콘텐츠에 여유 공간을 제공하며 마진은 엘리먼트와 엘리먼트 사이에 여유 공간을 제공한다.

패딩과 마진 꾸미기 :

색을 설정할 수는 없지만 투명하기 때문에 배경색 혹은 배경 이미지 색을 가질 수 가 있다.