Day63 - [css]윤곽, 패딩, 마진, 상자크기

이번에는 css의 윤곽 , 패딩, 마진, 상자크기 에 대해서 알아 봅시다.

 

윤곽

윤곽은 일정 공간의 마지막 부분에 선을 그어주는 것을 의미 합니다.

 

border : 두께, 선개수, 색상

border 는 top, bottom, left, right 가 합쳐진 것으로, 쪼개서 사용할 수도 있습니다.

border-radius -> 모서리 둥글게

border-shadow -> 그림자

 

수평, 수직, 흐림반경, 확산정도, 색상

패딩

패딩은 윤곽 기준으로, 안쪽여백을 의미 합니다. 박스의 크기에 포함이 되고, 패딩끼리 겹치지 않습니다.

 

padding : 50px -> 상하좌우 ( 전부다 )

padding : 50px 50px 50px 50px -> 위, 오른쪽, 아래, 왼쪽 ( 위쪽 부터 시계방향 )

padding : 10px 20px -> 상하 좌우

padding 도 top, bottom, left, right 쪼개서 사용할 수 있습니다.

마진

마진은 요소의 바깥 여백. 즉 테두리와 다른 박스 사이의 여백입니다.

단, 마진과 마진은 겹칩니다.

 

margin : 50px -> 상하좌우 (전부)

margin : 20px 10px 20px 10px -> 위 오른쪽 아래 왼쪽 ( 위부터 시계방향 )

margin : 20px 10px -> 상하 좌우

margin 도 top bottom left right 로 나눠서 사용할 수 있습니다.

※ 많이 사용되는 박스의 중앙정렬 하기 ( 박스의 크기가 정해져 있어야 함 )

상자크기

min -> 박스의 최소크기 ( 지정해준 크기 이상으로 내용물을 담는다면, 가변 됌 )

 

max -> 박스의 최대크기 ( 지정해준 크기 이하로 내용물을 담는다면, 가변 됌 )

 

※ 보통 디자인을 시작하기 전에, 패딩과 마진을 0으로 설정함.