HTML - 인라인, 블록

Jan 15, 2024

Contents

인라인, 블록은 HTML 을 구성할 때 차지하는 공간을 의미한다. 웹사이트를 디자인할 때 제일 중요한 것은 요소의 배치다. 배치를 위해서는 각 요소가 어떤 공간을 차지하는지를 아는 것이 중요하다.

하나의 태그가 좌우 공간 전체를 차지. 한 칸의 태그가 블록이라면 다음 태그는 다음 칸에 작성된다.


<body>
    <div>안녕</div>
</body>

<div></div> 코드를 작성하면 내용물은 좌우 전체 크기를 차지하게 된다.


<body>
    <div>안녕</div> 안녕
</body>

태그 뒤에 평문을 넣게 되면 다음 줄에 작성된다.

💡

<div>,<table>,<h1>~<h6>,<p>,<form>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<pre>,<blockquote>등

인라인은 태그가 내용물의 크기 만큼 차지하는 것을 의미한다.


<body>
    <span>안녕</span> 안녕
</body>

<span> 태그는 인라인 요소이기 때문에 내용물의 공간만큼 차지하고 뒤의 평문은 같은 줄에 표기 된다.

💡

.html 파일에서 오른쪽 마우스 -검사 를 클릭한다. (혹은 F12)

Elements 에서 태그를 클릭하면 해당 태그의 크기를 확인할 수 있다.

우선 인라인 값이다. 인라인 값은 내용물의 크기에 따라 값이 정해지기 때문에 크기가 auto 로 표시된다.

이번엔 블록이다. 블록은 가로 세로의 값이 있다. 세로의 값은 정해져있다. 가로의 크기는 F12 창의 크기를 조절하면 값이 달라지지만, 표시된 전체 창의 길이를 나타낸다.

💡

태그 이름이나 사용법은 찾아서 사용할 수 있으나, 인라인 블록은 HTML 디자인에서 매우 중요하기 때문에 구분할 수 있어야 한다.

💡

웹사이트를 디자인할 때, 블록은 세로의 크기를 조절할 수 있다. 가로와 세로 크기를 정하고 싶다면 인라인-블록을 사용해야 한다.

Contents

More articles