-
CSS - 박스모델프론트엔드/CSS 2020. 8. 23. 23:17
박스 모델이란?
CSS의 박스 모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법을 가리킨다.
HTML에서 <p>, <div> 등으로 문서를 작성하게 되면 눈에는 보이지 않지만 태그별로 공간을 점유하게 된다.
문서 내용과 주변 공간을 통틀어 박스라 한다.
태그 별로 문서 부분 이외에 padding과 margine 값을 가지게 된다.
그림처럼 HTML 본문을 'contents'라 하면 해당 문서의 경계인 'border' 사이에 'padding'이 존재한다.
그리고 경계선인 'border' 밖으로 'margin'이 존재한다.
블록 레벨과 인라인 레벨
위 박스 모델을 블록 레벨과 인라인 레벨로 나눠진다.
블록 레벨
블록 레벨의 경우 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소다.
블록 레벨인 <p> 태그를 써서 문서를 쓸 경우 위와 같이 <p> 태그는 화면의 한 줄을 통째로 차지한다.
인라인 레벨
인라인 레벨은 태그를 사용해 요소를 삽입했을 때 내용 만큼의 공간을 차지하는 요소다.
인라인 레벨인 <span> 태그를 써서 문서를 쓰면 위와 같이 문서 내용 만큼만 차지한다.
그래서 블록 레벨과 달리 박스가 옆으로 쭉 나열된다.
인라인 블록
인라인 블록은 박스의 성격은 블록이지만, 인라인처럼 불필요한 공간을 차지 하지 않는 레벨이다.
다만 인라인 블록은 처음부터 성격이 정해지지 않고 'display' 스타일 적용을 통해서 변경하는 것이다.
블록 레벨과 인라인 레벨 변경하기
블록 레벨과 인라인 레벨은 서로 변경이 가능하다.
'css'에서 'display' 스타일 적용을 통해 변경이 되는 것이다.
<body> <style> p{ border: 5px solid orange; font-size: 30px; display: inline; display: block; display: inline-block; } </style> <p> 첫번째 박스입니다. </p> <p> 두번째 박스입니다. </p> <p> 세번째 박스입니다. </p> </body>위와 같이 'display' 속성을 적용하고 속성 값으로 'inline', 'block', 'inline-block' 등을 적용해서 박스 모델의 레벨을 바꿀 수 있다.
'프론트엔드 > CSS' 카테고리의 다른 글
CSS - position (0) 2020.08.24 CSS - 레이아웃 (0) 2020.08.24 CSS - 목록 스타일 (0) 2020.08.23 CSS - 텍스트 관련 (0) 2020.08.23 CSS의 적용 우선 순위 (0) 2020.08.23