프로덕트 디자이너가 알아두면 좋을 개발 상식 02. HTML 기본 요소

1. 블럭 요소 (Block Element)

블럭 요소는 웹 페이지에서 새로운 줄을 차지하며, 전체 가로 폭을 사용하여 레이아웃을 형성합니다.

특징

• 항상 새로운 줄에서 시작합니다. 즉, 다음 요소가 아래로 내려가고 줄 바꿈이 생깁니다.
• 가로폭을 부모 요소의 100% 차지하므로, 화면 너비만큼 넓어집니다.
• width, height, margin, padding 속성을 모두 사용할 수 있습니다.

대표적인 블럭 요소

• <div>, <h1> ~ <h6>, <p>, <ul>, <ol>, <li>, <section>, <header>, <footer>

예시

<div style="background-color: lightblue;">블럭 요소 1</div>
<div style="background-color: lightgreen;">블럭 요소 2</div>

위 코드에서 <div>는 블럭 요소로, 두 번째 <div>는 첫 번째 요소 아래에 배치됩니다.

 

2. 인라인 요소 (Inline Element)

인라인 요소는 새로운 줄을 만들지 않고, 내용물만큼의 가로 공간만 차지합니다.

특징

• 새로운 줄을 만들지 않고 같은 줄에 다른 인라인 요소와 함께 배치됩니다.
• 내용물의 너비만큼만 공간을 차지합니다.
• width와 height 속성은 무시되며, margin과 padding 속성은 좌우로만 적용되고 상하로는 제한적입니다.

대표적인 인라인 요소

• <span>, <a>, <img>, <strong>, <em>, <label>

예시

<p>이것은 <span style="color: red;">인라인 요소</span> 예시입니다.</p>
<p>이것은 <a href="#">링크 인라인 요소</a> 예시입니다.</p>

위 코드에서 <span>과 <a>는 인라인 요소로, 줄 바꿈이 일어나지 않고 다른 텍스트와 같은 줄에 표시됩니다.

 

3. 인라인 블럭 요소 (Inline-Block Element)

인라인 블럭 요소는 인라인 요소처럼 한 줄에 배치되지만, 블럭 요소처럼 width와 height를 지정할 수 있는 요소입니다.

특징

• 한 줄에 배치되며, 블럭 요소처럼 width, height 속성 모두 사용할 수 있습니다.
• 가로와 세로 여백(margin, padding)을 자유롭게 조정할 수 있습니다.

대표적인 인라인 블럭 요소

• <img>, <input>, <button>, <select>
• CSS를 통해 display: inline-block; 속성을 지정한 요소

예시

<div style="background-color: lightgrey;">
    <span style="display: inline-block; width: 100px; height: 50px; background-color: pink;">인라인 블럭 요소</span>
    <span style="display: inline-block; width: 100px; height: 50px; background-color: yellow;">인라인 블럭 요소</span>
</div>

위 코드에서 두 <span> 요소는 inline-block으로 설정되어 있어, 한 줄에 배치되면서도 각각의 width와 height가 적용됩니다.

 

요약 정리

요소 유형	줄 바꿈 발생	차지하는 폭	width, height 사용
블럭 요소	O	부모 요소의 100%	가능
인라인 요소	X	콘텐츠만큼	불가능
인라인 블럭 요소	X	콘텐츠만큼 (여러개가 한 줄에 표시됨)	가능