front_chapter 2

03 HTML 기본 문서 만들기

03-01 HTML 과 첫 만남

HTML 이란?

HTML 이란 HyperText Markup Language의 줄임말입니다. 하이퍼텍스트란 문서를 서로 연결해주는 링크 개념을 의미하며, 웹 페이지를 서로서로 링크로 연결함을 그리고 마크업이란 말의 의미처럼 여러가지 자료들을 보여줄 수 있음을 의미한다.

아래의 그림에서 보드시 마크업 형식으로 표를 작성해야만 웹 브라우저는 각 내용들을 인식하고, 해당 부분을 구분하는데, 이때 사용하는 꼬리표를 태그(tag) 라고 한다.

03-02 HTML 구조 파악하기

Do it! 실습 ) HTML 파일 살펴 보기

1단계 : 웹 브라우저로 HTML 파일 실행하기 켜서, 사용하면 된다.

2단계 : 비주얼 스튜디오 코드에서 예제 파일 불러오기 작성하고 켜서 활용하면 된다~

HTML 문서의 기본 구조 살펴보기

웹 문서의 유형을 지정하는 선언문 `<!DOCTYPE html>` 태그

문서의 유형을 지정하여, 무엇으로 읽을지를 알려준다. 참고자료 현재의 HTML 5보다 이전 코드내용을 위해선 아래의 다른 코드로 저거야 사용이 가능했다.

HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

추가로 해당 태그의 정의는 딱히 신경 안써도 된다.

<!DOCTYPE html>  
<!DocType html>  
<!Doctype html>  
<!doctype html>

웹 문서의 시작을 알리는 `<html>` 태그

해당 태그가 문서의 유형을 선언한 뒤의 문서의 시작과 끝을 설명해주는 역할을 한다. 해당 태그의 끝을 표현하는 </html> 이후에는 아무런 내용이 없어야 한다. (해보니 일반적인 문자들은 그대로 출력이 된다.) 참고자료

좀더 디테일하게 들어가면 HTML 태그는 문서의 루트, 최상단 요소이며 따라서 root element라고도 부른다.

여기서 lang="ko"를 굳이 명시적으로 지정하는 것은, 한국어로 된 문서로 범위를 제한하기 위한 것이며, 웹 브라우저가 먼저 인식할 수 있도록 돕는 역할을 한다. 이때 중요한 것은 유효한 IETF 언어 식별 태그 를 지정하면 스크린 리더가 음성 표현에 사용할 언어 선택에 도움을 준다. 단, 디폴트는 운영체제 언어를 사용함.

또한 최상단에서 전역 특성 가지는 요소인 만큼 다른 요소들 내부에 중요 메타 데이터의 정확한 발음 표현 등을 가능케 하니 Default 로 둘 필요는 없다.

웹 브라우저에 문서 정보를 알려주는 `<head>` 태그

head 영역은 웹브라우저 화면에 보이는 부분은 아니며, 문서에서 사용하는 스타일 시트 등을 연결해주곤 한다.

문자 세트를 비롯해 문서 정보가 들어가는 태그

웹서버에서 영어가 기본이지만 화면에 한글로 된 내용을 표현해야 한다고 브라우저에게 알린다고 할 때 이 태그를 활용한다. <meta charset="UTF-8"

다양한 메타 태그 사용 방법

<meat name="keywords" content="html의 구조">
<meat name="descrition" content="html의 구조를 알아봅시다">
<meat name="author" content="haryu">

해당 태그 요소가 제공하는 기본적인 메타 데이터
- name : 특성을 지정하면 전체 페이지에 적용되는 '문서 레밸 메타데이터'를 제공한다. 즉, 전역변수처럼 지정하는 게 가능한 태그
- http-equiv : 우사한 이름의 HTTP 헤더가 제공하는 정보와 동일하느 '프래그마 지시문'이 된다(뭔지는 차후 찾기...)
- charset : 문자 인코딩 선언문
- itempro : 사용자 정의 메타데이터를 제공 #meta #tag

문서 제목을 나타내는 <title> 태그

해당 태그는 웹 문서의 제목을 표시하는 역할을 한다.

웹 브라우저 제목 표시줄에도 표시가 되고, 해당 페이지의 방문자나 검색엔진은 제목 표시줄의 제목을 보고 페이지 전체를 추측한다던가, 즐겨찾기의 제목으로 지정된다던가 한다.

웹 브라우저에 내용을 표시하는 `<body>` 태그

해당 태그는 지금까지 입력한 태그와는 달리 실제 웹 브라우저 창에서 표시할 내용을 입력하는 부분이다.

03-3 HTML 파일 만들기

Do it! 실습 ) VSC 에서 새로운 HTML 파일 만들기

1단계 폴더 선택하기
2단계 새 파일 만들기
3단계 새 파일 이름 입력하기
4단계 새파일 확인하기

Do it! 실습 ) 자동 완성 기능을 이용하여 HTML 파일 완성하기

1 단계 문서 유형 지정하기
2 단계 <html>입력하기
3 단계 사용 언어 지정하기
4 단계 <head>, <meta>, <title> 태그 입력하기
5 단계 <body> 태그와 <h1> 태그 입력하기
6 단계 <h1> 태그 입력하고 저장하기

Do it! 실습 ) 라이브 서버 설치하고 웹 브라우저에서 바로 결과 확인하기

익스텐션으로 설치 후 지정한 파일에서, 라이브 서버에서 열기를 누르면 로컬 네트워크 상에서 접속하는 구조. 저장하면 적용되고, 쓰기 편리하니 테스트 용으로 괜찮은듯.

Do it! 실습 ) HTML 의 기본 구조 자동으로 만들기

아무것도 없는 HTML 문서에서 '!' 를 넣고 tab, enter를 치면 기본 태그 구조가 자동으로 붙는다. 그 다음은 필요한 수정사항들을 수정하면서 진행하면 된다.

03-4 웹 문서 구조를 만드는 시맨틱 태그

시맨틱 태그 알아보기

HTML의 태그들은 이름으로 그 의미를 알 수 있기에 시멘틱(sementic)태그라고 부른다.이는 시멘틱이 의미론 적, 의미가 통하는, 체계적인 이란 의미를 갖고 있기 대문이다.

우리가 사용하는 웹 사이트의 디자인들은 달라보여도 공통적인 부분들이 존재하고, 이를 HTML 태그를 추가하여 구현하거나, 이를 통해 이해할 수 있다.

시맨틱 태그는 왜 필요할까요

사실 없어도 된다. 그러나 why?

웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분인지 이해하기가 빠르다. 시각 장애인이 화면 낭독기와 같은 보조 기기를 사용한다고 할 때, 브라우저는 이에 대한 내용을 보다 정확하게 준다.
문서 구조가 정확히 나눠지므로 다양한 디바이스의 화면에 웹 문서 표현이 쉬워진다.
웹 사이트 내부 내용을 검색하는 등의 행위에서 영역별로 검색 여부를 결정한다.

웹 문서 구조를 만드는 주요 시맨틱 태그

헤더 영역을 나타내는 <header> 태그 헤더 영역 전체를 의미한다. 사이트 전체 헤더 말고도 특정 영역 헤더도 존재함. 주로 맨 위나 왼쪽에 있고, 검색창이나 사이트 메뉴를 삽입한다.
내비게이션 영역을 나타내는 <nav>태그 흔히 네비게이션 메뉴를 만들 때 사용하는 태그이며, 해당 태그는 웹 문서에 위치에 대하여 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함될 수도 있다. 독립해서 사용할수도 있다.
핵심 콘텐츠를 담는 <main> 태그 메인 콘텐츠를 담는 용도이며, 웹 문서마다 다르게 보여주는 내용으로 구성합니다. 웹 문서에서 한 번만 사용할 수 있는 태그이다.
독립적인 콘텐츠를 담는 <article> 태그 실제 단어 뜻 대로 실제로 보여주고 싶은 내용을 넣고, 신문 기사의 포스트 처럼 독립된 내용을 넣을 수 있고, 해당 태그는 여러개 사용이 가능하다. 이 안에는 <section> 태그를 사용하는 것도 가능하다.
콘텐츠 영역을 나타내는 <section> 태그 <article> 과 유사한 역할을 하지만, 몇개의 콘텐츠를 묶는 용도로 쓸 수 있다는 점에서 다르다. (단 스타일만 적용하려고 컨텐츠를 묶는 경우 <div> 태그를 쓴다.)
사이드 바 영역을 나타내는 <aside> 태그 왼쪽이나 오른쪽, 혹은 아래에 사이드바를 만들어주는 태그
푸터 영역을 나타내는 <footer> 태그 웹 문서 맨 아래의 영역으로 사이트 제작 정보나 저작권, 연락처 등을 기록하며, 푸터 영역 자체에 <header>, <section>, <article> 등 다른 시맨틱 태그를 모두 사용 가능하다.
여러 소스를 묶는 <div> 태그 과거에 시멘틱 태그인 <header> 나 <section> 등의 태그가 나오기 전에 영역을 구분하기 위하여 사용했고, 현재도 그렇게 구분하는 역할을 위해 사용한다. 영역, 스타일의 속성을 부여하는 등의 역할을 여전히 수행할 수 있는 태그다. ****

04 웹 문서에 다양한 내용 입력하기

04-1 텍스트 입력하기

<hn> : 제목, 1 ~ 6 까지 사용 가능하며, 숫자가 커질 수록 글자 작아짐
<p> : 텍스트 단락, 내용이 길면 웹브라우저 창의 너비에 맞게 자동으로 줄 바꿈.
- 편집기에서 단락을 추가해도, 웹 브라우저 상에선 한 줄로 표시됨.
- <br> 태그와 비교하여, 둘다 동일한 기능을 한다. 그러나 실제로 단락이 만들어진 게 아니기에, CSS를 사용해 텍스트 단락 스타일 적용이 되지않음. 따라서 CSS 적용을 위해선 <p> 를 사용해야 한다.
<br> : 줄 바꿈, 텍스트 단락 중 원하는 위치에서 줄을 바꿈.
<blockquote> : 내용 인용. 다른 내용들 보다 들여 쓰고 단락으로 표시함.
- 기본형 : <blockquote>인용문</blockquote>
<strong> : 중요한 텍스트를 굵게 표시, 화면낭독기가 강조해서 읽어 준다.
<b> : 중요하지는 않지만 굵게 표시(화면 낭독기에서 강조 안 함)
<em> : 중요한 텍스트를 기울게 표시하며, 화면 낭독기에서 강조해서 읽어줌.
- emphasis 의 줄임말로 생각하면 이해가 빠름.
<i> : 중요하지 않지만, 기울게 표시합니다.
- italic 의 줄임말로 생각하면 이해가 빠름.
- 보통 용도적으로 마음 속 생각, 용어, 관용구 등을 단순 부각시키는 용도라고 보면 됨.
<ins> : 내용을 편집할 때 추가한 내용을 표시합니다.
<del> : 내용을 편집할 때 삭제한 내용을 표시합니다.
<sup> : 위첨자
<sub> : 아래첨자
<abbr> : 줄임말을 표시하고, title 속성을 함께 사용 가능하다.
- 사용 예시 : <abbr title="Internet of Things>IoT</abbr>
<cite> : 웹 문서, 포스트에서 참고 내용을 표시
- 사용 예시 : <p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다. - 영화, <cite>'비포선셋'</cite> 중 </p>
<code> : 컴퓨터가 인식을 위한 소스 코드.
- 사용 예시 : <code>function savetheLocal( )</code>
<small> : 부가 정보처럼 작게 표시한다.
<s> : 취소선을 표시한다.
<u> : 밑줄을 표시한다.

04-2 목록 만들기

<ol> : 순서 있는 목록의 시작과 끝(ordered list)
- type 속성을 사용하면 영문자, 로마 숫자 등으로 순서를 나타낼 수 있다.
- start 속성을 사용하면, 시작하는 순서 목록 | 종류 | 설명 | |:-:|:-:| |type = "1" | 숫자(기본값) | |type = "a" | 영문 소문자 | |type = "A" | 영문 대문자 | |type = "i" | 로마 숫자 소문자 | |type = "I" | 로마 숫자 대문자 |
<ul> : 순서 없는 목록의 시작과 끝
<li> : 순서 있는 목록이나 순서 없는 목록의 각 항목. 각 시작과 끝을 알리는 태그 뒤에 넣으면 각 목록의 줄이 추가 된다.
<dl> : 설명 목록의 시작과 끝
- 기본형 :

<dl>
	<dt>이름</dt>
	<dd>값</dd>
</dl>

<dt> : 설명 목록의 이름(제목)
<dd> : 설명 목록의 값(설명)

04-3 표 만들기

표(table)의 구성요소는 행(row)과 열(column) 그리고 셀(cell) 로 이루어 집니다.

<table> : 표를 나타냄
<caption> : 표의 제목
<tr> : 표의 행
<td> : 표의 셀
<th> : 제목 셀

좀더 나아가서 일부 표들의 구조와 구성을 만들 때가 있다. 이때 아래와 같은 구조로 만들게 된다. 각 태그는 표table 의 t에 각각 제목head, 본문body, 요약foot 을 각각 합친 말이다.

이러한 구조를 지정 시 화면 낭독기를 통해 표를 쉽게 이해할 수 있도록 할 수 있고, 각 표의 제목, 본문, 요약의 각각 다른 CSS 설정이 가능하다.

<thead> : 표 구조에서 제목 부분
<tbody> : 표 구조에서 본문 부분
<tfoot> : 표 구조에서 요약이나 정리 부분

우리가 표를 사용하다보면 표 내부의 행이나 열을 연속으로 각 셀을 합쳐서 사용하는 경우가 있다. 이러한 경우를 지정하는 속성이 rowspan과 colspan 속성이다.

/* 기본형 */

<td rowspan="합칠 셀 개수">셀의 내용</td>
<td colspan="합칠 셀 개수">셀의 내용</td>

합치는 경우 뿐만 아니라 특정 열에 배경색을 넣거나 너비를 바꾸려면 원하는 열을 선택해야하고, 이때 아래의 두 태그를 활용하면 된다.

<col> : 표에서 열 스타일 지정
<colgroup> : 표에서 여러 열을 함께 묶어서 스타일을 지정

/* 기본형 */
<colgroup>
	<col>
</colgroup>

/* 특정 열에 스타일 속성 지정하기 */

/* (... 생략 ...) */
<table>
	<caption>선물용과 가정용 상품 구성</caption> 
	<colgroup>
		<col style="background-color:#eee;">
		<col> /* 스타일이 없어도 해당 명시를 통해, 해당 줄은 변하지 않음을 나타낸다. */
		<col style="width:150px;">
		<col style="width:150px;">
	</colgroup>
<thead>
/* (...생략...) */

04-4 이미지 삽입하기

<img> : 이미지 파일을 삽입. 가장 기본적인 태그다.
- 기본형 : <img src="이미지 파일 경로" alt="대체용 텍스트>"
- alt : 화면 낭독기, 이미지가 정상적으로 로드가 안되었을 때 대신해서 낭독되거나 표시 되는 텍스트다.
- 이미지 크기를 조절하는 width, height 속성
  - 기본형 : <img src="경로" alt="대체명" width="50%" height="55%">
  - 해당 속성을 위해서 이미지 크기를 표현하는 단위
    % : 이미지 크기의 값을 퍼센티지로 지정하면, 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정한다.
    px : 이미지 크기의 값을 픽셀로 지정해서, 이미지 너비나 높이를 아예 고정시킨다.

웹에서 사용하는 대표적인 이미지 파일 형식에 대해 알아두는 것이 필요하다고 판단하여, 종류에 대해서 기록해본다.

종류

설명

GIF (graphic interchange format)

네트워크 상에서 빠른 이미지 전송을 위해 개발됨. 256가지 색을 표현가능하고, 압축률이 높지 않다. 그러나 애니메이션 제작이 가능하고, 배경을 투명하게 처리 할 수 있다는 점에서 여전히 사용됨.

JPG/JPEG (joint photographic experts group)

주로 사진 이미지용. GIF 대비 표현할 수 있는 색의 개수가 1,600만개 색을 표현하면서도, 데이터의 압출 효율이 좋다. 고화질 사진에 적합하다. 단 글자, 로고, 아이콘등 날카로운 면이 주로인 이미지에선 손상되는 경향이 있음.

PNG (portable network graphics)

무손실 압축방식에 32비트 트루 컬러 처리가 되어 있다. 파일 사이즈가 커지는 만큼 더 선명한 사진을 제공하며, 날카로운 면에대한 표현의 손실도 없다. 대부분의 웹 사이트 로고, 텍스트, 아이콘 도형 등에선 주로 사용됨.

WebP

구글이 개발한 JPG, PNG, GIF를 모두 대체하고자 만든 포맷. 그러나 브라우저마다 지원 여부가 다르다. 검색엔진에서 검색 순위가 높아진다.

<object> : 멀티미디어, PDF 등 다양한 형식의 파일을 삽입
- 기본형 : <object width="너비" height="높이" data="파일"></object>
<embed> : <audio>, <video> 태그와 <object> 태그도 지원하지 않는 경우 멀티미디어 파일을 삽입하는 방식
- 기본형 : <embed src="파일 경로" width="너비" height="높이">
- 웹브라우저에서 오디오나 비디오, 객체를 위한 태그가 지원되지 않으면 대체해서 사용할 수 있다.

종류

확장자

내용

비디오

mp4

많이 사용하는 비디오 형식이며, 웹에서는 무료로 쓸 수 있음.

webm

화질이 우수하고 무료라서 mp4와 함께 많이 사용된다.

오디오

mp3

대부분의 음원에서 사용하고, 2017년 이후 라이선스 종료로 무료로 사용이 가능함.

mp4, m4a

mp3의 문제점을 개선한 AAC 코덱을 사용한 파일 형식.

아래의 표는 웹 브라우져별 오디오, 비디오 파일 지원 여부를 나타냅니다. 전반적으로 webm 을 제외하곤 잘 지원합니다.

04-5 오디오와 비디오 삽입하기

예전 HTML4 버전까지만 해도 멀티미디어 파일 삽입후 재생 시 플러그인 프로그램이 따로 필요했다(실버라이트라던가.. ㄷ ㄷ ). HTML5 이후에는 바로 멀티미디어 파일 삽입 및 재생이 가능해 졌다. 단, 브라우저라도 버전에 따라 상이할 수 있다는 점을 알아두어야 한다. 사용 교재는 크롬 87버전을 기반으로 설명해주었다.

<audio> : 오디오 파일을 삽입
<video> : 비디오 파일을 삽입

/* 기본형 */
<audio src="파일경로"></audio>
<video src="파일경로"></video>

controls 속성 : 해당 속성이 기입되면 재생의 컨트롤바가 나타나게 된다. 비디오 태그에서도 당연히 쓸수 있으나, 너빗값이 지정되지 않으면 웹 브라우저에 가득찰 수 있다.

<audio src="파일경로" controls></audio>
<video src="파일경로" controls width="700px"></video>

controls 이외에 태그들은 다음과 같다.
- autoplay : 자동 재생
- loop : 반복 재생
- muted : 오디오나 비디오 소리를 제거
- preload : 페이지를 불러올 때 어떻게 파일을 로딩할지 지어함.
  - 기본형 : preload="auto"
  - auto
  - metadata
  - none
- width, height : 비디오 플레이어의 너비와 높이, 하나만 넣을 시 나머지는 자동 계산하여 지정됨
- poster="파일 경로" : 비디오가 재생되기 전에 화면에 표시될 포스터 이미지를 지정

04-6 하이퍼링크 삽입하기

<a> : 웹 사이트의 링크 기능으로 사용되는 것이 해당 태그. 이때 텍스트 or 이미지를 넣으면 링크가 가능해진다.
- 기본형 : <a href="링크할 주소">텍스트 또는 이미지</a>

/* 사용 예시 */
(... 생략 ...)
<div>
	<p><a href="../05/order.html">주문서 작성하기</a></p>
</div>
(... 생략 ...)

해당 링크 태그를 사용하며 클릭을 하면 색깔이 바뀌게 되고, 깔끔하지 않으므로 일반적으로 글자색을 고정해놓아야 한다.
이미지 링크 만들기

/* 사용 예시 */
(... 생략 ...)
<div>
	<p><a href="../05/order.html"><img src="images/tangerines.jpg" alt="레드향"></a></p>
</div>
(... 생략 ...)

target 속성 : 현재 열려 있는 웹 브라우저 창에서 새로운 문서가 나오는 기본 값을 수정하여 새로운 탭에 나타나게 만드는 속성.
- 기본형 : <a href="파일 경로" target="_blank">텍스트나 이미지</a>

05 입력 양식 작성하기

05-1 폼 삽입하기

form 이라는 것은 웹 사이트 내에서 정보를 기입하고, 클라이언트 유저와 서비스 간의 상호 소통에 역할을 한다고 해도 과언이 아님

사용자가 이러한 폼에 정보를 기입하고, 작동을 하게 되면 서버는 자신이 가진 데이터베이스에 연결된 데이터를 대조하거나, 새로이 생성하는 작업을 한다. 그리곤 그 뒤에 서버쪽에서 마무리 된 작업의 결과물이 프론트 앤드를 따라 가게 되고, 결과적으로 사용자에게 기입한 정보에 따른 서비스의 변화를 보여준다.

즉, 이러한 폼과 관련된 작업에서 저장, 검색, 수정 등의 모든 작업이 데이터 베이스 기반으로 작동하고, 이를 위한 형태는 HTML 안에서 만들어지지만, 폼에 입력한 정보 처리나 그 전체 과정은 ASP, PHP, JSP 같은 서버 프로그래밍을 이용해 처리 된다.

폼을 만드는 `<form>` 태그

기본형 : <form [property="value"]>여러 폼 요소</form>
해당 태그는 속성을 사용해 입력받은 자료를 어떤 식으로 서버로 넘길 지를 지정합니다. 해당 태그의 속성은 다음과 같습니다.

종류

설명

method

사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지를 지정합니다. • get : 데이터를 256 ~ 4096 바이트까지만 서버로 넘길 수 있습니다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있습니다. • post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않습니다.

name

자바스크립트로 폼을 제어할 경우 폼의 이름을 지정합니다.

action

폼 태그 안에 처리해줄 서버 프로그램을 지정합니다.

target

action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 합니다.

자동 완성 기능을 나타내는 autocomplete 속성

폼의 내용을 입력시 예전 내용을 자동으로 표시해주는 속성으로, 자동 완성 기능 이라고 부르며, 사용시 이전 입력과 유사한 글자가 입력되면 이를 힌트로 보여줍니다.

단, 개인정보나 인증번호와 같은 일회성 정보 입력시 해당 기능은 사용하지 않으면 되며, 기본 값이 'on' 인 만큼, 명시적으로 속성을 'off' 하십시오.

<form action="target.php" autocomplete="off"></form>

폼 요소를 그룹으로 묶는 `<fieldset>`, `<legend>` 태그

<fieldset> : 폼 안에 여러 구역을 나눌 때 쓰는 태그
- 기본형 : <fieldset [property="value"]> </fieldset>
<legend> : <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있음.
- 기본형 : <legend>내용</legend>

폼 요소에 레이블을 넣는 `<label>`태그

*<label> 태그는 <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용한다.
- 기본형 : <label>레이블명<input></label>
label 태그와 input 태그를 연결시키기 위해선 다음과 같은 형태가 들어가야 합니다.
- 기본형 : <label for="uniq-id">레이블명<input id="uniq-id"></label>

05-2 사용자 입력을 위한 input 태그

폼의 형태는 대부분 <input>태그를 통해 진행되고, 따라서 여기어 어떤 특성이 있는지 이해하면 좋습니다.

웹 폼의 다양한 곳에서 사용하는 `<input>` 태그

크롬에서 마우스 우클릭 - '검사' 항목을 선택하면 해당 페이지의 프론트엔드 구조를 볼 수 있다.

`<input>` 태그의 type 속성 한 눈에 살펴보기

기본적으로 이 태그는 type 이라는 속성에 주는 값에 따라 입력에 형태가 제한된다. 아래의 표는 <input> 태그에 사용 가능한 type 속성을 정리 한 것이다.

종류

설명

text

한 줄 짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣습니다.

password

비밀번호를 입력할 수 있는 필드를 넣습니다.

검색할 때 입력할 수 있는 필드를 넣습니다.

url

URL 주소를 입력할 수 있는 필드를 넣습니다

이메일 주소를 입력할 수 있는 필드를 넣습니다.

tel

전화번호를 입력할 수 있는 필드를 넣습니다.

checkbox

주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣습니다.

radio

주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣습니다.

number

숫자 조절할 수 있는 스핀 박스를 넣습니다.

range

숫자를 조절할 수 있는 슬라이드 막대를 넣습니다.

date

사용자 지역을 기준으로 날짜(연, 월, 일)를 넣습니다.

month

사용자 지역을 기준으로 날짜(연, 월)를 넣습니다.

week

사용자 지역을 기준으로 날짜(연, 주)를 넣습니다.

time

사용자 지역을 기준으로 시간(시, 분, 초, 분할초)을 넣습니다.

datetime

국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할초)을 넣습니다.

datetime-local

사용자가 있는 지역을 기준으로 datetime 태그로 넣습니다.

submit

전송 버튼을 넣습니다.

reset

리셋 버튼을 넣습니다.

image

submit 대신 이미지를 넣습니다.

button

일반 버튼을 넣습니다.

file

파일 첨부 버튼을 넣습니다.

hidden

사용자에게 보이지는 않지만 서버로 넘겨주는 값의 필드를 만듭니다.

텍스트와 비밀번호를 나타내는 type="text" 와 type="password"

주로 아이디나 이름, 주소 등을 한줄 짜리 텍스트 입력 시 사용합니다. 비밀번호 필드는 당연히 다른 문자로 대체되도록 되어 있어야 한다.

기본형 :
- <input type="text">
- <input type="password"

해당 필드에 사용 하는 주요 속성은 다음과 같다.

size : 필드 길이를 지정한다. 이는 화면에 보이는 길이를 지정하는 것입니다. (단순 화면 보이는 크기용)
value : 디폴트 값으로 먼저 보여줄 텍스트 필드 값을 기재합니다. 비밀번호 필드에선 사용하지 않습니다. 해당 속성은 사용 시 자동으로 지워지지 않고, 필드에 미리 값을 채우는 방식인 만큼 실제 사용될 것 같진 않습니다.
maxlength : 텍스트, 비밀번호 필드의 입력 가능 최대 문자를 지정합니다.

다양한 용도에 맞게 입력하는 type="search", type="url", type="email", type="tel"

HTML 5가 되면서 텍스트 필드고 같은 속성을 사용할 수 있지만, 용도에 맞게 구분을 위해 세분화 하는 용도입니다.

search : 검색용. 웹 브라우저에서 이 필드에선 오른 쪽에 x 마크가 생성됩니다.
url : HTML 5 이전까진 입력 값을 자바스크립트로 확인해야 했습니다. 그러나 HTML5부터는 해당 태그를 활용해 브라우저가 알아서 확인해 줍니다. 만약 지정 형식에 맞지 않으면 오류 메시지를 보여줍니다.
tel : 전화번호를 나타내는 필드입니다. 단, 지역마다 형식이 달라 사용자가 입력한 값이 전화번호인지 체크는 하지 않고, 모바일에선 바로 전화를 걸 수 있습니다.

이러한 세분화된 필드는 PC용 웹 브라우저에선 큰 변화를 보이지 않지만, 보알이에서는 이에 대하여 가상 키보드 배열이 바뀌는 등의 차이점이 있습니다.

체크 박스와 라디오 버튼을 나타내는 type="checkbox", type="radio"

각각 2개 이상, 혹은 1개를 선택하는 용도입니다. 라디오 버튼은 1개만 선택할 수 있어서 1개 선택 시 기존 선택이 취소 됩니다.
기본형
- <input type="checkbox">
- <input type="radio">
두 버튼은 두 가지 속성을 사용 할 수 있다.
- value : 선택한 체크 박스나, 라디오 버튼을 서버에게 알려줄 때 넘겨주는 값을 지정해 준다.
- checked : 기본값으로 선택 하려고 할 때 사용 하는 것으로 속성값은 따로 없습니다.
- name : 해당 속성은 php와 같은 폼 요소를 제어할 때 쓰며, 라디오 버튼의 경우 해당 값이 동일한 태그들은 동일한 질문의 선택지처럼 작동하게 됩니다.

숫자 입력 필드를 나타내는 type="number", type="range"

number 를 사용하면 스핀박스가 나타나고, range 슬라이드 막대를 움직여 숫자를 입력할 수 있습니다.
해당 타입에서 사용 할 수 있는 속성 | 속성 | 설명 | |:-|:-| |min|필드에 입력할 수 있는 최솟값을 지정합니다. 기본값은 0입니다.| |max|필드에 입력할 수 있는 최댓값을 지정합니다. 기본값은 100입니다.| |step|숫자 간격을 지정할 수 있습니다. 기본값은 1입니다.| |value|필드에 표시할 초깃값입니다.|

날짜 입력을 나타내는 type="date", type="month", type="week"

웹 문서나 어플리케이션에 달력을 넣으려면 type 관련 유형을 이용하면 됩니다.
- 기본형 : <input type="date | month | week">
각 type은 | 로 연결되고, date 는 yyyy-mm-dd를 month는 yyyy-mm 을 week 은 몇 번째 주인지를 표시합니다.
|의 경우 W3C 표준 규약에서 사용하는 방식으로 나열한 옵션 중 하나가 속성값이 되어야 한다 의 의미로 or 속성을 담고 있다고 보면 될 것같다.

시간 입력을 나타내는 type="time", type="datetime", type="datetime-local"

시간을 지정할 때 사용하는 방식으로 날짜와 함께 사용시 datetime, datetime-local 을 사용합니다.

기본형 : <input type="time | datetime | datetime-local"
datetime 속성의 경우 둘 중 하나만 넣으면 됩니다.
날짜와 시간을 제한할 경우 아래와 같은 속성을 추가로 기입함으로써 제한을 하는 것이 가능합니다.
- min : 날짜나 시간 범위 제한시 사용 가능하며, min 속성은 범위의 시작을, max는 끝을 조정합니다.
- max :
- step : 스핀 박스 화살표 클릭시 증감 시킬 크기를 지정합니다.
- value : 기본적으로 표시할 날짜나 시간을 지정합니다.
- 예시 : 날짜 범위 제한하기 <input type="date" min="2020-02-01" max="2020-02-15">

전송, 리셋 버튼을 나타내는 type="submit", type="reset"

폼에 입력한 정보를 서버로 전송하는 역할을 합니다. <form> 태그의 action 속성에 지정된 프로그램으로 처리되도록 넘겨 집니다. 반면에 <reset> 버튼의 경우 입력된 값을 모두 재설정하는 것이 가능합니다.

기본형 : <input type="submit | reset" value="버튼 표시 내용">

이미지 버튼을 나타내는 type="image"

submit 버튼과 같은 기능을 하는 이미지 버튼을 나타냅니다.
기본형 : <input type="image" src="이미지 경로" alt="대체 텍스트">

기본 버튼을 나타내는 type="button"

오직 버튼 형태만 삽입하는 것으로, 주로 자바 스크립트를 실행하는 형태로 쓰기 위해 사용합니다.
기본형 : <input type="button" value="버튼에 표시할 내용">

파일을 첨부할 때 사용하는 type="file"

간혹 파일 첨부가 필요할 때 사용하는 태그입니다.
기본값 : <input type="file">

히든 필드 만들 때 사용하는 type="hidden"

사용자에게 굳이 보여줄 필요는 없지만 관리자가 알아야 하는 히든 필드를 입력합니다.
기본값 : <input type="hidden" name="이름" value="서버로 넘길 값">
대표적으로 여러 로그인 상황에서 어떤 방식으로 로그인을 했는지 등을 지정해주는 등으로 활용이 가능하다.

05-3 input 태그의 주요 속성

자동으로 입력 커서를 갖다 놓는 autofocus 속성

해당 속성을 넣게 되면 페이지를 불러오자 마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있습니다.

힌트를 표시해 주는 placeholder 속성

해당 속성을 넣으면 입력 란의 적당한 힌트를 표시하다가, 필드를 클릭하면 디폴트 문장이 사라지도록 만드는 속성입니다.

읽기 전용 필드를 만들어주는 readonly 속성

사용자가 입력하지 못하지만, 읽기 전용으로 필드를 만들어 둘 수도 있으며 이를 위해선 readonly 속성을 쓰거나 readonly=readonly, readonly=true라고 입력하면 됩니다.

필수 입력 필드를 지정하는 required 속성

해당 속성을 입력하면 submit 버튼으로 서버로 전송 과정에서 필수 요소가 채워졌는지 검사를 진행합니다. 이를 위해선 required라고 기재하면 됩니다.

버튼들의 경우 최상위 하나의 버튼만 선택하면 name 속성으로 연결 된 모든 버튼을 브라우저가 알아서 검사해줍니다.

05-4 폼에서 사용하는 여러 가지 태그

여러 줄을 입력하는 텍스트 영역 `<textarea>`태그

텍스트 영역으로 값을 받아 전송하는 것을 textarea 라고 합니다.
기본형 : <textarea>내용</textarea>
내용을 적어버리면 해당 칸에 '내용'이라는 값이 실제로 들어가니 placeholder를 사용하는게 낫습니다.
사용하는 속성이 존재하는데, 화면에 텍스트를 몇줄 표시할 지를 row로 지정할 수 있고 cols 속성으로 글자수를 지정할 수 있습니다.
이때 한글은 지정된 cols 숫자 / 2 값만 들어갈 수 있습니다.
rows 속성의 경우 지정 숫자보다 줄 수가 많아지면 스크롤 막대가 생깁니다.

드롭다운 목록을 만들어주는 `<select>`, `<option>`태그

사용자가 내용을 직접 입력하는게 아닌 여러 옵션 중 선택하는 드롭다운 목록이나 데이터 목록을 만드는 용도입니다.
기본형 :

<p>
	<label for="drop_down_1">선택지</label><br>
	<select id="drop_down_1" style="width:200px;">
		<option value="1">내용1</option>
		<option value="2">내용2</option>
		<option value="3">내용3</option>
		<option value="4">내용4</option>
		<option value="5">내용5</option>
	</select>
</p>

<select> 태그 속성 알아보기
- size : 화면에 표시할 드롭다운 항목의 개수 지정
- multiple : 드롭다운 목록에서 둘 이상 항목을 선택할 때 사용.
<option>태그의 속성 알아보기
- value : 해당 항목을 선택할 때 넘겨줄 값을 지정합니다.
- selected : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여줄 항목을 지정합니다.

데이터 목록을 만들어주는 `<datalist>`, `<option>`태그

데이터 목록을 사용하면 필드에 값을 직접 입력하지 않고 미리 만들어서 선택 하도록 만들 수 있습니다.
기본형 :

<lable for="data_list">데이터 목록 만들기</lable>
	<p>
		<input type="text" list="data_list">
		<datalist id="data_list">
			<option value="@gmail.com">@gmail.com</option>
			<option value="@naver.com">@naver.com</option>
			<option value="@daum.net">@daum.net</option>
		</datalist>
	</p>

버튼을 만들어주는 `<button>`태그

앞에서 사용한 type=button 과 유사한 태그입니다. 기본적으로 동일하게 작동하며, type 속성으로 어떤 속성으로 작동할지를 결정할 수 있습니다.
기본형

<p>
	<button type="submit">이거 버튼인듯_전송</button>
	<button type="reset">이거 버튼인듯_리셋</button>
	<button type="button">이거 버튼인듯_자바 실행용</button>
</p>

특징으론 화면 낭독기로 웹 문서를 읽어줄 대 이 태그를 만나게 되면 버튼이라는 것을 명확하게 전달해줍니다.
뿐만 아니라 해당 태그는 버튼이 필요한 웹 문서에 다양하게 활용이 가능하고, 꾸미는 것도 가능합니다.

Previousfront_chapter 1 Nextfront_chapter 3

Last updated 2 years ago