[웹코딩의 기초] inline? block? 요소가 가지는 기본속성 - display

display 속성은 css에서 따로 지정하지 않아도 기본적으로 요소가 가지는 기본 속성중에 하나입니다.

크게 inline과 block 속성이 있고 일부 전용 특수 속성이 있습니다(예: table이 가지는 자식요소들)

그 외에는 대체로 인위적으로 주는 속성이라 할 수 있고 이 기본적으로 주어진 속성은 css로 덮어씌울 수도 있습니다.

 

일단 가장 기본적인 두가지 속성에 대해 먼저 알아봅시다

 

 

inline 요소

인라인 요소는 말그대로 선 위에 놓여있는 것 같은 형태를 띕니다.

선 위에 있기 때문에 높이나 너비와 관련된 다른 속성값을 가질 수 없으며 정렬도 할 수 없습니다. 지정하더라도 해당 속성을 무시합니다. (width, height, line-height, text-align 등등)

인라인 요소만으로는 정렬이 불가하지만 만약 상위 요소가 인라인이 아니라면 상위 요소의 정렬 스타일을 따라갑니다

줄바꿈을 하지 않으면 인라인 요소가 여러개 늘어져있을 경우 정해진 너비에 다다를때까지 계속해서 이어지며 글자의 경우 자리가 모자라면 아래로 내려옵니다. 평범하게 문서를 작성하는 것과 비슷하죠.

 

만약 여러 inline 요소를 가진 태그가 엔터나 탭, 스페이스 등으로 사이에 공백이 주어진다면 이것은 모두 한칸의 공백(스페이스바를 한번 친것과 같은 효과)로 인식합니다.

만약 인라인 요소간의 공백을 없애고 싶다면 단순히 앞선 태그의 종료태그와 다음 태그의 시작태그를 공백 없이 붙여서 써주면 됩니다.

* 이게 보기가 불편한 경우 css로 처리할 수도 있지만 쓸데없이 복잡하기 때문에 태그 사이에 <? ?>를 끼워서 공백을 메워주기도 합니다. <?, ?>는 php 코드를 넣을때 사용하는 태그입니다
<span>내용</span><?
?><em>내용</em>

이런식으로 작성합니다

 

 

기본 속성이 inline인 태그

<a>, <abbr>, <acronym>, <b>, <br>, <button>, <cite>, <code>, <em>, <i>, <img>, <input>, <label>, <object>, <q>, <span>, <strong>, <sub>, <sup> 등

 

** img 태그는 인라인 요소지만 특수성 때문에 width와 height 등 블록요소가 가지 수 있는 속성들을 가질 수 있습니다.

 

 

 

 

block 요소

블록 요소는 어떤 영역 안에서 최대로 가질 수 있는 너비와 안에 들어있는 내용 만큼의 높이를 가지는 사각형의 형태를 합니다. (안에 내용이 없다면 높이는 따로 설정하지 않는 이상 0이 됩니다.)

따로 줄바꿈 태그를 사용하지 않아도 다음으로 작성된 요소는 너비를 설정하여 빈 공간이 남더라도 자동으로 아래로 내려옵니다.

 

이 요소는 안에 든 텍스트나 인라인요소 등을 정렬할 수 있지만 (text-align 속성) 안에 블록요소가 들어갈 경우에는 text-align으로는 정렬이 불가능합니다. (해당 속성은 인라인 요소만 정렬할수 있습니다)

정렬은 부모요소가 아닌 해당 요소의 너비에 맞춰 정렬됩니다

다른 속성이 주어짐에 따라 높이와 너비값이 해제되며 블록요소끼리도 나란히 둘수 있게 되기도 합니다. 이부분에 대해서는 나중에 해당 속성에 대해 이야기 할 때 다시 설명하도록 하겠습니다.

 

 

기본속성이 block인 태그

<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <h1>~<h6>, <header>, <hgroup>, <hr>, <ol>, <p>, <pre>, <section>, <table>, <ul> 등