HTML 요소로 말하는 <div>, <span>, <ul>, <ol>, <li>, 그리고 <input>의 세계

HTML 요소로 말하는 <div>, <span>, <ul>, <ol>, <li>, 그리고 <input>의 세계 🌐

안녕하세요 여러분! 오늘은 HTML 요소인 <div>, <span>, <ul>, <ol>, <li> 그리고 <input>에 대해 자세히 알아보려 합니다. 이 포스트를 통해 각 요소가 무엇인지, 어떻게 사용되는지, 그리고 어떤 차이점이 있는지에 대해 알아볼 것입니다. 👀

<div>와 <span>의 이해와 차이점 📖

<div>와 <span>은 HTML에서 가장 많이 사용되는 요소 중 하나입니다. 이들은 웹페이지 내에서 특정 부분을 그룹화하는데 사용됩니다. 하지만 이 둘 사이에는 몇 가지 중요한 차이점이 있습니다. 자, 그러면 한 번 알아보겠습니다. 🧐

<div>요소란? 📚

<div> 요소는 'division'의 줄임말로, 웹페이지의 다른 부분과 분리된 영역을 만드는 데 사용됩니다. 이는 블록 레벨 요소로, 기본적으로 새로운 줄에서 시작하고 종료합니다.

<span>요소란? 📚

<span> 요소는 인라인 요소로, <div>와 달리 텍스트나 다른 인라인 요소 내에서 부분적인 변경을 위해 사용됩니다. 이는 새 줄에서 시작하지 않고, 다른 텍스트나 요소와 함께 한 줄에 위치할 수 있습니다.

예제로 본 <div>와 <span>의 차이점 🎯

<!-- <div> 요소의 사용 예제 -->

<div>

  <p>저는 블록 레벨 요소인 div입니다.</p>

</div>


<!-- <span> 요소의 사용 예제 -->

<p>저는 <span>인라인 요소인 span</span>입니다.</p>

위 예제를 보면, <div>는 블록 레벨 요소로 새로운 줄에서 시작하며, <span>는 인라인 요소로 텍스트 내에서 부분적인 변경을 위해 사용되는 것을 확인할 수 있습니다.

<ul>, <ol>, <li> 요소의 이해와 활용 📖

다음으로 <ul>, <ol>, <li> 요소에 대해 알아보겠습니다. 이들은 웹페이지에서 리스트를 만드는데 사용되는 HTML 요소입니다.

<ul>요소란? 📚

<ul> 요소는 'Unordered List'의 줄임말로, 순서가 필요하지 않은 리스트를 만드는 데 사용됩니다. 각 항목은 <li> 요소로 표현됩니다.

<ol>요소란? 📚

<ol> 요소는 'Ordered List'의 줄임말로, 순서가 있는 리스트를 만드는 데 사용됩니다. <ul>과 마찬가지로 각 항목은 <li> 요소로 표현됩니다.

<li>요소란? 📚

<li> 요소는 'List Item'의 줄임말로, <ul> 또는 <ol> 요소의 하위 항목을 나타냅니다.

예제로 본 <ul>, <ol>, <li>의 활용 🎯

<!-- <ul> 요소의 사용 예제 -->

<ul>

  <li>첫 번째 항목</li>

  <li>두 번째 항목</li>

</ul>


<!-- <ol> 요소의 사용 예제 -->

<ol>

  <li>첫 번째 항목</li>

  <li>두 번째 항목</li>

</ol>

위 예제를 보면, <ul>은 순서가 없는 리스트를, <ol>은 순서가 있는 리스트를 만들고, 각각의 리스트 항목은 <li> 요소로 나타내는 것을 확인할 수 있습니다.

<input> 요소의 이해와 다양한 활용법 📖

마지막으로 <input> 요소에 대해 알아보겠습니다. <input> 요소는 사용자로부터 다양한 형태의 입력을 받는 데 사용됩니다. type 속성을 통해 입력의 형태를 지정할 수 있습니다.

예제로 본 <input>의 다양한 활용 🎯

<!-- <input>의 다양한 type 예제 -->

<input type="text" placeholder="텍스트를 입력해주세요">

<input type="password" placeholder="비밀번호를 입력해주세요">

<input type="submit" value="제출">

<input type="radio" name="option" value="option1"> Option 1

<input type="checkbox" name="check" value="check1"> Check 1

<input type="number" min="0" max="10">

<input type="date">

<input type="color">

위 예제를 보면, <input>의 type에 따라 다양한 형태로 사용자 입력을 받을 수 있는 것을 확인할 수 있습니다.

마치며 📝

오늘은 HTML의 기본 요소인 <div>, <span>, <ul>, <ol>, <li>, 그리고 <input>에 대해 알아보았습니다. 이들 각각의 기능과 활용법을 이해하면, 웹페이지를 더욱 효과적으로 구성할 수 있을 것입니다. 다음 글에서는 다른 HTML 요소에 대해 더욱 자세히 알아보도록 하겠습니다. 그럼 다음에 뵙겠습니다! 👋

관련된 링크: W3Schools HTML Tutorial

출처: W3Schools