css공부02/margin/padding/border

안녕하세요 핸들링코드 크루 박준영 입니다.

css에는 padding과 margin이 있다고 저번에 말했었는데요

 그에 대해서 좀더 자세히 공부해보고 응용해봅시다.

먼저 content, padding, border, margin에 대해 알아봅시다.

위 그림을 보면 패딩과 마진의 차이를 알 수 있습니다.

content는 글이나 그림등이 삽입되어지는 공간을 나타내고

border은 그 콘텐츠의 테두리입니다.

이제 패딩과 마진의 차이를 알려드릴게요

먼저 padding은 콘텐츠와 테두리 사이의 공간 입니다.

한개의 틀을 만들어 안에 텍스트를 넣었을 때

패딩값을 올린다면, 그 글과 테두리 사이의 간격이 늘어납니다.

또, margin은 그 경계(테두리)로부터 다른 테두리사이의 간격입니다.

margin값을 올리면 다른 틀과의 간격이 멀어지게 됩니다.

border에 대한 몇가지 속성태그들에 대해 배워볼게요

border속성은 레이아웃 디자인을 할때 간격등을 맞춰보기 위해 자주 사용하는 태그입니다.

또는 공지사항 칸이나 게시판등을 만들때 테두리역할을 하기도 하죠

border태그에서는 자주사용하는 두가지 속성이 있어요

example)       border: 3px solid red; -----> border: 두께 모양 색상;

solid는 실선, dotted는 점선입니다.

테두리를 약간 둥글게 만드는 방법도 있습니다.

border-radius값을 조정해 주면 테두리모양이 변합니다.

여기까지 margin, padding, border에 대한 설명이었습니다.

margin, padding에 대한 꿀 팁하나를 드리자면

테두리에 배경색을 입혀서 속성을 조정하면 더 편리합니다.

또한 -20px등 마이너스 마진, 패딩을 사용해서 두 레이아웃이 겹치게 할 수 있습니다.

이미지와 텍스트를 나란히 표현할때 주로 사용합니다.^^

감사합니다.