map
<body>
<!-- usemap="#favorites -> map name="favorites" 매칭됨 -->
<img src="images/kids.jpg" usemap="#favorites">
<map name="favorites">
<!-- area : 이미지 영역을 정함 -->
<!-- shape 속성 : 모양을 정함 -->
<!-- coords="10,10,160,200" -> x,y 좌표 (10,10),(160,200) 를 꼭지점 -->
<area shape="rect" coords="10,10,160,200"
href="http://cafe.daum.net/originalbook" target="_blank">
<area shape="rect" coords="220,10,380,200"
href="http://www.facebook.com/englishshow.co.kr" target="_blank">
</map>
</body>
<!-- id가 아닌 name을 씀 -->form
<body>
<!-- method="post" : 통신 방식으로 post -->
<!-- action = "search.jsp" : 해당 문서로 이동 -->
<form method="post" action="search,jsp">
<!-- input : 특정 UI 항목을 만들때 사용 -->
<!-- UI: User Interface(디자인) -->
<!-- type="text" -->
<input type="text">
<!-- type="submit" -> 서버로 전송되는 버튼 -->
<!-- 기본값이 제출 -->
<!-- <input type="submit"> -->
<!-- 위와 동일 -->
<!-- 파일에 액세스할 수 없음 -> search.jsp 파일이 없음 -->
<!-- <input type="submit" value="제출"> -->
<input type="submit" value="검색">
<!-- type="button"는 클릭되고, 기본 이동은 없음 -->
<input type="button" value="검색">
</form>
</body>withlabel
<body>
<form>
<h3>수강분야(다수 선택 가능)</h3>
<ul>
<!-- " name="grm" -> 서버로 전송되는 값(화/면 표시는 안됨) -->
<input type="checkbox" name="grm">문법<br>
<input type="checkbox" name="wr">작문<br>
<!-- label : 글자 클릭시 체크박스(라디오버튼)가 적용됨 -->
<label>
<input type="checkbox" name="rd">독해<br>
</label>
</ul>
<h3>수강분야(1과목만 선택 가능)</h3>
<!-- type="radio" : 여러개 중에 하나 선택 -->
<!-- 라디오 버튼은 name의 속성값이 같아야 하나만 선택됨 -->
<ul>
<input type="radio" name="subject">영어회화<br>
<input type="radio" name="subject">중국어회화<br>
<input type="radio" name="subject">일어회화<br>
</ul>
</form>
</body>fieldset
<body>
<form>
<!-- <fieldset></fieldset> : 테두리 박스 -->
<fieldset>
<!-- <legend></legend> : 테두리에 제목 -->
<legend>개인정보</legend>
<ul>
<li>
<!-- for="name" 과 id="name" 이름을 맞추어야 커서가 위치됨 -->
<label for="name">이름</label>
<!-- 텍스트 박스 -->
<input type="text" id="name">
</li>
<li>
메일주소
<input type="text">
</li>
</ul>
</fieldset>
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li>
아이디
<input type="text" >
</li>
<li>
비밀번호
<input type="text">
</li>
</ul>
</fieldset>
</form>
</body>id-pw
<body>
<form>
<fieldset>
아이디:<input type="text"><br>
<!-- type="password" : 블릿으로 표시됨 -->
비밀번호:<input type="password">
<!-- type='submit' : form 태그에 action 값을 찾아감 -->
<!-- action 값이 없어서 초기화 -->
<input type="submit" value="로그인">
</fieldset>
</form>
</body>number-range
<body>
<form>
<fieldset>
<legend>등록 정보</legend>
참여인원<small>(최대10명)</small>
<!-- type="number" : 스핀으로 숫자 증감하거나 숫자만 입력 -->
<!-- 0~10 사이의 숫자만 입력됨 -->
<input type="number" min="0" max="10"><br>
지원물품<small>(1인당 5개)</small>
<!-- value="5" : 초기값 -->
<!-- step="5" : 5의 배수로 증감 -->
<input type="number" value="5" step="5" min="0" max="50"><br>
희망단계<small>(하,중,상)</small>
<!-- type="range" : 범위 혐태로 움직임 -->
<input type="range" value="2" min="1" max="3"><br>
<!-- type="color" : 색상 선택(기본색은 검정) -->
<!-- RGB : R(red), G(green), B(blue) -> 3원색가지고 색상 조합 -> 00~ff -->
<!-- 10진수:0~9, 16진수:A(10)~F(15) -->
<input type="color" value="#00ff00">
</fieldset>
</form>
</body>date
<body>
<form>
<h3>날짜 입력</h3>
<input type="date">
<input type="month">
<input type="week">
</form>
</body>time
<body>
<form>
<h3>검사시간을 선택하세요(오늘)</h3>
시작시간<input type="time" value="09:00"><br>
종료시간<input type="time" value="18:00"><br>
<h3>검사시간을 선택하세요(다른 날짜)</h3>
<!-- type="datetime-local" : 날짜 추가되어서 표시 -->
시작 시간<input type="datetime-local" value="2016-03-02 09:00"><br>
종료 시간<input type="datetime-local" value="2016-03-02 18:00"><br>
</form>
</body>submit - reset
<body>
<h3>메일링 리스트 등록</h3>
<!-- post 방식으로 register.jpg 호출 -->
<!-- ERR_FILE_NOT-FOUND: register.jsp 로 이동 못해서 오류 발생 -->
<form method="post" action="register.jstp">
메일 주소1<input type="text"><br>
메일 주소2<input type="text"><br>
<!-- type="submit" : 기본값이 제출 -->
<input type="submit" value="제출">
<!-- type="submit" : 기본값이 제출 -->
<!-- type="reset" : form 태그 안에 있는 값을 초기화 -->
<input type="reset" value="다시입력">
</form>
</body>submit - image
<body>
<form>
<table>
<tr>
<td>아이디<input type="text" size="15"></td>
<td>비밀번호<input type="password" size="15"></td>
<td><input type="image" src="images/login.jpg"></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</body>attribute
<body>
<h1>여름방학 특강 신청</h1>
<form>
<fieldset>
<legend>수강과목</legend>
<ul>
<li>
영어회화(초급)
<!-- readonly 속성은 값을 변경하지 못한다. 주로 id에 많이 사용 -->
<input type="text" value="오전 9:00~11:00" readonly>
</li>
</ul>
</fieldset>
<fieldset>
<legend>신청자</legend>
<ul>
<li>
이름
<!-- autofocus 속성은 자동으로 포커스를 위치 -->
<!-- required : 필수 값 -->
<input type="text" autofocus required>
</li>
<li>
학번
<!-- placeholder 속성은 힌트 -> 주로 전화번호에서 많이 사용 -->
<!-- maxlength 속성은 최대길이 제한 -->
<input type="text" placeholder="하이폰 없이 입력" maxlength="8">
</li>
<li>
학과
<!-- select 박스, 드롭다운리스트, 콤보박스(실무에서 많이 사용) -->
<select>
<!-- 첫번째 option 이 기본 선택됨 -->
<!-- value 속성의 값은 서버로 들어간다 -->
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<!-- selected 속성은 초기값 설정 -->
<option value="computer" selected>컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</select>
</li>
</ul>
</fieldset>
<fieldset>
<legend>교재 주문</legend>
<ul>
<li>
교재
<input type="number" value="1" min="1" max="3">
</li>
<li>
단체주문
<input type="number" value="10" min="10" max="100" step="10">
</li>
</ul>
</fieldset>
<fieldset>
<button type="submit">신청하기</button>
<button type="reset" >다시쓰기</button>
</fieldset>
</form>
</body>select
select 1
<body>
<h1>여름방학 특강 신청</h1>
<form>
<fieldset>
<legend>수강 신청인</legend>
<ul>
<li>
학번
<input type="text" autofocus>
</li>
<li>
이름
<input type="text">
</li>
<li>
학과
<!-- select size : 콤보박스에서 표시되는 행수 -->
<!-- multiple : 여러개 선택 가능 -->
<select size="3" multiple>
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer" selected>컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</select>
</li>
</ul>
</fieldset>
</form>
</body>
select 2
<body>
<h1>여름방학 특강 신청</h1>
<form>
<fieldset>
<legend>수강 신청인</legend>
<ul>
<li>
학번
<input type="text" autofocus>
</li>
<li>
이름
<input type="text">
</li>
<li>
학과
<select>
<optgroup label="공과대학">
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer" selected>컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</optgroup>
<optgroup label="인문대학">
<option value="history">사학과</option>
<option value="lang">어문학부</option>
<option value="philo">철학과</option>
</optgroup>
</select>
</li>
</ul>
</fieldset>
</form>
</body>datalist
<body>
<h1>여름방학 특강 신청</h1>
<form>
<fieldset>
<legend>수강 신청인</legend>
<ul>
<li>
학번
<input type="text" autofocus>
</li>
<li>
이름
<input type="text">
</li>
<li>
학과
<select>
<optgroup label="공과대학">
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer" selected>컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</optgroup>
<optgroup label="인문대학">
<option value="history">사학과</option>
<option value="lang">어문학부</option>
<option value="philo">철학과</option>
</optgroup>
</select>
</li>
</ul>
</fieldset>
<fieldset>
<legend>수강 과목을 선택하세요</legend>
<ul>
<li>
관심분야
<!-- list, id 추가해야 콤보가 출력되고, 선택하면 value값이 출력됨 -->
<input type="text" list="choices">
<datalist id="choices">
<option value="grammer" label="문법"></option>
<option value="voca" label="어휘"></option>
<option value="speaking" label="회화"></option>
<option value="listening" label="리스닝"></option>
<option value="news" label="뉴스청취"></option>
</datalist>
</li>
</ul>
</fieldset>
</form>
</body>textarea
<body>
<form>
<fieldset>
<legend>로그인</legend>
아이디
<input type="text" size="10" autofocus>
비밀번호
<input type="password" size="10" >
<input type="submit" value="로그인">
</fieldset>
<fieldset>
<legend>가입하기</legend>
<ul>
<li>
아이디<em>*</em>
<input type="text" required>
</li>
<li>
비밀번호<em>*</em>
<input type="password" required>
</li>
<li>
비밀번호 확인<em>*</em>
<input type="password" required>
</li>
<li>
이름<em>*</em>
<input type="text" required>
</li>
<li>
메일주소<em>*</em>
<input type="text" required>
</li>
<li>
전화번호
<input type="text">
</li>
</ul>
</fieldset>
<fieldset>
<legend>이지스퍼블리싱</legend>
<!-- cols="60" : 기본너비보다 크다 -->
<!-- rows="5" : 세로크기 -->
<textarea name="intro" cols="60" rows="5">
열심히 사는 사람들의 손을 잡아주는 곳 - 이지스 퍼블리싱
우리는 책을 내기 전에 다시 한번 물어봅니다
우리는 책을 내기 전에 다시 한번 물어봅니다
우리는 책을 내기 전에 다시 한번 물어봅니다
우리는 책을 내기 전에 다시 한번 물어봅니다
</textarea>
</fieldset>
<fieldset>
<input type="submit" value="가입하기">
<input type="reset" value="다시쓰기">
</fieldset>
</form>
</body>output
<body>
<!-- parseInt : 숫자(정수)로 변환 -->
<form oninput="result.value = parseInt(num1.value) + parseInt(num2.value)">
<input type="number" name="num1" value="0">
+<input type="number" name="num2" value="0">
<!-- =<input name ="result"> -->
<!-- 박스 없이 결과값만 표시 -->
=<output name ="result">
</form>
</body>progress
<body>
<ul>
<li>
<!-- 전체 60초 중 50초 진행 -->
10초 남음
<progress max="60" value="50"></progress>
</li>
<li>
<!-- 전체 100 중 30만큼 진행 -->
진행률 30%
<progress max="100" value="30"></progress>
</li>
</ul>
</body>meter
<body>
<ul>
<li>
점유율 0.8
<!-- 전체 크기 1을 기준으로 0.8만큼 차지합니다. -->
<meter value="0.8"></meter>
</li>
<li>
사용량 64%
<!-- 최소 0 최대 100 기준으로 64 만큼 차지합니다-->
<meter min="0" max="100" value="64"></meter>
</li>
<li>
트래픽 초과
<!-- hight : 전체 크기는 1024~10240까지인데 높다고 설정한 8192보다 현재 값 9000이 더 큽니다.-->
<meter min="1024" max="10240" low="2048" high="8192" value="9000"></meter>
트래픽 미달
<!-- low : 전체 크기는 1024~10240까지인데 낮다고 설정한 2048보다 현재 값 2000이 더 작습니다.-->
<meter min="1024" max="10240" low="2048" high="8192" value="2000"></meter>
</li>
</ul>
</body>복습
<body>
<h1>현명하게 말 잘하는 방법 3가지</h1>
<ul>
<li>1. 같은 말이라도 때와 장소를 가려서 해라.</li>
<ol type="a">
<li>그 곳에는 히트곡이 여기서는 소음이된다.</li>
</ol>
<li>이왕 이면 다홍치마다.</li>
<ol type="a" start="2">
<li>말에도 온도가 있으니 썰렁한 말 대신 화끈한 말을 써라.</li>
</ol>
<li>내가 하고 싶은 말에 열올리지 말고 그가 듣고 싶어하는 말을 하라.</li>
<ol type="a" start="3">
<li>나 이외에는 모두가 우수고객이다.</li>
</ul>
</body>
<body>
<h1>인관 관계 명언</h1>
남과 교제할 때, 먼저 잊어서는 안될 일은<br>
상대방에게는 상대방 나름대로의 생활방식이 있으므로 혼란스럽게<br>
하지 않도록 남은 인생에 함부로 간섭해서는 안된다는 것이다.
<p>
<hr>
<blockquote>-헨리 제임스-</blockquote>
</body>
<!-- 인용구 주의 -->
<body>
<h1>Hello 클래스 :</h1>
<pre>
public class Hello{
public static void main(String[] args) {
System.out.printin("Hello~");
}
}
</pre>
</body>
<!-- 프로그램 소스 표현 -->
<body>
<h1>현명한 삶을 위한 <mark>인생 법칙</mark></h1>
말이 많으면 말을 많이 하면 반드시 필요 없는 말이 섞여 나온다. 원래 귀는 닫도록 만들어지지 않았지만,
<span style="color: blue;">입은 언제나 닫을 수 있게 되어 있다.</span>
</body>
<!-- span 같은 줄 묶기 -->
<body>
<table border="1">
<colgroup>
<col style="width: 200px;" >
<col style="width: 300px;" >
<col style="width: 200px;" >
<col style="width: 300px;" >
</colgroup>
<tr>
<th>아들 일곱</th>
<td></td>
<th>딸 셋</th>
<td></td>
</tr>
<tr>
<th>양 7,000 마리</th>
<td colspan="3" ></td>
</tr>
<tr>
<th>낙타 3,000마리</th>
<td colspan="3"></td>
</tr>
</table>
</body>
<!-- colgroup, colspan -->
<body>
<table border="1">
<caption>
만날때 마다 하면 좋은 말
</caption>
<colgroup>
<col>
<col span="2" style="background-color: orange;">
<col style="background-color: greenyellow;">
</colgroup>
<tr>
<td>상대의 걷잡을 수 없는 화를 가라 앉히는 말</td>
<td>겸손한 인격의 탑을 쌓는 말</td>
<td>상대의 어깨를 으쓱하게 하는 말</td>
<td>화해와 평화를 부르는 말</td>
</tr>
<tr>
<td>미안해</td>
<td>고마워</td>
<td>잘했어</td>
<td>내가 잘못했어</td>
</tr>
</table>
</body>
<!-- colgroup에서 span 주의 -->
<body>
<p><strong> 이미지 크기 조절(450/550, 350/250)</strong></p>
<img src="images/gugudan-2.jpg" width="450" height="550" >
<img src="images/gugudan-2.jpg" width="350" height="250" >
</body>
<!-- 너비 높이에 :를 써서 안 먹혔었음 주의 -->
<body>
<h1>텍스트 링크 만들기</h1>
<a href="https://www.daum.net/">Daum 홈페이지</a>
<h1>이미지 링크 만들기</h1>
<a href="https://www.daum.net/"><img src="images/logo_daum.png"></a>
</body>
<!-- src 주의 -->
<body>
<h1>책 목록 만들기</h1>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고합니다.</p>
<ul id="meun">
<li><a href="#book1">책1</a></li>
<li><a href="#book2">책2</a></li>
<li><a href="#book3">책3</a></li>
</ul>
<h2 id="book1">책1</h2>
<p>책의 목록을 만듭니다. 1책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.</p>
<p>책의 목록을 만듭니다. 1책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.</p>
<p>책의 목록을 만듭니다. 1책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.</p>
<a href="#meun"> [목록으로]</a>
<h2 id="book2">책2</h2>
<p>책의 목록을 만듭니다. 1책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.</p>
<p>책의 목록을 만듭니다. 1책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.</p>
<p>책의 목록을 만듭니다. 1책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.</p>
<a href="#meun"> [목록으로]</a>
<h2 id="book3">책3</h2>
<p>책의 목록을 만듭니다. 1책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.</p>
<p>책의 목록을 만듭니다. 1책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.</p>
<p>책의 목록을 만듭니다. 1책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.책의 목록을 만듭니다.</p>
<a href="#meun"> [목록으로]</a>
</body>
<!-- anchor 지정 위치가 헷갈림 -->실습
<body>
<h1>상품 주문서</h1>
<form>
<fieldset>
<legend>개인정보</legend>
<ul>
<li>
이름
<input type="text" placeholder="여백없이 입력" size="22" autofocus required>
</li>
<li>
연락처
<input type="tel" placeholder="연락가능한 번호" >
</li>
</ul>
</fieldset>
<fieldset>
<legend>배송지 정보</legend>
<ul>
<li>
주소<br>
<input type="text" required size="30">
</li>
<li>
전화번호
<input type="text" required maxlength="11">
</li>
</ul>
</fieldset>
<fieldset>
<legend>주문 정보</legend>
<ul>
<li>
<input type="checkbox">과테말라 안티구아 (100g)
<input type="number" value="0" style="width: 30px;">개
</li>
<li>
<input type="checkbox">인도네시아 만델링 (100g)
<input type="number" value="0" style="width: 30px;">개
</li>
<li>
<input type="checkbox">탐라는도다(블렌딩)(100g)
<input type="number" value="0" style="width: 30px;">개
</li>
</ul>
</fieldset>
<div>
<input type="submit" value="주문하기">
<input type="reset" value="다시작성" >
</div>
</form>
</body>
<body>
<h1>프런트엔드 개발자 지원서</h1>
<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
<hr>
<form>
<h4>개인정보</h4>
<ul>
<li>
이름
<input type="text" autofocus required placeholder="공백없이 입력하세요">
</li>
<li>
연락처
<input type="text">
</li>
</ul>
<h4>지원 분야</h4>
<ul>
<li>
<label>
<input type="radio" name="web"> 웹 퍼블리싱
</label>
</li>
<li>
<label>
<input type="radio" name="web"> 웹 어플리케이션 개발
</label>
</li>
<li>
<label>
<input type="radio" name="web"> 개발환경 개선
</label>
</li>
</ul>
<h4>지원 동기</h4>
<textarea name="wr" cols="60" rows="20" placeholder="본사 지원 동기를 간략히 써주세요."></textarea>
<br>
<div>
<input type="submit" value="접수하기">
<input type="reset" value="다시하기">
</div>
</form>
</body>수업자료
'HTML CSS' 카테고리의 다른 글
| 색상과 배경을 위한 스타일 (0) | 2024.04.12 |
|---|---|
| CSS - 텍스트 관련 스타일 (1) | 2024.04.12 |
| HTML - CSS기초 (0) | 2024.04.10 |
| HTML - 텍스트,표,이미지 태그 (0) | 2024.04.10 |
| HTML 및 단축키 (0) | 2024.04.08 |
