글자와 상자

우리가 보고있는 웹사이트는 이미지를 제외하고는 글자와 상자로 이루어져 있다고 볼 수 있다.

글자를 만드는 요소들은 인라인(inline)요소라고 하고, 상자를 만들기 위한 요소들은 블록(Block)요소라고 한다.

글자를 취급하는 인라인 요소, 레이아웃을 취급하는 블록 요소 라고 기억하면 될 듯 하다.

 

1. 인라인 요소

인라인 요소의 대표적인 예로는 <span></span> 태그가 있다.

인라인 요소는 요소 자체가 하나의 글자로 인식이 되며 줄바꿈은 띄워쓰기로 인식이 된다.

그렇기 때문에 줄바꿈을 하지 않고 <span>Hello</span><span>World</span>이라고 작성하게 되면 두 개를 하나의 글자로 인식해서 띄워쓰기 없이 HelloWorld 라고 출력한다.

 글자 요소 즉, 인라인 요소는 콘텐츠의 크기만큼 자동으로 줄어드는 특성을 가지고 있다.

이러한 특성으로 인해서 나타나는 재밌는 현상은 글자 요소에 직접적으로 css 특성을 적용해서 너비를 바꾸려 해봐도 적용이 되지 않는다는 것이다.

또한 내부 여백에서는 위 아래 여백을 적용이 가능한 것 처럼 보이지만, 개념적으로 글자 요소에서는 외부든 내부든 위와 아래는 정상적으로 여백을 추가할 수 없다. 좌우에 대한 여백은 적용이 가능하다.

 

 

인라인 요소는 글자의 개념이고, 블록 요소는 상자의 개념이기 때문에 글자 요소 안에 상자 요소를 넣는 것은 불가능하다.

하지만 글자 요소 안에 글자 요소를 넣는 것은 가능하다. 예외적인 상황이 있긴 하지만, 기본적으로는 글자 요소 안에 상자 요소를 넣는 것은 불가능하다.

 

2. 블록 요소

블록 요소의 대표적인 예로는 <div></div> 태그가 있다.

div 태그 역시 단순히 콘텐츠 영역을 설정하는 용도로 사용되며 인라인 요소와는 다르게 요소가 수직적으로 쌓이기 때문에 하나의 요소는 한 줄을 차지하게 된다. 

그리고 인라인 요소와 다르게 가로 너비는 자동적으로 최대한 늘리려고 한다, 그러나 세로 너비는 인라인 요소와 마찬가지로 최대한 줄어들려고 한다.

블록 요소는 상자의 개념이기 때문에 당연하게도 요소의 가로 세로 너비와, 요소의 내부 외부 여백을 제한없이 적용할 수 있다. 인라인 요소에서는 좌우 여백만 적용이 가능했지만, 블록 요소에서는 상하 좌우 상관없이 여백을 적용할 수 있다.

그렇기 때문에 시각적으로 조정하는데에 있어서는 블록 요소가 인라인 요소보다 유리하다.

 

블록 요소는 자식 요소로 블록요소 인라인 요소 모두 가능하다.

기본적으로 블록 요소는 제약 사항이 별로 없다고 볼 수 있다.