HTML - 블록과 인라인 요소

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 HTML의 블록과 인라인 요소에 대해 흥미로운 세상으로 빠져들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 많은 예제와 설명을 통해 여러분을 이 길 안내해 드리겠습니다. 그러니 마음에 드는 음료를 한 잔 챙겨 쉬운 자세로 앉아, 코딩을 시작해 보겠습니다!

블록 요소

이미지를 생각해 보세요. 레고 블록으로 집을 짓는 것처럼, 일부 블록은 크고 한 줄 전체를 차지합니다. 이것이 HTML의 블록 요소입니다. 새 줄에서 시작하고 사용 가능한 전체 너비를 차지합니다.

다음은 몇 가지 일반적인 블록 요소를 보여드립니다:

<div>저는 블록 요소입니다</div>
<p>저도 블록 요소입니다</p>
<h1>저는 제목이자 블록 요소이기도 합니다!</h1>

이 코드를 실행하면 각 요소가 새 줄에 나타납니다. 마치 "저는 제 자리가 필요해요, 감사합니다!"라고 말하는 것처럼요!

다음은 몇 가지 일반적인 블록 요소의 표입니다:

요소	설명
<div>	일반적인 용도 컨테이너
<p>	문단
<h1> to <h6>	제목
<ul>	비정렬 목록
<ol>	정렬 목록
<li>	목록 아이템

인라인 요소

이제 작은 레고 조각들을 생각해 보세요. 같은 줄에 옆에 붙을 수 있는 조각들입니다. 이것이 HTML의 인라인 요소입니다. 필요한 만큼의 너비만 차지하고 새 줄에서 시작하지 않습니다.

다음은 예제입니다:

<span>저는 인라인 요소입니다</span>
<a href="#">저는 링크이자 인라인 요소이기도 합니다</a>
<strong>저는 굵게 표시되고 인라인이기도 합니다!</strong>

이 요소들은 모두 같은 줄에 나타납니다 (공간이 충분하다면).

다음은 몇 가지 일반적인 인라인 요소의 표입니다:

요소	설명
<span>	일반적인 인라인 컨테이너
<a>	하이퍼링크
<strong>	굵게 표시된 텍스트
<em>	이탤릭 텍스트
<img>	이미지
<br>	줄 바꿈

HTML 블록과 인라인 요소 그룹화

이제 블록과 인라인 요소를 이해했으므로, 이들을 함께 그룹화하는 방법을 살펴보겠습니다. 이는 레고 조각들을 다양한 도구 상자의 다른 칸에 정리하는 것과 같습니다.

<div> 태그를 사용한 그룹화

<div> 태그는 여러 요소를 함께 넣을 수 있는 큰 상자입니다. 블록 수준 요소 자신이므로 새 줄에서 시작합니다.

다음은 예제입니다:

<div style="background-color: lightblue; padding: 20px;">
<h2>여러분을 환영합니다!</h2>
<p>이 div 안에 있는 문단입니다.</p>
<p>다른 문단에 <span style="color: red;">적색 텍스트</span>를 포함하고 있습니다.</p>
</div>

이 예제에서 우리는 <div> 안에 제목과 두 개의 문단을 그룹화했습니다. 또한 스타일을 추가하여 시각적으로 구분했습니다. 두 번째 문단 안의 <span>은 인라인 요소로, 텍스트의 색상을 변경하는 데 사용했습니다.

<span> 태그를 사용한 그룹화

<span> 태그는 작은, 투명한 상자로, 인라인 요소나 텍스트의 일부를 그룹화하는 데 사용할 수 있습니다.

다음은 예제입니다:

<p>
저는 <span style="color: blue;">파랑색</span>과
<span style="color: green;">녹색</span>을 좋아해요.
</p>

이 경우, 우리는 <span>을 사용하여 문단 내 특정 단어에 다른 색상을 적용했습니다.

<div>은 블록 수준 요소를 그룹화하거나 블록 수준 그룹을 만들기 위해 사용되는 반면, <span>은 인라인 요소나 텍스트의 일부를 그룹화하는 데 사용됩니다.

모든 것을 통합하다

이제 우리가 배운 것을 더 복잡한 예제로 통합해 보겠습니다:

<div style="background-color: #f0f0f0; padding: 20px; border: 1px solid #ccc;">
<h1>개인 블로그</h1>
<div style="margin-bottom: 20px;">
<h2>최신 글: 코딩의 기쁨</h2>
<p>
코딩은 퍼즐을 풀는 것과 같아요. 도전적이지만, 프로그램이 작동하기 시작할 때는
<span style="font-weight: bold; color: #ff6600;">아주 보람찬</span>입니다!
</p>
</div>
<div>
<h3>빠른 링크</h3>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">연락처</a></li>
</ul>
</div>
</div>

이 예제에서 우리는 여러 블록과 인라인 요소를 사용하여 간단한 블로그 레이아웃을 만들었습니다. <div> 태그를 사용하여 관련 콘텐츠를 그룹화하고, <span>을 사용하여 특정 텍스트 부분에 스타일을 적용했습니다. 다양한 블록과 인라인 요소를 혼합하여 콘텐츠를 구조화했습니다.

HTML은 레고와 같아요. 기본 블록으로 시작하고, 얼마 지나지 않아 놀라운 구조물을 만들게 될 거예요! 계속 연습하고, 실험을 두려워하지 마세요. 우리 모두 그렇게 배웠어요!

미래의 웹 마법사 여러분, 행복하게 코딩하세요! ?‍♂️?

Credits: Image by storyset