CSS day8

블록 요소

인라인 요소

박스모델

컨텐츠 영역

박스모델

css 박스 모델은 웹 문서의 내용을 박스 형태로 정의하느 방법을 말한다. 이러한 박스 모델들이 모여 웹 문서를 이루고 박스 모델에는 마진, 패딩, 테두리 등 박스가 여러겹 들어있다.

블록 요소와 인라인 요소

블록 요소

블록 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄 전체를 차지하는 것을 가리킨다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻으로 따라서 블록 요소 좌 우로는 다른 요소가 올 수 없다. 블록 태그의 특징을 갖고 있는 태그로는 <h1~6>, <p>, <div> 등이 있다.

<!--생략-->
	...
<h1>시간이란..</h1>
<div>내일 죽을 것처럼 <p class="accent">오늘</p>을 살고</div>
<p>열원히 살 것 처럼 <br>내일을 꿈꾸어라.</p>
	...
<!--생략-->

인라인 요소

인라인 요소는 블록요소 달리 한줄 전체를 차지 않는다. 컨텐츠 만큼만 영역을 차지하지 않고 나머지 공간에는 다른 요소가 올 수 있다. 따라서 한 줄에 여러개의 인라인 요소가 올 수 있다. 인라인 요소의 특징을 갖는 태그로는 <span>, <img>, <strong> 이 있다.

<!--생략-->
	...
<h1>시간이란..</h1>
<div>내일 죽을 것처럼 <span class="accent">오늘</span>을 살고</div>
<p>열원히 살 것 처럼 <br>내일을 꿈꾸어라.</p>
	...
<!--생략-->

블록 요소와 다르게 인라인 태그는 좌 우로 다른 요소가 들어 올 수 있는 것을 확인할 수 있다.

박스 모델

박스 모델은 웹 문서의 블록 요소의 특징을 갖는 모든 박스를 박스 모델이라한다. 박스 모델은 컨텐츠 영역과, 박스 테두리와 컨텐프 영역 사이의 영역인 패딩, 박스의 테두리, 박스간의 사이 공간인 마진으로 구성되어있다. 이때 마진과 패딩은 웹 문서에서 다른 컨텐츠 사이의 간격이나 배치 등을 고려할 때 필요한 개념이다.

컨텐츠 영역

텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분으로 박스 모델에서 컨텐트 영역의 크기를 지정할 때 너비는 width, 높이는 height 속성을 사용한다.

종류	설명
<크기>	너비나 높이의 값을 px이나 em 단위로 지정
<백분율>	박스 모델을 포함하는 부모 요소를 기준으로 너비값과 높이값을 백분율(%)로 지정
auto	박스 모델의 너비값과 높이값이 컨텐츠의 양에 따라 자동으로 결정됨

<!--생략-->
	...
<style>
    div{
        width: 400px;
        height: 200px;
        border: 1px solid red;
        padding: 0;
        margin: 0;  
    }
</style>
	...
<h2>content</h2>
<div>content 영역</div>
	...
<!--생략-->

결과를 보게 되면 마진과 패딩을 모두 0으로 정해 주었을 때 테두리 내부의 영역 전체가 content 영역이라고 할 수 있다. 패딩과 마진의 자세한 내용은 다음에 다루기로하자.