HTML 기초 및 태그 정리

HTML 입력 양식 태그 정리

HTML에서 입력 양식 태그는 사용자가 웹 페이지를 통해 서버에 데이터를 전송할 수 있도록 돕는 매우 중요한 요소입니다. 입력 양식 태그는 사용자의 데이터를 수집하여 서버로 전달하는 역할을 합니다. 기본적으로 두 가지 주요 입력 양식 태그가 있습니다.

1. input 태그

input 태그는 다양한 사용자 입력을 처리할 수 있는 다목적 태그입니다. type 속성을 사용하여 다양한 입력 형식을 지정할 수 있습니다. 자주 사용되는 input 태그의 type 속성 값은 다음과 같습니다.

• text: 텍스트를 입력할 수 있는 일반적인 텍스트 상자
• password: 입력한 내용을 가려주는 비밀번호 입력 상자
• file: 사용자가 파일을 업로드할 수 있도록 하는 파일 선택기
• submit: 폼 데이터를 서버에 제출하는 버튼
• reset: 폼의 모든 값을 초기화하는 버튼
• checkbox: 여러 개의 옵션을 선택할 수 있는 체크박스
• radio: 여러 옵션 중 하나만 선택할 수 있는 라디오 버튼

input 태그 속성

• name: 서버로 전송되는 데이터를 식별하는 데 사용됩니다. 예를 들어, 이름을 입력하는 input에는 name="name"을 사용할 수 있습니다.
• placeholder: 입력란 안에 힌트로 표시되는 텍스트입니다. 예: placeholder="이름을 입력하세요"
• value: 기본으로 입력된 값이나 제출할 때 전송되는 값입니다.
• maxlength: 입력할 수 있는 최대 글자 수를 제한합니다.
• checked: 체크박스나 라디오 버튼이 기본적으로 선택된 상태로 표시되도록 설정할 때 사용합니다.

<form action="/submit" method="post">
  <input type="text" name="username" placeholder="이름을 입력하세요"><br>
  <input type="password" name="password" placeholder="비밀번호를 입력하세요"><br>
  <input type="file" name="fileUpload"><br>
  <input type="submit" value="제출">
  <input type="reset" value="초기화">
</form>

이 예제는 이름과 비밀번호를 입력받고 파일을 업로드할 수 있는 폼을 보여줍니다.

2. textarea 태그

textarea 태그는 여러 줄의 텍스트를 입력할 수 있는 영역을 생성합니다. 예를 들어, 사용자가 긴 메시지나 설명을 입력할 때 사용됩니다. rows와 cols 속성을 통해 텍스트 영역의 크기를 조정할 수 있습니다.

<form>
  <textarea name="description" rows="5" cols="30">여기에 설명을 입력하세요</textarea>
</form>

주요 속성:

• rows: 텍스트 영역의 높이를 설정합니다.
• cols: 텍스트 영역의 너비를 설정합니다.
• maxlength: 입력 가능한 최대 문자 수를 제한할 수 있습니다.

---

select 태그 정리

select 태그는 사용자가 여러 옵션 중 하나 또는 여러 개를 선택할 수 있는 드롭다운 메뉴를 생성합니다. 이 태그는 웹 페이지에서 사용자에게 옵션 선택을 제한하는 데 매우 유용합니다.

select 태그 기본 구조

select 태그 내부에는 여러 개의 option 태그를 넣어 사용자가 선택할 수 있는 항목을 만듭니다.

<form>
  <select name="lunch">
    <option value="pizza">피자</option>
    <option value="burger">버거</option>
    <option value="sushi">스시</option>
  </select>
</form>

속성:

• name: 선택된 값이 전송될 때 사용할 이름을 지정합니다.
• multiple: 여러 개의 항목을 동시에 선택할 수 있도록 합니다.
• disabled: 드롭다운 메뉴를 비활성화할 때 사용합니다.

---

공간 분할 태그 정리: div와 span

웹 페이지의 레이아웃을 구성할 때 자주 사용되는 두 가지 태그가 있습니다: div와 span. 이 태그들은 의미 없이 공간을 분할하고 CSS를 적용하는 데 주로 사용됩니다.

1. div 태그

div 태그는 블록 레벨 요소로, 페이지에서 새로운 줄로 시작되며 그 안에 들어가는 요소들을 모두 묶습니다. 페이지의 큰 영역을 구분할 때 사용됩니다.

<div class="container">
  <div class="header">헤더 영역</div>
  <div class="content">본문 영역</div>
  <div class="footer">푸터 영역</div>
</div>

• 블록 레벨 요소: 화면 전체 너비를 차지하며, 새로운 줄로 시작합니다.

2. span 태그

span 태그는 인라인 레벨 요소로, 줄을 바꾸지 않고 텍스트나 요소를 꾸밀 때 사용됩니다.

<p>이 문장 중 <span style="color: red;">중요한 부분</span>만 강조됩니다.</p>

• 인라인 레벨 요소: 페이지 내에서 한 줄로 이어지는 형태로 표시됩니다.

---

시멘틱 웹과 시멘틱 태그

시멘틱 웹은 웹 페이지의 의미를 명확하게 하여 검색 엔진이나 사용자 보조 기기가 내용을 더 잘 이해할 수 있도록 돕는 기술입니다. 이를 구현하기 위해 시멘틱 태그를 사용합니다.

주요 시멘틱 태그:

• header: 페이지나 섹션의 머리말을 정의합니다.
• nav: 내비게이션 링크를 그룹화합니다.
• article: 독립적으로 배포하거나 재사용할 수 있는 콘텐츠를 정의합니다.
• footer: 페이지나 섹션의 바닥글을 정의합니다.

시멘틱 태그의 장점:

1. 검색 엔진 최적화(SEO): 검색 엔진이 페이지의 구조와 내용을 더 잘 이해하여 검색 순위를 높일 수 있습니다.
2. 웹 접근성 향상: 스크린 리더 등의 보조 기술이 콘텐츠를 더 잘 파악할 수 있습니다.
3. 개발 효율성: 코드를 더 명확하게 작성할 수 있어 유지보수가 쉬워집니다.

<header>
  <h1>시멘틱 웹의 예시</h1>
</header>
<nav>
  <ul>
    <li><a href="#home">홈</a></li>
    <li><a href="#about">소개</a></li>
  </ul>
</nav>
<article>
  <h2>시멘틱 태그의 중요성</h2>
  <p>시멘틱 웹은...</p>
</article>
<footer>
  <p>&copy; 2024 시멘틱 웹</p>
</footer>

시멘틱 태그를 활용하면 웹 페이지가 더 구조적이고 의미 있게 구성되어 사용자 경험을 개선할 수 있습니다.

---

이 글을 바탕으로 입력 양식, 공간 분할 태그, 시멘틱 웹에 대한 기초를 이해하고,
이를 통해 보다 의미 있는 웹 페이지를 작성할 수 있기를 바랍니다.