CSS 마진, 패딩, 테두리 | 데이터카페

마진(margin)
- 마진(margin)은 요소와 다른 요소 사이의 공간을 설정하는 속성입니다. 마진은 방향별로 따로 설정할 수 있으며, 축약하여 설정할 수도 있습니다.

마진의 활용
- 요소와 다른 요소를 분리하기 위해
- 요소의 크기를 조절하기 위해
- 레이아웃을 구성하기 위해

마진 개별 설정
css
div {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 30px;
  margin-left: 40px; 
}
 

마진 단축 설정
css
div { maring: 10px 10px 10px 10px; }  /*상하좌우*/



패딩(padding)
- 패딩(padding)은 요소의 콘텐츠와 테두리 사이의 여백 영역을 설정하는 속성입니다. 패딩 영역은 배경색의 영향을 받습니다.

패딩의 활용
- 콘텐츠와 테두리 사이의 여백을 설정하여 시각적인 효과를 줍니다.
- 콘텐츠의 위치를 조정합니다.
- 콘텐츠의 크기를 조정합니다.

패딩 개별설정
css
div {
   padding-top: 20px;
   padding-right: 10px;
   padding-bottom: 30px;
   padding-left: 40px; 
}
 

패딩 단축 설정
css
div { padding: 10px 20px 30px 40px; }  /*상하좌우*/ 


패딩과 마진의 차이점
패딩과 마진은 모두 요소의 크기와 위치를 조정하는 데 사용되는 속성입니다. 하지만 두 속성은 다음과 같은 차이점이 있습니다.

마진
요소와 다른 요소 사이의 여백을 설정합니다.
배경색의 영향을 받지 않습니다.
음수 값을 사용할 수 있습니다.

패딩
콘텐츠와 테두리 사이의 여백을 설정합니다.
배경색의 영향을 받습니다.
음수 값을 사용할 수 없습니다.


테두리(border)
- 테두리는 요소의 모서리와 경계를 정의하는 선입니다.

border-widt: 테두리의 두께를 설정입니다.
border-style: 테두리의 모양을 설정입니다.
border-color: 테두리의 색상을 설정입니다.
border-radius: 테두리의 모서리를 둥글게 만드는 설정입니다. 

테두리 스타일
- solid: 단색 테두리
- dashed: 점선 테두리
- dotted: 점선 테두리
- double: 두꺼운 단색 테두리
- groove: 오목한 테두리
- ridge: 볼록한 테두리
- inset: 안쪽으로 들어가는 테두리
- outset: 바깥쪽으로 튀어나오는 테두리


테두리 단축 속성
- border: 테두리 너비, 스타일, 색상을 한 번에 설정합니다.
css
div { border: 1px solid black; }


- border-top: 상단 테두리 너비, 스타일, 색상을 설정합니다.
- border-right: 오른쪽 테두리 너비, 스타일, 색상을 설정합니다.
- border-bottom: 하단 테두리 너비, 스타일, 색상을 설정합니다.
- border-left: 왼쪽 테두리 너비, 스타일, 색상을 설정합니다.