CONTENTS
Section5 입력양식과 공간 분할 태그
2.입력 양식 태그
3.공간 분할 태그
참고사이트) Pixlr Editor
----------------------------------------------------------------------------------------
2.입력 양식 태그
◎텍스트 공간 입력 양식
-텍스트를 여러 줄에 걸쳐 자유롭게 입력 가능
텍스트 공간 입력 양식 만들기
<body>
<h2>텍스트 공간 입력 양식</h2>
<form>
<textarea rows="5" cols="50">텍스트를 작성하는 공간입니다.</textarea>
<p></p>
<input type="submit" value="전송">
<input type="reset" value="다시작성">
</form>
</body>
◎<fieldset> 태그
-입력 폼이 여러 개 있을 때, 경계선을 그려서 하나의 그룹으로 만들 때 사용
입력 폼 그룹으로 묶기
<body>
<form>
<fieldset>
<legend>개인 정보 입력</legend>
<p>이름 : <input type="text" name="name"></p>
<p>학교 : <input type="text" name="school"></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</fieldset>
</form>
</body>
◎라디오 입력 양식
-여러 항목 중 하나만 선택할 때 사용
-type="radio" 속성을 사용하여 라디오 버튼을 만듬
-name 속성은 라디오 버튼 그룹을 지정하는데 사용
-value 속성은 선택된 라디오 버튼의 값을 지정
라디오 양식 만들기
<body>
<form>
<h3>당신의 성별은 무엇입니까?</h3>
<input type="radio" name="sex" value="male" checked>남자
<input type="radio" name="sex" value="female"> 여자
<p></p>
<h3>당신은 몇 학년입니까?</h3>
<input type="radio" name="year" value="1" checked>1학년
<input type="radio" name="year" value="2">2학년
<input type="radio" name="year" value="3">3학년
<input type="radio" name="year" value="4">4학년
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시 작성">
</form>
</body>
*name="sex" 같은 그룹으로 하나만 선택되어 있음
name="sex1" 다 체크 된 걸로 보임(각각 체크 된 걸로 보임)
"sex2"
*checked 지우면 초기값 지워져 있음
cf)사용자가 선택 안하고 넘어갈지 모르니 적어주기
◎체크박스 양식
-동시에 여러 항목을 선택할 때 사용(중복체크 가능)
-type="checkbox" 속성을 사용하여 체크박스를 만듬
-name 속성은 체크박스 그룹을 지정하는데 사용
-value 속성은 선택된 체크박스의 값을 지정
체크박스 양식 만들기
<body>
<form>
<h3>현재 관심을 가지고 있는 학습 주제는 무엇입니까?</h3>
<input type="checkbox" name="subject" value="HTML5" checked>HTML5<br>
<input type="checkbox" name="subject" value="CSS3">CSS3<br>
<input type="checkbox" name="subject" value="Javascript">Javascript<br>
<input type="checkbox" name="subject" value="Jquery">Jquery
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시 작성">
</form>
</body>
*name="subject1" / name="subject" : 다르게 같게 해도 상관x
"subject2" "subject"
"subject3" "subject"
*체크박스, 라디오박스는 checked 속성 사용가능: 기본적으로 선택된 상태로 표시되도록 지정하는 것
◎버튼 양식
-<button> 태그 혹은 <input> 태그를 사용하여 정의
-사용자의 필요에 따라 선택할 수 있음
<button type=" "></button> 자식요소 가능 or <button></button>으로만 사용가능
버튼 양식 만들기
<body>
<form>
<h3>Button 태그 사용</h3>
<button type="button" onclick="alert('클릭-1 사용')">클릭-1</button>
<h3>Input 태그 사용</h3>
<input type="button" onclick="alert('클릭-2 사용')" value="클릭-2">
<h3>Imag 버튼 사용</h3>
<button type="button" onclick="alert('클릭-3 사용')"><img src="button.jpg"></button>
</form>
</body>
◎선택 목록
-펼침 목록에서 한 가지만 선택할 수 있도록 지원하는 양식
선택 목록 양식 만들기
<body>
<h3>관심 있는 학습 주제 한 가지를 선택하세요.</h3>
<form>
<select name="subjects">
<option value="1" selected>HTML5</option>
<option value="2">CSS3</option>
<option value="3">Javascript</option>
<option value="4">Jquery</option>
</select>
<P></P>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
◎다중 선택
-Multiple 속성 사용
<body>
<h3>관심 있는 학습 주제를 모두 선택하세요.</h3>
<form>
<select name="subjects" size="4" multiple>
<option value="1" selected>HTML5</option>
<option value="2">CSS3</option>
<option value="3">Javascript</option>
<option value="4">Jquery</option>
</select>
<P></P>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
cf)ctrl키 또는 shift키 누른채로 '제출' 해야 다 클릭된 걸로 보임
◎<optgroup> 태그
-여러 항목을 그룹으로 묶을 수 있음
<body>
<h3>그룹별 선택 항목을 제공합니다.</h3>
<form>
<label>전공 분야를 선택하세요.
<select name="major">
<optgroup label="computer">
<option>Software</option>
<option>Robort</option>
<option>System</option>
</optgroup>
<optgroup label="language">
<option selected>Korea</option>
<option>English</option>
<option>Germany</option>
</optgroup>
<optgroup label="business">
<option>Service</option>
<option>Education</option>
<option>Communication</option>
<option>Marketing</option>
</optgroup>
</select>
<p></p>
<input type="submit" value="선택">
<input type="reset" value="다시선택">
</label>
</form>
</body>
◎<datalist> 태그
-텍스트 입력 시 자동완성 기능 제공
<body>
<h3>선택사항을 직접 입력하세요.</h3>
<form>
<label>전공 분야를 입력하세요.
<input type="text" list="majorlist" name="major">
<!-- list 속성값과 datalist 태그의 id 속성값이 동일해야함 -->
<datalist id="majorlist">
<option value="Software">소프트웨어</option>
<option value="Robort">로봇</option>
<option value="System">시스템</option>
<option value="Service">서비스</option>
<option value="Education">교육</option>
</datalist>
<p></p>
<input type="submit" value="완료">
<input type="reset" value="다시작성">
</label>
</form>
</body>
◎<input type="date"> 입력 폼
-년-월-일 단위로 원하는 날짜 입력할 수 있음
<body>
<form>
<h3>오늘 날짜 입력</h3>
Today : <input type="date" name="today">
<h3>프로젝트 수행 기간</h3>
From : <input type="date" name="from" min="2016-03-01" max="2016-12-31">
To : <input type="date" name="to" min="2018-03-01" max="2018-06-30">
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
◎type 속성값
-month: 년-월 단위로 날짜 입력
-wekk: 년-주 단위로 날짜 입력
<body>
<form>
<h3>생일(년/월) 입력</h3>
생일 : <input type="month" name="birth">
<h3>주간 계획(년/주) 입력</h3>
주간 계획 : <input type="week" name="weekeend">
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
-time: 시간만 입력
-datetime: 년-월-일-시간 단위로 입력
<body>
<form>
<h3>현재 시간 입력</h3>
Time : <input type="time" name="Now">
<h3>생일(년도, 월, 일, 시간) 입력</h3>
Birthday : <input type="datetime-local" name="bdaytime">
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
◎<input type="color"> 입력 폼
-색상 칩에서 원하는 색상을 선택할 수 있음
색상 선택 양식 만들기
<body>
<form>
<h3>원하는 색상을 선택하세요.</h3>
<input type="color" name="color_value" value="#0000ff">
<p></p>
<input type="submit" value="선택완료">
<input type="reset" value="다시선택">
</form>
</body>
◎<input type="number"> 입력 폼
-숫자를 입력할 수 있음
<body>
<form>
<h3>나이를 입력하세요.</h3>
<input type="number" name="count" min="1" max="130">
<p></p>
<input type="submit" value="완료">
<input type="reset" value="초기화">
</form>
</body>
◎<input type="range"> 폼
-특정 범위의 숫자를 선택할 때 사용
범위 지정 양식 만들기
<body>
<form>
<h3>0~100 범위에서 원하는 지점을 선택하세요.</h3>
<input type="range" name="point" min="0" max="100">
<p></p>
<input type="submit" value="완료">
<input type="reset" value="초기화">
</form>
</body>
*bar만 확인가능/ 동적기능: JavaScript
◎이메일 입력 양식
-텍스트 상자와 외형은 같지만 이메일 형식에 맞게 정확하게 작성하지 않으면 경고 메시지가 나타남
<body>
<form>
<h3>이메일을 정확하게 입력하세요.</h3>
이메일 : <input type="email" name="myemail">
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
*정확하지는 않음(--@ 사용시 경고창 안뜸)
◎URL 입력 양식
-입력한 URL이 http://로 시작하지 않는 등 형식에 맞지 않는다면 새로 입력하라는 메시지가 나타남
URL 입력 양식 만들기
<body>
<form>
<h3>홈페이지 주소를 입력하세요.</h3>
홈페이지 : <input type="url" name="myhome">
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
cf)http://, https:// 사용 가능
◎검색 양식
-검색어를 입력할 때 사용
◎<meter> 태그
-지정된 값을 표현하기 위해 사용
◎<progress> 태그
-다운로드 상태 표시 같이 현재 진행율이 어떻게 되고 있는지를 나타낼 때 사용
cf) <meter>와 <progress> 태그에 사용하는 속성: value, min, max, low, high, optimum
막대 그래프 양식 만들기
<body>
<form>
<!-- meter, progress 태그는 시각적 표시를 위한 설계라 시작태그, 종료태그 사이의 텍스트는 무시되어 출력x -->
<h3>학습량 그래프</h3>
홍민성 : <meter min="0" max="100" optimum="50" value="60">60 out of 100</meter>
<span>60 out of 100</span>
<br>
송지효 : <meter low="0.3" high="0.5" value="0.22">22%</meter>
<span>22%</span>
<br>
이민정 : <meter low="0.25" high="0.75" optimum="0.8" value="0.2">20%</meter>
<span>20%</span>
<p></p>
<h3>작업 진행율</h3>
초기 작업 : <progress value="22" max="100" title="진행율">22%</progress>
<span>22%</span></span><br>
중간 작업 : <progress value="0.77" max="1">77%</progress>
<span>77%</span>
<br>
다음 작업 : <progress value="0.98" max="1">98%</progress>
<span>98%</span>
<br>
</form>
</body>
cf)텍스트 표시방법
1)<span></span> 값 표시
2)바로 텍스트 입력
◎읽기 전용 속성: readonly
-텍스트 상자에 쓰기를 제한하고 오직 읽기만 가능하게 설정
◎비활성화 속성: disabled
-텍스트 상자를 비활성화 시킴
◎자동 완성 속성: autocomplete
-사용했던 데이터를 기준으로 입력 중인 텍스트에 자동 완성 기능을 적용할 수 있음
◎자동 포커스 속성: autofocus
-현재 페이지가 로드 될 때 처음으로 입력하고자 하는 폼을 선택하는 속성
◎ 플레이스 홀더 속성: placeholder
-현재 폼에 입력해야 하는 텍스트를 희미하게 보여주는 속성
◎필수 입력 속성: required
-반드시 데이터가 입력되어야 하는 폼을 지정하는 속성
◎오타 체크 속성: spellcheck
-입력되는 문장의 오타를 실시간으로 점검
공통 속성 사용하기
<body>
<h2>HTML5 입력 양식의 주요 속성을 연습해봅시다.</h2>
<form>
<p>쓰기가능 : <input type="text" name="name" size="20" placeholder="이름을 입력하세요" autofocus></p>
<p>읽기전용 : <input type="text" name="name" size="10" readonly></p>
<p>사용안함 : <input type="text" name="name" size="10" disabled></p>
<p>자동완성 : <input type="text" name="name" size="10" autocomplete="on" required></p>
<textarea cols="50" rows="3" spellcheck="true">오타를 체크합니다.</textarea>
<p></p>
<input type="submit" value="전송">
<input type="reset" value="다시작성">
</form>
</body>
3.공간 분할 태그
◎<div> 태그
-웹 브라우저 전체 공간에 대해 분할
-컨텐츠에 대한 의미를 부여하지 않음
-블록(block)형식으로 분할
◎<span> 태그
-웹 브라우저의 일부 영역만 분할
-컨텐츠에 대한 의미를 부여하지 않음
-인라인(inline) 형식으로 분할
| 블록 레벨 요소 |
인라인 레벨 요소 |
-마크업할 때 줄이 바뀜
-텍스트 및 인라인 요소, 일부 블록 요소를 자식 요소로 포함 |
-대부분 텍스트
-마크업할 때 줄이 바뀌지 않음, 한줄로 이어서 출력
-블록 요소를 자식 요소로 포함 안함
|
*중요!
Q태그들의 블록 레벨 요소/ 인라인 레벨 요소를 구분해야하는 이유?
-명확히 이해하고 있어야 문법적 오류를 방지할 수 있음
-CSS를 사용하는데 어려움이 없음
ex) 각각의 요소에 적용되는 CSS가 적용이 안 되는 경우가 있음
1)인라인 요소 속성은 크기값을 설정할 수 없음(height, width가 적용되지 않음)
2)인라인 요소는 좌측 우측의 마진 여백값을 줄 수 있지만, 상하는 줄 수 없음
3)인라인 요소 디폴트 너비값은 콘텐츠 값을 따름
4)블록 요소는 vertical-align이 적용되지 않음
5)블록 요소는 text-align이 적용되지 않음
1)div와 span 태그로 공간 분할 하기
<body>
<h3>div 공간 분할</h3>
<div style="background-color: #FFFF00;">div 첫 번째 영역입니다.</div>
<div style="background-color: #00FF00;">div 두 번째 영역입니다.</div>
<div style="background-color: #FF00FF;">div 세 번째 영역입니다.</div>
<p/>
<h3>span 공간 분할</h3>
<span style="background-color: #FFFF00;"><span>span 첫 번째 영역입니다.</span>
<span style="background-color: #00FF00;"><span>span 두 번째 영역입니다.</span>
<span style="background-color: #FF00FF;"><span>span 세 번째 영역입니다.</span>
</body>
2) div와 span 태그를 조합하여 공간 분할 하기
<body>
<h3>div/span 공간 분할 조합</h3>
<div style="height: 70px; background-color: #FFFF00;">머리말 영역</div>
<div style="height: 50px; background-color: #FF00FF;">본문 영역</div>
<span style="background-color: #FF0000;">왼쪽 텍스트 영역</span>
<span style="background-color: #FFFFFF;">가운데 텍스트 영역</span>
<span style="background-color: #0000FF;">오른쪽 텍스트 영역</span>
<div style="height: 40px; background-color: #FFFF00;">꼬리말 영역</div>
</body>
◎<iframe> 태그
-하나의 웹 문서 안에 또 다른 웹 문서를 표시할 때 사용
iframe 태그로 공간 분할하기
<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
</head>
<body>
<h3>iframe 공간 분할 예제</h3>
<div style="background-color: #FFFF00;">
<span>
<a href="intro.html" target="if_a">인사말</a>
</span>
<span>
<a href="lecture.html" target="if_a">강좌 소개</a>
</span>
<span>
<a href="info.html" target="if_a">저자 소개</a>
</span>
<span>
</span>
</div>
<p/>
<iframe src="basic.html" width="400" height="200" name="if_a" frameborder="0"></iframe>
<iframe src="basic.html" width="400" height="200" name="if_a" scrolling="no"></iframe>
<div style="background-color: #FFFF00;">한빛아카데미(주)</div>
</body>
</html>
basic.html
<!DOCTYPE html>
<html>
<head>
<title>ifreme</title>
</head>
<body>
이곳은 ifreme 영역 입니다.
</body>
</html>
intro.html
<!DOCTYPE html>
<html>
<head>
<title>인사말</title>
</head>
<body>
안녕하세요.<p/>
웹 프로그래밍 저자 홍성용입니다.<p/>
질문이 있으면 cafe.naver.com/go2web 게시판에 남겨주세요. <p/>
감사합니다.
</body>
</html>
lecture.html
<!DOCTYPE html>
<html>
<head>
<title>강좌 소개</title>
</head>
<body>
강좌명 : 웹 프로그래밍(Web Programming)<p/>
학습주제 : HTML5, CSS3, JavaScripts, Jquery<p/>
</body>
</html>
info.html
<!DOCTYPE html>
<html>
<head>
<title>저자 소개</title>
</head>
<body>
홍성용<p/>
gowebprogram@gmail.com
</body>
</html>
*iframe.html 실행
--------------------------------------------------------------------------------------
참고사이트)
<Color HXE code 얻기>
Pixlr Editor 홈페이지
https://pixlr.com/kr/editor/
사진 에디터 : Pixlr.com - 무료 이미지 편집 온라인 프로그램
브라우저에서 즉시 열 수 있는 고급 사진 에디터, Pixlr E를 지금 체험해보세요. 설치, 로그인 모두 불필요해요. 데스크탑, 태블릿, 스마트폰에서도 무료로 이용 가능합니다.
pixlr.com
*이미지열기->색상 피커 스포이드로 그림 클릭->왼쪽 맨 아래 둥근 색상->HEX: code 얻기