HTML 박스모델 및 레이아웃에 영향을 미치는 요소 알아보기

안녕하세요 

이번 포스팅에서는 HTML 박스모델 및 레이아웃에

영향을 미치는 요소에 대해 알아보겠습니다.

 

위에 사진같이 마진, 테두리, 패딩, 콘텐츠로 여러개의 박스가 겹쳐있다.

 

박스 모델 4요소를 보면

1) margin 속성

bolder 속성 기준으로 바깥쪽 영역

-> 배치작업 중 좌표설정에 사용된다.

EX) margin : 40 px 30 px 20 px 10 px

top / right / bottom / left 순으로

 

2) Border 속성

공간 속 테두리 생성

Solid 실선 dotted 점선

뒤에 ~ px는 굵기를 의미

 

3) Padding 속성

Border기준으로 content 간의 간격

 

4) Content

안에 내용들을 의미

 

레이아웃에 영향을 미치는 요소들

1) display

block 요소를 inline 요소로 바꾸거나 반대로 만들어주는 기능

두개를 섞는 것도 가능

EX) display : inline-block

 

2) position

1) static

마진병합 가능

top~~ 불가능

부모,자식 서로 영향

 

3) fixed

마진병합 x

top~~~ 가능

부모, 자식 영향 X

 

4) relative

2+3차원

마진병합 가능

top~~~ 가능

부모가 높이가 없을 경우 자식이 영향

 

5) absolute

마진병합 X

top ~~~ 가능

position에 따라 기준점이 변함

부모가 높이가 없을 경우 자식이 영향

 

6) Z - index (Z축 조정)

레이어의 높낮이

사용처(3차원) : fixed, relative , absolute

정수만 사용가능

숫자가 클수록 상위 레이어로 이동한다.

 

float

부모태그를 기준으로 레이어를 띄워 왼/오 방향으로 보내는 태그

EX)

float : left

float : right

 

=> 여기서 float으로 배치가 위로 올라가면 clear를 사용해야한다.

clear : both 를 주로 사용

 

이상으로 포스팅을 마치겠습니다.

부족한 점이 있으면 댓글로 남겨주세요!