[CSS] Chapter 09. block과 Inline

1. 개요

블록(block)은 웹페이지 화면에서 가로 영역 전체를 차지하는 태그를 말한다.

대표적인 태그로는 <h1~6></h1~6>, <p></p>,<div></div>이 있다. 

 

해당 태그의 가장 주요한 특징은 데이터를 표시할 때, 반드시 ‘개행(줄바꿈)’을 진행한다.

때문에 다른 요소가 자신의 옆에 표시되는 것을 거부하는 특징을 가지고 있다.

위의 태그를 이용하여 모양을 구성한다면, display 값을 inline으로 구성하거나 span 태그를 사용할 필요가 있다. 

 

2. 기본 형태

 

<h1>시간이란...</h1>
<div>내일 죽을 것처럼<p>오늘</p>을 살고</div>
<p>영원히 살 것처럼
<br>내일을 꿈꾸어라.</p>

 

위의 3가지의 태그는 확인할 수 있듯이 Contents보다 큰 영역을 차지한다.

때문에 다른 데이터와 병합되거나 나란히 존재하기 어려우며, 만약 이를 지정하고 싶다면 해당 태그의 표현방식을 지정할 필요가 있다. 

기본적인 형태는 block 속성의 태그는 한줄을 모두 차지하며, inline태그는 줄을 차지하지 않는다.

 

3. 화면에 표시되는 영역을 바꾸는 Style: {display: ;}

block 특성을 가진 태그를 가로 영역(margin)을 포함하여 contents만 나오게 구현하고 싶다면, display 스타일을 통해 inline을 지정하면 화면이 span과 동일하게 구현된다.

중요한점은 block 특성의 태그는 기본적으로 margin 값을 가지고 있기 때문에 border만 조정한다고 하여 contents만 구현되지 않는다는 점이다.

 

inline-block은 inline 태그의 형식으로 표현하되 면적을 가질 수 있다. 화면 표시방법에 따라 화면 구성을 다르게 지정할 수 있고, 기존 태그 자체의 속성을 수정할 수 있는 장점을 가진다.

 

4. block 태그들의 정렬 

block 태그의 가장 큰 특징은 contents 값 외에 ‘padding’,  ‘border’, ‘margin’ 값을 가지는 것이다.

block 속성을 가진 태그의 정렬은 태그의 자체 값(block 태그가 가지는 border 까지의 값)을 기준하거나 상위 속성을 기준으로 정렬된다.

기본적으로 %는 상위 태그 모양에 따라 정렬되고, px은 왼쪽은 기준으로 몇 px이 떨어져 있는지를 고려한다. 

 

대표적인 정렬 방법으로는 text-align과 margin 값의 설정이 있는데, contents의 속성이 text인 경우, 해당 태그의 ID 혹은 Class에 [text-align: 정렬값;]으로 정렬이 가능하다. 

 

혹은 margin: 0 auto;로 값을 설정하면 상위 속성에 대해서 위아래 공간은 0px, 좌우는 auto(자동: body에 객체 너비를 빼고 반으로 나눔)으로 공간이 설정된다.

자동으로 설정되는 데이터에 따라 중앙으로 설정되는 효과를 가진다. 50%와는 다른데, 50%는 body 혹은 상위 값의 50% 위치부터 시작하는 것이기 때문에 정확한 중앙에 정렬되지 않는다.

 

다만 margin 값의 설정은 반드시 너비 값을 가진 태그에 적용이 가능한데, block 기능을 포함한 Tag에 사용이 가능하다는 것이다.

때문에 span은 사용이 불가능하고 div와 p는 사용이 가능하다. 

 

margin: 0 auto;
text-align: center;