<HTML5+CSS3>레이아웃을 위한 스타일 박스모델

박스모델-박스형태의 텍스트 단락

-박스모델요소:<p>태그를 사용한 텍스트는 단락 형태를 가진다 즉,텍스트 단락 앞뒤에 빈 줄이 생기면서 텍스트 단란이 하나의 박스 형태를 갖게 되는 것이다.

박스 모델은 사진과 같은 구조를 가진다.

콘텐츠 영역: 텍스트 or 이미지 나타나는 영역

패딩 영역 : 박스와 콘텐츠 영역 사이의 여백

테두리 : 박스의 테두리

마진 : 여러 박스 모델간의 여백

 

width,height속성 – 박스 모델 크기 지정하기

-박스 모델은 마진이나 패딩을 이용해 적절한 크기를 만들 수 있지만, 강제로 정해야 할 경우에는 너비를 지정하는 width속성과 높이인 height속성을 사용한다.

이때 지정하는 값들은 박스 모델의 콘텐츠 영역에 대한 크기이다. 따라서 실제 콘텐츠의 크기는 width와height에서 지정한 크기에 패딩과 마진, 테두리 값을 더해서 계산해야 한다.

 

속성 값

(1)크기 :너비나 높이 값을 px , cm같은 단위와 함께 수치로 지정

(2)백분율 : 박스모델을 포함하고 있는 부모 요소를 기준으로 %로 지정

(3)auto : 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정 (기본 값)

 

 

margin속성 – 요소 주변 여백 설정하기

사진처럼 margin-방향   이 나와있다. margin속성을 사용해서 네 가지 속성을 한꺼번에 지정할 수도 있다.

margin,padding의 속성 값

(1)크기 : 너비나 높이 값을 px나 cm같은 단위와 함께 수치로 지정한다.

(2)백분율 : 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이를 %지정

(3)auto : 박스 모델의 너비와 높이 값 콘텐츠 양에 따라 자동으로 결정 (기본 값)

 

 

 

%margin속성을 이용해 한꺼번에 마진 값을 설정할 수도 있습니다. 한번에 사용하는 경우에는 시계방향으로 마진 값이 적용이 됩니다.

ex) p { margin:30px 50px 30 px 50px ; } ->시계방향순으로 30,50,30,50px 적용

p { margin:30px 50px ;} ->2개만사용 :(마주보는 방향끼리 같은 값 top과botton:30px, right와 left=50px

p {margin:50px ;} ->1개만사사용 :모두 50px 적용

3개일 경우 빠진 값은 마주보는 방향의 스타일 속성 값 사용.

패딩이란 콘텐츠 영역과 테두리 사이의 여여백을 말한다. 테두리 안쪽의 여백이라고 생각하면 된다. 속성값은 margin과 같다.