HTML5 입력 양식 태그와 구조화 태그

계절학기 기말고사를 치르느라 너무 바빴어요ㅠ 오늘부터 열심히 업로드해보도록 하겠습니다!

* 이 게시물은 HTML5 웹 프로그래밍 입문 3판 - 한빛 아카데미 책을 기반으로 작성됩니다*

* 스스로 공부하고 복습하는 개념으로 정리하는 것이기에 부족한 부분이 있을 수도 있습니다!*

 

---

오늘 정리할 내용은 입력 양식 태그입니다. 입력 양식별 특징을 이해하고, 블록 형식과 인라인 형식을 구분해보도록 하겠습니다.

 

1. 입력 양식 태그

입력 양식은 사용자에게 정보를 입력받는 요소라고 할 수 있습니다. 예를 들어 회원 가입 양식 등을 들 수 있는데요 간단한 입력 양식 내용을 살펴보도록 하겠습니다. 

 

1-1) 입력 양식 개요

입력 양식은 form 태그로 영역을 생성하고 내부에 input 태그를 넣어 만들어줍니다. form 태그는 method 속성의 방식으로 action 속성 장소에 데이터를 전달합니다.

form 태그의 속성을 살펴보면 다음과 같습니다.

<form action="전송 위치" method="전송 방식"> 

</form>   // 전송위치: 데이터를 전달할 목적지

method 속성에 입력해서 데이터를 전송할 때 가장 많이 사용하는 두 가지 전송방식에는 

• GET : 주소에 데이터를 직접 입력해 전달하는 방식
• POST : 별도의 방법을 사용해 데이터를 해당 주소로 전달하는 방식

웹 브라우저에 표시되는 URL을 살펴보면 차이가 느껴지는데, 간단하게 설명하면 GET 방식은 주소에 데이터를 입력해서 전달하는 방식이고 POST 방식은 비밀스럽게 데이터를 전달하기 때문에 데이터 용량에 제한이 없다는 것이 큰 특징이라고 할 수 있습니다. 

 

1-2) 입력 양식의 종류

HTML5는 다양한 입력 양식 태그를 지원합니다.

간단한 입력 양식을 생성해보도록 하겠습니다.

select태그와 optgroup태그를 사용하여 옵션을 선택해보는 예제를 보여드리도록 하겠습니다.

---

2. HTML5 문서 구조화

 

2-1) 공간 분할 태그

웹 페이지는 레이아웃 구성을 위해 공간을 구분하게 됩니다. 공간을 분할하여야 CSS로 원하는 레이아웃을 구성할 수 있다는 장점이 있습니다. 대표적인 공간 분할 태그는 div태그와 span태그입니다. 

• div 태그 : 공간을 블록 형식으로 분할합니다.
• span 태그 : 공간을 인라인 형식으로 분할합니다.

div 태그를 사용해 공간을 분할하면 각 태그가 한 행을 모두 차지하게 되는데 span태그로 바꾸어 실행하게 되면 태그는 자신의 글자 크기만큼 영역을 차지하게 됩니다. 이것이 두 가지 태그의 가장 큰 차이점이라고 할 수 있습니다. 

 

2-2) 시맨틱 태그

특정 태그에 의미를 부여해 웹 페이지를 만들기 시작했는데 이를 시맨틱 웹이라고 표현하게 됩니다. 즉, 시맨틱 웹은 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹을 의미하게 됩니다. 

시맨틱 태그들

---

지금까지 기본적인 HTML5 태그를 살펴보았습니다. 직접 코드를 입력하면서 익히면 더 기억에 오래 남을 것 같아요!

이제 다음장부터는 CSS3 기초에 대해 배워보도록 할게요!