HTML 인라인 요소(inline element)

HTML에서 인라인 요소(inline element)는 화면에서 수평적으로 배치되며, 주로 텍스트나 내부 콘텐츠를 다룰 때 사용됩니다. 인라인 요소의 주요 특징은 다음과 같습니다:

1. 수평적으로 배치됨:

• 인라인 요소는 기본적으로 한 줄 안에 나란히 배치됩니다. 다른 인라인 요소들과 함께 수평적으로 흐르는 특징이 있습니다.
• 예를 들어, 텍스트와 그 안에 포함된 인라인 요소(예: <a>, <span>, <strong> 등)는 줄 바꿈 없이 한 줄에 표시됩니다.

2. 행 내에서만 크기 조정:

• 인라인 요소는 기본적으로 너비와 높이를 설정할 수 없습니다. 즉, 요소의 크기는 그 안의 콘텐츠에 의해 자동으로 결정됩니다.
• 예를 들어, <span> 또는 <a> 태그에 직접적으로 width나 height를 지정할 수 없으며, 이 값은 콘텐츠가 차지하는 크기에 맞춰집니다.

3. 줄 바꿈을 하지 않음:

• 인라인 요소는 기본적으로 줄 바꿈을 하지 않습니다. 새로운 줄로 내려가려면 별도의 블록 요소(<div>, <p> 등)가 필요합니다.
• 즉, 한 줄에 여러 개의 인라인 요소를 나열할 수 있습니다.

4. 내부에 다른 블록 요소를 포함할 수 없음:

• 인라인 요소는 블록 수준 요소를 포함할 수 없습니다. 예를 들어, <span> 안에 <div>를 넣는 것은 허용되지 않습니다.
• 반면, 블록 수준 요소는 인라인 요소를 포함할 수 있습니다.

5. display: inline 속성:

• HTML의 인라인 요소들은 기본적으로 display: inline 속성을 가지고 있습니다. 이는 요소가 인라인 방식으로 표시된다는 것을 의미합니다.
• 스타일을 통해 인라인 요소를 블록 요소로 변경하려면 display: block 속성을 사용하고, 반대로 블록 요소를 인라인으로 변경하려면 display: inline을 사용할 수 있습니다.

대표적인 인라인 요소들:

• <span>: 주로 텍스트의 일부를 스타일링하거나 특정 범위를 지정하는 데 사용됩니다.
• <a>: 하이퍼링크를 만드는 요소입니다.
• <strong>: 중요한 텍스트를 강조할 때 사용됩니다.
• <em>: 텍스트를 강조하거나 이탤릭체로 표시할 때 사용됩니다.
• <img>: 이미지 삽입을 위한 요소입니다.
• <code>: 코드 조각을 표시할 때 사용됩니다.

예시:

이 문장에는 강조된 단어와 기울임 단어가 포함되어 있습니다. 또한, 링크도 포함되어 있습니다.

<p>
  이 문장에는 <strong>강조된</strong> 단어와 <em>기울임</em> 단어가 포함되어 있습니다.
  또한, <a href="https://example.com">링크</a>도 포함되어 있습니다.
</p>

설명:

• <strong>, <em>, <a>는 모두 인라인 요소입니다. 이들은 수평적으로 나란히 표시됩니다.
• 텍스트의 일부에만 적용되며, 줄 바꿈 없이 한 줄에 배치됩니다.

결론:

인라인 요소는 주로 텍스트 내에서 특정 부분을 스타일링하거나, 콘텐츠를 내부적으로 구조화하는 데 사용됩니다. 기본적으로 수평적으로 배치되며, 콘텐츠 크기에 맞춰 크기가 자동으로 조정됩니다. 인라인 요소는 다른 블록 요소를 포함할 수 없고, 줄 바꿈을 하지 않으므로 레이아웃을 계획할 때 그 특성을 이해하고 사용하는 것이 중요합니다.