[03-4] CSS 기본기 익히기: padding, margin 마진(margin)은 요소의 주변에 여백을 만들어줍니다. 그리고 패딩(padding)은 테두리와 그 안의 콘텐츠 사이의 여백을 만들어 줍니다. 이 두가지를 이용해 여백을 적절히 만들면 유저친화적인 UI를 제공할 수 있죠. 이번 시간에는 margin과 padding에 대해서 알아보도록 하겠습니다. margin & padding 01. margin과 padding 비교 margin과 padding은 서로 비교하면서 알아가는 것이 이해하기 쉬울거라 생각합니다. 먼저 아래와 같이 버튼을 화면에 띄우게 됐을 때 푸른색 테두리 안에 'Button'이라는 텍스트 요소가 있는 모습을 확인할 수 있습니다. 여기서 푸른색 테두리는 'border'에 해당되고 ..

[03-3] CSS 기본기 익히기: 단위 속성 한 방에 정리! (px, %, vh, vw, vmin, vmax) 건물에 있는 창문의 갯수와 그 사이의 간격, 창문의 크기는 조화롭게 이뤄져 멋있는 야경을 만들어냅니다. 웹페이지도 이와 비슷합니다. 화면의 레이아웃이 어떻게 구성되고 여백, 간격이 적절하게 지정되어 있는지에 따라 웹페이지의 첫인상이 달라보이죠. 눈에 보이는 화면에서 요소들을 적절히 배치하는 것이 가장 기본 중의 기본이라고 생각합니다. 이번 포스팅에서는 영역을 지정하는 속성값과 바깥쪽, 안쪽 여백을 지정하는 법을 알아보겠습니다. 단위 (속성값) 속성값 설명 px 픽셀 단위로 지정합니다. % 부모태그를 기준으로 %단위로 지정합니다. vw 웹 브라우저의 너비를 기준으로 값을 백분율로 지정합니다. v..