히바리 쿄야 와 함께 하는 Developer Cafe
[1일차] DO IT HTML5 & CSS 3 / 32p ~ 183p / html구조 , ul,li,Form 본문
<!doctype html> -> 현재 문서가 HTML5 언어로 작성되어 있는 웹 문서를 표시
<html lang="ko"></html> -> 웹 문서가 시작과 끝을 나타내는 태그
<head> -> 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보를 입력
<meta charset="utf-8"> -> 문자 셋을 지정하는 태그
<title>기본 HTML 문서</title> -> 타이틀 제목 표시
</head>
<body></body> -> 웹 브라우저 화면에 나타날 내용 마크업 작성은 바디 태그 안에 작성됨
TAG 속성
<strong> , <b> -> 글자를 굵게 표시
<em> , <i> -> 이탤릭체로 표시 (기울임꼴) 글자를 표시할때 사용
<q> -> 인용 내용을 표시
<mark> -> 형광펜 효과를 나타내기 위해 표시
<span> -> 줄바꿈 없이 영역을 묶는데 사용 -> 인라인 요소로 사용 나중에 설명
<ruby> -> 일본어, 한자 등 동아시아 문자 표기할때 사용
<abbr> -> 약자를 표시 타이틀 속성과 함께 사용
<cite> -> 웹 문서나 포스트에서 참고 내용 표시
<code> -> 자바, 자바스크립트 소스코드를 웹 문서에 표시할때 사용
<kbd> -> 키보드 입력이나 음성 명령 같은 사용자 입력 내용
<small> -> 부가정보 처럼 작게 표시해도 되는 텍스트
<sub> -> 아래첨자
<sup> -> 위첨자
<s> -> 취소선
<u> -> 밑줄
<ul><li> 순서없는 목록 표시할때 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>제주 관광 안내</title>
</head>
<body>
<h1>관광 안내 전화 </h1>
<p>한국관광공사에서는 전국의 관광안내소와 공동으로 여러분의 여행편의를 위해 관광안내전화 1330 서비스를 연중무휴 실시하고 있습니다.</p>
<p>1330에는 해당 지역의 지도와 관광 가이드북, 관광안내소를 대신할 수 있을 정도의 다양한 정보가 있습니다. 원하는 관광지는 물론이며 숙박, 교통, 음식점 등의 자세한 정보를 한국어를 비롯한 영어, 중국어, 일어의 3개 국어로도 이용 가능합니다.</p>
<ul>
<li>일반 전화 : (국번없이) 1330</li>
<li>휴대 전화 : 064-1330</li>
</ul>
</body>
</html>
<ol><li> 순서 목록이 있을때 -> type 속성 1.숫자(기본값), a 영문 소문자 , A 영문 대문자, i 로마숫자 소문자 ,
I 로마숫자 대문자
start 속성 : 순서목록은 1부터 시작 start 속성을 이용하면 중간 번호 부터 시작
reserved 속성 : 항목을 역순으로 표시함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>1박 2일 가족 여행 코스</title>
</head>
<body>
<h1>1박 2일 가족 여행 코스</h1>
<ul>
<li>1일차
<ol type="a">
<li>해녀박물관</li>
<li>낚시체험</li>
</ol>
</li>
<li>2일차
<ol type="a" start ="3">
<li>용눈이오름</li>
<li>만장굴</li>
<li>카약체험</li>
</ol>
</li>
</ul>
</body>
</html>
<dl> 설명 목록 표시
<dt> 제목
<dd> 설명
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>제주 올레</title>
<style>
dl {
line-height:25px; /* 줄 간격 */
}
</style>
</head>
<body>
<h1>제주 올레 </h1>
<dl>
<dt>올레 1코스</dt>
<dd>코스 : 시흥 초등학교 옆 - 광치기 해변</dd>
<dd>거리 : 14.6km(4~5시간)</dd>
<dd>난이도 : 중</dd>
<dt>올레 2코스</dt>
<dd>코스 : 광치기 해변 - 온평 포구</dd>
<dd>거리 : 14.5km(4~5시간)</dd>
<dd>난이도 : 중</dd>
</dl>
</body>
</html>
table 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 만들기</title>
<style>
table, th, td {
border:1px solid #ccc;
}
td {
padding:5px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
</style>
</head>
<body>
<table>
<tr>
<th> 제목 셀 </th>
<td> 1행 2열 </td>
<td> 1행 3열 </td>
</tr>
<tr>
<th> 제목 셀 </th>
<td> 2행 2열 </td>
<td> 2행 3열 </td>
</tr>
</table>
</body>
</html>
<table> 태그는 HTML 문서에서 표를 만드는 태그입니다.
행과 열을 표현하기 위해 <tr>, <td>등의 태그와 함께 작성하게 됩니다.
예전에는 웹 페이지의 레이아웃을 구성할 때, <table> 태그를 이용하여 많이 구성하였는데 적당한
사용 방법이 아니므로 레이아웃 구성시에는 <div> 태그와 CSS를 이용 해 주세요.
<tr> 태그는 표의 행을 나타냅니다.
<td> 태그는 표의 열을 나타내며, <tr> 태그 하위에 위치합니다.
<table / tr / td 태그 공통 속성>
align="정렬 방식" (left /right/center 등)
width="숫자" (가로길이_ px 또는 %로 입력)
height="숫자" (세로길이_ px 또는 %로 입력)
background="파일경로" (배경 이미지 설정)
bgcolor="색상" (배경 색 설정)
<table 태그 속성>
border="숫자" (테이블 테두리 두께 지정)
cellspadding="숫자" (셀 내부 여백 지정)
cellspacing="숫자" (셀 사이의 간격을 지정)
<tr 태그 속성>
valign="정렬 방식" (top/middle/bottom 등 행의 수직 정렬 방식 지정)
<td 태그 속성>
valign : tr태그 내용 동일
rowspan="숫자" (행 칼럼을(세로방향) 숫자만큼 병합)
colspan="숫자" (열 칼럼을(가로방향) 숫자만큼 병합)
<body>
<table border="2px" bordercolor = "pink" width = "200" height = "200">
<tr bgcolor = "green">
<td>과목</td> <!-- 1행 1열-->
<td>학생 1</td> <!-- 1행 2열-->
<td>학생 2</td> <!-- 1행 3열-->
</tr>
<tr>
<td bgcolor = "blue">수학</td> <!-- 2행 1열-->
<td>80</td> <!-- 2행 2열-->
<td>70</td> <!-- 2행 3열-->
</tr>
<tr>
<td bgcolor = "blue">과학</td> <!-- 3행 1열-->
<td>50</td> <!-- 3행 2열-->
<td>30</td> <!-- 행 3열-->
</tr>
</table>
</body>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>선과 배경</title>
</head>
<body>
<table border="1" cellpadding="10" style="border-collapse: collapse;">
<tr bgcolor="lightblue">
<th width="90"></th>
<th width="50">인출</th>
<th width="50">예금</th>
<th width="110">잔고</th>
</tr>
<tr bgcolor="yellow">
<th>1월</th>
<td>250.00</td>
<td>660.50</td>
<td>410.50</td>
</tr>
<tr bgcolor="lightpink">
<th>2월</th>
<td>135.00</td>
<td>890.20</td>
<td bgcolor="lightgreen">170.15</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로우스팬</title>
</head>
<body>
<table cellpadding="8">
<tr bgcolor="lightgray">
<th width="100"></th>
<th width="80">ABC</th>
<th width="80">BBC</th>
<th width="80">CNN</th>
</tr>
<tr bgcolor="lightgray">
<th>6pm-7pm</th>
<td rowspan="2">영화</td>
<td>코미디</td>
<td>뉴스</td>
</tr>
<tr bgcolor="yellow">
<th>7pm-8pm</th>
<td>스포츠</td>
<td>시사</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>콜스팬</title>
</head>
<body>
<table width="500" cellpadding="10">
<tr bgcolor="lightgray">
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr bgcolor="lightpink">
<th>월요일</th>
<td colspan="2">지리</td>
<td>수학</td>
<td>미술</td>
</tr>
<tr bgcolor="lightgray">
<th>화요일</th>
<td colspan="3">체육</td>
<td>가정</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 만들기</title>
<style>
table, th, td {
border:1px solid #ccc;
}
td, th {
padding:10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
</style>
</head>
<body>
<table>
<caption> ->표에 제목을 표시할때 사용 -> figcaption 태그를 사용할 경우도 있다.
<strong>Modern Browser</strong>
<p>국내에서 자주 사용하는 모던 브라우저</p>
</caption>
<tr>
<th>브라우저</th>
<th>제조업체</th>
<th>다운로드</th>
</tr>
<tr>
<th>크롬(Chrome)</th>
<td>Google</td>
<td>1111</td>
</tr>
<tr>
<th>파이어폭스(Firfox)</th>
<td>Mozilla</td>
<td>2222</td>
</tr>
<tr>
<th> 엣지(Edge) </th>
<td> Microsoft </td>
<td>3333</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 만들기</title>
<style>
table, th, td {
border:1px solid #ccc;
}
td, th {
padding:10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
</style>
</head>
<body>
<figure>
<figcaption>
<p>국내에서 자주 사용하는 <b>모던 브라우저</b></p>
</figcaption>
<table>
<tr>
<th>브라우저</th>
<th>제조업체</th>
<th>다운로드</th>
</tr>
<tr>
<th>크롬(Chrome)</th>
<td>Google</td>
<td>111</td>
</tr>
<tr>
<th>파이어폭스(Firfox)</th>
<td>Mozilla</td>
<td>222</td>
</tr>
<tr>
<th> 엣지(Edge) </th>
<td> Microsoft </td>
<td>333</td>
</tr>
</table>
</figure>
</body>
</html>
제목 <thead>
본문 <tbody>
요약 <tfoot>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 만들기</title>
<style>
table, th, td {
border:1px solid #ccc;
}
th, td {
width:80px; /* 셀의 너비 */
padding:10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
thead, tfoot {
background : #eeeeee; /* thead와 tfoot의 배경 색 */
}
</style>
</head>
<body>
<table>
<caption>서울시 학교현황(2020.4.1 기준)</caption>
<thead>
<tr>
<th>구분</th>
<th>학교수</th>
<th>학급수</th>
<th>학생수</th>
<th>교원수</th>
</tr>
</thead>
<tbody>
<tr>
<th>유치원</th>
<td>117</td>
<td>252</td>
<td>5,547</td>
<td>474</td>
</tr>
<tr>
<th>초등학교</th>
<td>111</td>
<td>1,720</td>
<td>37,686</td>
<td>2,632</td>
</tr>
<tr>
<th>중학교</th>
<td>44</td>
<td>699</td>
<td>21,274</td>
<td>1,412</td>
</tr>
<tr>
<th>고등학교</th>
<td>29</td>
<td>676</td>
<td>22,019</td>
<td>1,433</td>
</tr>
<tr>
<th>특수학교</th>
<td>3</td>
<td>90</td>
<td>428</td>
<td>160</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>합계</th>
<td>300</td>
<td>3,437</td>
<td>86,954</td>
<td>6,111</td>
</tr>
</tfoot>
</table>
</body>
</html>
이미지 태그 속성
href => 링크한 문서나 사이트의 주소를 입력
target => 링크한 내용이 표시될 위치(현재창 또는 새창) 을 지정
download => 링크한 내용을 보여주는 것이 아니라 다운로드
rel => 현재 문서와 링크한 문서의 관계를 알려줌
type => 링크할 문서의 파일 유형을 알려줌
target 속성
_blank => 링크 내용이 새 창이나 새 탭에서 열린다.
_self => target 속성의 기본 값으로 링크가 있는 화면에서 열린다.
_parent => 프레임을 사용했을때 링크 내용을 부모 프레임에 표시
_top => 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시
<a href="링크할 주소" [속성="속성값"]> 텍스트 내용 </a>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>링크 페이지</title>
</head>
<body>
<!--
* a태그(앵커태그) : 하이퍼링크로 연결할 수 있도록 하는것
앵커태그 기본값
1) 파란색 - 방문전
2) 자주색 - 방문한 페이지
3) 빨강색 - 활성링크(클릭하는 순간)
-->
<ul>
<li><a href="index.html">홈</a></li>
<li><a href="about.html">회사소개</a></li>
<li><a href="travel.html">주요여행지</a></li>
<li><a href="contact.html">고객센터</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<h1>앵커 만들기</h1>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<ul id="menu">
<li><a href="#content1">메뉴1</a></li>
<li><a href="#content2">메뉴2</a></li>
<li><a href="#content3">메뉴3</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용3</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
</body>
</html>
<form [속성="속성값"]>여러 폼 요소</form>
Form 태그 속성
method
get - 주소 표시줄에 사용자가 입력한 내용이 그대로 나타낸다 보안에 취약함 거의 안쓴다.
post - 대부분 이 방식을 사용 보안 때문에 사용자가 입력한 내용이 드러내지 않음
name - 폼의 이름을 지정한다. 여러개의 폼태그가 있을 경우 폼들을 구분하기 위해서 지정
action - 폼 태그 안에 내용들을 처리해 줄 서버 상의 프로그램을 지정
target - action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정
autocomplete - 자동완성
<label> - 폼 요소에 레이블 붙이기
<label [속성="속성 값"]>레이블</label>
<label for="id이름">레이블</label>
<input id="id이름" [속성="속성값"]>
<fieldset>,<legend> => 폼 요소를 그룹으로 묶는다.
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>label 태그 사용</title>
<style>
ul {
list-style:none;
}
li {
margin:20px;
}
</style>
</head>
<body>
<form>
<h3>수강 분야(다수 선택 가능)</h3>
<ul>
<li><input type="checkbox" value="grm">문법 </li>
<li><input type="checkbox" value="wr">작문</li>
<li><input type="checkbox" value="rd">독해</li>
</ul>
<h3>수강 과목(1과목만 선택 가능)</h3>
<ul>
<li>
<label><input type="radio" name="subject" value="eng">영어회화</label>
</li>
<li>
<label><input type="radio" name="subject" value="ch">중국어회화</label>
</li>
<li>
<label><input type="radio" name="subject" value="jp">일어회화</label>
</li>
</ul>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>01</title>
</head>
<body>
<!--
기본구조 : <input type="속성값">
XX 닫는 태그 없음 XX
* type : 입력 태그의 유형
input -> 인라인요소
-->
<p>사용자명 : <input type="text" id="user_name" name="name" size="15"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>02</title>
</head>
<body>
<p>사용자명 : <input type="text" name="name"></p>
<p>비밀번호 : <input type="password" name="password" size="15"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>03</title>
</head>
<body>
<p>이 공연에 대해 어떻게 생각하십니까?</p>
<p>
<textarea cols="30" rows="3" readonly>내용을 입력해 주세요.</textarea>
<!--<textarea cols="30" rows="10" placeholder="내용을 입력해 주세요."></textarea>-->
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>04</title>
</head>
<body>
<p>좋아하는 장르를 선택해 주세요.</p>
<input type="radio" name="music" value="rock" id="">락
<input type="radio" name="music" value="pop" id="">팝
<input type="radio" name="music" value="jazz" id="">재즈
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>05</title>
</head>
<body>
<p>좋아하는 음악 서비스를 선택해 주세요.</p>
<input type="checkbox" value="bugs" checked>벅스(Bugs)
<input type="checkbox" value="melon">멜론(Melon)
<input type="checkbox" value="ginie">지니(Ginie)
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>06</title>
</head>
<body>
<p>어떤 기기를 사용하여 음악을 들으십니까?</p>
<select name="" id="">
<optgroup label="Apple">
<option value="">아이패드</option>
<option value="">아이폰</option>
<option value="">맥북</option>
</optgroup>
<optgroup label="Samsung">
<option value="">갤럭시S</option>
<option value="">갤럭시노트</option>
<option value="">갤럭시울트라</option>
</optgroup>
</select>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>07</title>
</head>
<body>
<p>다음 중 좋아하는 걸그룹? (2개를 선택해 주세요.)</p>
<select name="" id="" size="4" multiple>
<option value="">트와이스</option>
<option value="">여자친구</option>
<option value="">에이핑크</option>
<option value="">GIDLE</option>
<option value="">모모랜드</option>
</select>
<!-- value : 서버에 넘겨질 값, 영문으로 작성할 것! -->
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>검색</title>
</head>
<body>
<!-- HTML5 에서 분리된 텍스트필드 :
search/url/email/tel -->
<p>검색 : </p>
<input type="search" placeholder="키워드입력"> <input type="submit" value="검색하기">
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품주문</title>
<style>
ul{list-style:none;}
</style>
</head>
<body>
<h1>상품주문서</h1>
<!-- label for="user_name"
input id="user_name" 인풋 id 값과 일치해야 함
-->
<form action="#" method="post">
<fieldset>
<legend>개인정보</legend>
<ul>
<li>
<label for="user_name">이 름</label>
<input type="text" id="user_name" placeholder="이름을 입력하세요." autofocus>
</li>
<li>
<label for="user_tel">연락처</label>
<input type="tel" id="user_tel">
</li>
<li>
<label for="user_email">이메일</label>
<input type="email" id="user_email">
</li>
</ul>
</fieldset>
<fieldset>
<legend>배송지 정보</legend>
<ul>
<li>
<label for="user_add">주소</label>
<input type="text" id="user_add">
</li>
<li>
<label for="user_tel">전화</label>
<input type="text" id="user_tel">
</li>
<li>
<label for="memo">메모</label>
<textarea cols="30" rows="3" placeholder="메모를 확인하세요"></textarea>
</li>
</ul>
</fieldset>
<fieldset>
<legend>주문정보</legend>
<ul>
<li>
<label for="user_id">아이디</label>
<input type="text" id="user_id" placeholder="아이디수정불가">
</li>
<li>
<input type="checkbox">
<label for="user_list1">과테말라 안티구이 (100g)</label>
<input type="number" min="1" max="10" value="1" step="1" id="user_list1">
</li>
<li>
<input type="checkbox">
<label for="user_list2">인도네이자 만델링 (100g)</label>
<input type="number" min="1" max="10" value="1" step="1" id="user_list2">
</li>
<li>
<input type="checkbox">
<label for="user_list3">탐라 블랜딩 (100g)</label>
<input type="number" min="1" max="10" value="1" step="1" id="user_list3">
</li>
</ul>
</fieldset>
<p>
<input type="submit" value="주문하기">
<input type="reset" value="재작성">
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
</head>
<body>
<h1>프런트앤드 개발자 지원서</h1>
<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
<hr>
<form action="#" method="post">
<h3>개인정보</h3>
<ul style="list-style: none;">
<li>이름 <input type="text" id="user_name" placeholder="공백없이 입력하세요"></li>
<li>전화 <input type="tel" id="user_tel"></li>
<li>지역
<select name="area" id="">
<optgroup label="area">
<option value="">서울</option>
<option value="">인천</option>
<option value="">수원</option>
</optgroup>
</select>
</li>
</ul>
<h3>지원분야</h3>
<ul style="list-style: none;">
<li>
<input type="radio" name="job" value="web_pub" id="">웹 퍼블리싱
</li>
<li>
<input type="radio" name="job" value="app_dev" id="">웹 애플리케이션 개발
</li>
<li>
<input type="radio" name="job" value="dev_eco" id="">개발 환경 개선
</li>
</ul>
<h3>지원동기</h3>
<textarea name="" id="" cols="40" rows="10" placeholder="지원동기를 입력하세요."></textarea>
<br>
<br>
<input type="submit" value="접수하기">
<input type="reset" value="다시작성">
</form>
</body>
</html>
