HTML box 보는 방법

안녕하세요 ^^

일하다 창밖을 보면 날씨가 너무 좋아서 뛰쳐 나가고 싶습니다 ㅠㅠ

그래도 오늘 할일은 해야져..?

html display에 대해서 글 쓴적이 있는데요.

display는 배치와 영역에 대한 속성이라고 말씀드렸어요.

오늘은 영역에 대한 속성에 대해서 쓰려고 합니다.

display와 마찬가지로 가장 중요하고도 기본이 되는 내용이에요.

영역은 당연히 사각형으로 되어 있겠져 ? 

개발자도구로 하나의 영역에 대해서 살펴보면 아래와 같이 나와요. 저는 주로 크롬을 씁니다

border라는 부분이 보이시죠 ? 단어의 뜻대로 경계면을 나타냅니다.

border를 기준으로 안의 영역은 padding, 밖의 영역은 margin이라는 속성이 존재해요.

border는 다른 속성과 다르게 색상, 선의 스타일, 반경 등의 속성도 지정할수 있지요.

파란 영역은 컨텐츠가 들어가요. 이미지나 텍스트가 들어가는 영역입니다.

border, margin, padding 속성을 잘 활용하면 레이아웃을 구성하는데 있어서 더 디테일하게 잡을수 있습니다 ^^