2-5-4. 입력(input) 태그
2-5-5. 버튼(button) type의 태그
2-5-6. 글상자(text) type의 태그
2-5-7. HTML의 디스플레이
2-5. 태그(tag)
2-5-4. 입력(input) 태그
웹페이지에서 사용자로부터 입력을 받는 다양한 형식의 폼 요소를 생성하는데 사용됨.
<form></form> 태그의 안에 입력함.
< input type = ' 태그의 유형 ' ... > |
checkbox:
여러 개의 옵션 중에서 하나 이상의의 옵션을 입력받을 수 있도록 하는 버튼.
다수의 value값이 서버로 전달됨.
그룹을 맺기 위해 name은 동일하게, value는 모두 다르게 작성해야 함.
예)
<p> 취미: 운동 <input type="checkbox" name="hobby" value="운동"> 음악감상 <input type="checkbox" name="hobby" value="음악감상"> 영화감상 <input type="checkbox" name="hobby" value="영화감상"> 게임 <input type="checkbox" name="hobby" value="게임"> 등산 <input type="checkbox" name="hobby" value="등산"> </p> |
원하는 파일을 서버로 전송하기 위한 글 상자.
<p>첨부파일: <input type="file" name="file"> </p> |
number:
원하는 숫자를 입력받는 글 상자.
예) 1부터 10까지 1의 간격으로 숫자를 선택하고 싶은 경우.
<p> 좋아하는 숫자 <input type="number" min="1" max="10" step="1"> </p> |
color:
원하는 색상을 입력받는 요소.
선택한 색상은 16진수 RGB컬러값으로 서버에 전달됨.
예)
<p> 좋아하는 색상 <input type="color"> </p> |
search:
검색어를 입력받는 글 상자.
예)
<p> 검색어 <input type="search"> </p> |
range:
일정 범위안에 값만을 입력하는 조절 바.
예) 0부터 5까지의 범위에서 선택을 하는 경우 (기본값: 3)
<p>프로그래밍 능력: <input type="range" min="0" max="5" value="3"> </p> |
hidden:
보이지는 않으나 서버에 값을 전달하고 싶을 때 사용하는 글 상자.
어느 위치에 작성을 하더라도 상관없음.
예)
<input type="hidden" name="hidden" value="서버로 전달될 값"> |
HTML에서 hidden 속성을 사용하는 이유: 1) 액세스 가능성 (accessibility) 문제를 해결하기 위함. 스크린 리더 사용자가 특정 영역을 건너 뛰도록 하는 경우 hidden 속성을 사용하여 해당 영역을 화면에서 숨길 수 있음. 스타일 시트가 로드되기 전에 콘텐츠를 숨기는 데도 사용할 수도 있으며, 스타일이 적용되기 전에 페이지를 읽는 데 도움이 됨. 2) 보안 이슈를 방지하기 위함. 사용자가 입력한 비밀번호 또는 기타 민감한 정보를 포함하는 요소를 hidden 속성을 사용하여 숨길 수 있음. 3) 일부 콘텐츠가 일시적으로 사용되는 경우 화면에서 숨기기 위함. 일부 웹 사이트에서는 로딩 화면을 사용하여 사용자가 기다리는 동안 콘텐츠를 숨김. 4) 검색 엔진의 최적화(SEO)를 위함. hidden 속성을 사용하여 검색 엔진에서 인식하지 않도록 할 수 있음. |
2-5-5. 버튼(button) type의 태그
버튼을 생성하는 요소.
button:
이벤트가 없는 일반 버튼.
<button type="button"> 버튼클릭 </button> <input type="button" value="버튼클릭"> |
예) 라벨명 '클릭하세요' 버튼을 눌러 '안녕?' 이라는 알림창을 띄우고 싶은 경우
<input type="button" value="클릭하세요" onclick="alert('안녕?')"> # 팝업창을 띄우고 싶은 경우 : 'onclick='alert(팝업창내용)' |
reset:
입력받은 데이터를 초기화하는 버튼.
<button type="reset">버튼클릭</button> <input type="reset" value="버튼클릭"> |
예)
<input type="reset" value="다시입력"> |
submit:
입력받은 데이터를 서버에 제출하는 버튼.
<button>버튼클릭</button> <input type="submit" value="버튼클릭"> |
예)
<input type="submit" value="회원가입"> |
2-5-6. 글상자(text) type의 태그
email:
이메일을 입력받는 글상자 (@ 필요).
예)
<p>이메일: <input type="email"></p> |
url:
웹사이트를 입력받는 글상자 (http 필요).
예)
<p>웹사이트 : <input type="url"></p> |
tel:
전화번호를 입력받는 글상자 (모바일에서 숫자 키패드를 이용).
예)
<p>휴대폰번호: <input type="tel"></p> |
date:
원하는 날짜를 입력받는 글상자.
예)
<p>생년월일: <input type="date"></p> |
readonly:
데이터를 볼 수는 있으나, 수정을 할 수 없게 설정. (서버로 데이터가 전달됨.)
예)
<p> 나이: <input type="text" name="age" value="-1" readonly> </p> |
disabled:
입력필드를 사용할 수 없게 설정. (서버로 데이터가 전달되지 않음.)
예)
<p> 주민등록번호: <input type="text" name="ssn" disabled></p> |
required:
데이터를 submit 할 때, 데이터를 필수로 입력하도록 강제하는 설정.
예)
<p>아이디: <input type='text' name="userid" id="userid" required></p> |
option:
여러 개의 옵션이 드롭다운 리스트로 되어 있으며, 그 중에서 단 하나의 옵션만을 선택.
예)
<select> <option value="apple">김사과</option> '김사과'를 선택 → 서버에 입력되는 값은 'apple' <option value="banana">반하나</option> '반하나'를 선택 → 서버에 입력되는 값은 'banana' <option value="cherry">채애리</option> '채애리'를 선택 → 서버에 입력되는 값은 'cherry' <option value="melon">이메론</option> '이메론'를 선택 → 서버에 입력되는 값은 'melon' </select> |
textarea:
여러 줄의 텍스트를 입력받는 글상자. (value의 위치를 혼동하지 않는 것이 중요)
< textarea cols="가로로 작성할 글자 수" rows="세로 줄 수" > value < /textarea > |
예) '자기소개'라는 라벨의 행 30칸, 열 10칸의 글상자를 만들고 싶은 경우.
<p>자기소개</p> <p> <textarea name="content" cols="30" rows="10"> </textarea> </p> |
2-5-7. HTML의 디스플레이
inline
content 크기 만큼만 자리를 차지하는 요소.
txt(텍스트), img(이미지), span 등.
텍스트의 특징들을 갖고 있음.
span 태그
텍스트 단위로 영역이 설정.
inline 특징을 갖고 있음.
기본적으로 아무 기능은 없으나, inline의 style 코드를 추가할 수 있음.
예) pink색의 30px사이즈의 폰트로 'span 태그 영역'을 작성하고 싶은 경우
<span style="font-size: 30px; color:pink;"> span 태그 영역 </span> 입니다. |
block
line 전체를 차지하는 요소.
p, h, ul, li, div 등.
면의 특징들을 갖고 있음.
div 태그
면 단위로 영역이 설정.
block 특징을 갖고 있음.
span 태그와 동일한 개념으로, 최근에는 div를 이용해 페이지의 틀을 만드는 것이 트렌드이다.
div를 겹겹이 추가해서 사용하는 경우도 많음. 실무에서 많이 사용하는 요소.
예) 배경색 gold의 너비 600px, 높이 300px의 'div 태그 영역'을 작성하고 싶은 경우.
<div style="width: 600px; height: 300px; background-color: gold;">div 태그 영역 </div> |
시맨틱 태그(Semantic Tag) HTML 5에서 새롭게 추가된 태그. semantic은 '의미론적인'이라는 의미로, '의미가 있는 태그를 사용한다'는 의미. 이전의 HTML 버전에서는 div>div>div>....와 같은 끝없는 div를 표시하는 방식을 이용했음. → 태그들이 의미를 갖지 않아 검색엔진이 웹페이지를 인식하기가 어려운 상황. 시맨틱 태그를 사용하면, 개발자에게 문서의 의미나 웹페이지의 구조를 명확하게 전달해줌에 따라 HTML문서를 읽기 쉽고 이해하기 쉬운 구조로 만들 수 있음. 검색엔진의 최적화에 도움이 되어 웹페이지의 의미를 더욱 잘 파악할 수 있음. 시각장애인과 같은 액세스 가능성 문제 해결을 위해 스크린 리더(screen reader)가 더 나은 경험을 제공할 수 있음. |
스크린 리더(screen reader) 시각장애인이 컴퓨터를 사용할 때 화면에 표시되는 정보를 음성으로 출력해주는 S/W. 시맨틱 태그는 다양한 용도로 사용될 수 있으며, 예를 들어 하단과 같은 태그들이 있음. |
<header> </header>
페이지나 섹션의 제목을 정의하며, heading태그, 로고, 검색박스, 작성자명, 주요메뉴 등의 내용을 포함할 수 있음.
<nav> </nav>
웹페이지의 메뉴, 목차를 정의.
<main> </main>
지배적인 컨텐츠의 영역을 정의.
<section> </section>
구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 정의.
섹션에는 항상 제목이 있는 것이 일반적.
<article> </article>
의미가 있는 웹페이지의 부분. 독립적으로 배포 또는 재사용되도록 의도된 문서를 정의.
예) 게시물, 잡지, 블로그 또는 신문기사.
<footer> </footer>
페이지나 섹션의 하단에 위치하는 정보를 정의.
예) 작성자 정보, 저작권 데이터 또는 관련 문서에 대한 링크, 카피라이트.
<aside> </aside>
간접적으로 문서와 관련된 부가 내용을 정의.
예) 광고, 사이드바, 관련링크.
TIP
블로그가 무조건 정답은 아님. 맹신하지 말것.
AI쪽이 논문을 많이 읽을수록 좋으므로 석사쪽이 유리한 것은 맞음.
과제
HTML로 이력서를 만든 후 dothome에 업로드하기.
(index.html에 resume.html링크를 거는 방식으로 진행.)
http://wnsgml0420.dothome.co.kr/
초기 화면
wnsgml0420.dothome.co.kr
