👉 인라인 요소들 목록 보기

👉 블록 요소들 목록 보기

1. block

   대부분의 HTML 요소들은 block이다.

   block 속성은 inline과 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지한다.

   block 속성을 가지는 태그들은 기본적으로 width가 100%이다.

   화면의 가로 폭을 완전히 차지하기 때문에, 다음 요소가 양 옆으로 붙을 공간이 없어서

   자연스레 줄 넘김이 된다.

   inline 요소와는 달리 width, height, margin, padding 속성이 모두 적용된다.

   다만 margin 속성에 관해,

   block 요소가 상하로 있을 경우는 margin이 1번만 적용된다.(상하 상쇄)

   • 두 요소의 margin 값이 다를 경우, 더 큰 margin 값이 적용된다.

   특정 태그가 블록 요소인지 아닌지 가장 쉽게 파악하는 방법은 CSS로 배경 색을 입혀보는 것이다. 화면 폭을 모두 차지하는 경우, 그 태그는 블록 요소 태그임을 알 수 있다.

2. inline

   inline 속성은 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향이다.

   어떤 태그가 인라인 요소인지 일일이 나열하기보다, CSS를 작성할 때 아래와 같은 특징을 발견해서 파악하는 것이 좋다.

   • 상,하단 외부 여백(margin-top,margin-bottom)속성을 정의해도 적용되지 않는다.

     • margin의 가로 여백, padding의 세로 배경 색은 적용

     인라인 요소의 상,하 여백은 margin이 아닌 line-height 속성에 의해 발생한다.

   • 너비(width)와 높이(height) 속성이 적용되지 않는다. 인라인 요소의 너비와 높이는 태그가 품고 있는 내부 요소의 부피에 맞춰진다.

   • 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생한다.

     • 이는 코드적 스페이스에 따른 결과다.

3. inline-block

   inline 속성과 비슷하지만 너비와 높이를 설정할 수 있고, margin과 padding 속성을 모두 적용한다.