0. 설치
- visual studio code 설치 -> 확장프로그램 korean, Live Server, Auto Rename Tag 설치
0. 워크스페이스 생성
미리 'frontend-workspace' > '1_html_workspace'폴더 생성 후
폴더열기 > 주소복사 'C:\frontend-workspace\1_html_workspace'
0. Test
- 새파일 > 0_test.html (확장자가 html)
<html>여는 html 태그
</html> 닫는 html 태그
합쳐서 '요소'
<!DOCTYPE html>
<html></html>
- <head>태그, <body>태그
html 부모요소 / head, body 자식요소
<!DOCTYPE html>
<html><!--시작-->
<head>
</head>
<body>
</body>
</html><!--끝-->- html의 자식요소 이면서 h1의 부모요소
<body>
<h1>HTML 제목</h1>
</body>Open with Live Server시,
- <button> 버튼 태그
: 버튼 표시 만들기
<button> 버튼 </button>
- <hr> 태그
: 구분선(긴 실선) 가로로 구분선, 수평선을 긋는 태그
<hr>
1. 글자 관련 태그
새파일 > 1_글자관련태그.html
! > tap > 기본설정 자동완성
1) HTML문서 형식 선언: HTML형식이라는 것을 알려주기 위한 태그
3) <head> 문서의 머리부분을 나타냄
: 해당 문서의 각종정보, 제목, 설명, 스크립트 & 스타일시트 링크 선언 하는 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset ="UTF-8">
<meta name =" generator" content = "VScode">
<mata name ="author" content = "JongLo C class">
<meta name = "keyword" content = "글자태그">
<meta name = "description" content = "이문서는 글자와 관련된 태그를 공부하는 페이지입니다.">
<title>글자 관련 태그</title>
</head>
4) charset: 이 문서의 인코딩방식을 정의
5) generator: 이 문서를 생성한 프로그램
6) author: 이 문서의 저장
7) keyword: 이 문서를 나타내는 키워드
8) description : 이 문서에 대한 설명
9) <title> : 이문서의 제목을 나타냄
10) <body> 문서의 몸체부분을 나타냄 : 화면에 출력해서 보여주는 정보, 내용들을 작성하는 태그
페이지 소스 검사를해보면,
11) <br> : 줄바꿈 태그
<br><br>
안녕하세요3<br>12) h관련 태그(h1~h6) : 주로 제목붙일 때 씀 / 구조를 잡는 언어(절대로 글자 크기를 지정하는 것은 X > CSS에서 처리)
<h1>h1태그입니다.</h1>
<h2>h2태그입니다.</h2>
<h3>h3태그입니다.</h3>
<h4>h4태그입니다.</h4>
<h5>h5태그입니다.</h5>
<h6>h6태그입니다.</h6>
<h7>h7태그</h7> <!--존재하지 않는 태그 사용 시 : 일반 글꼴 -->
< 문단을 나누는 태그 >
1) <p>
줄바꿈 입력의 별도의 태그로 지정해야 한다. 그리고 공백은 한 개의 공백만 표시하기 때문에 기호문구를 사용해야 함(원하는 공백만큼)
1-1) <br> : 줄바꿈
1-2) : 공백
2) <pre>
pre태그는 여러 공백이 인식가능하고 줄바꿈 등을 포함해서 입력한 내용 그대로 표현하는 태그이다.
<h3> 문단을 나누는 태그 </h3>
<p>
문단 영역을 나누는 태그로는 p태그와 pre태그가 있다. <br>
단, p태그는 줄바꿈입력을 별도의 태그로 지정해야 한다. <br>
그리고 공백은 한 개의 공백만 표시하기 때문에
기호문구를 작성해야 한다.(원하는 공백만큼)
</p>
<pre>
pre태그는 여러 공백이 인식 가능하고
줄바꿈 등을 포함해서 입력한 내용 그대로를 표현하는 태그이다.
</pre>
< 그 밖에 글자를 표현해주는 태그들 >
-> HTML은 "구조"만 잡는 역할이기에 "효과"를 주고싶다면 CSS로 해야함
1) <b> : 글자를 굵게 표시하는 태그
2) <strong> : 글자를 굵게 표시하는 태그 (강조)
3) <em> : 글자를 기울여서 표시하는 태그
4) <i> : 글자를 기울여서 표시하는 태그
5) <s> : 글자의 취소선을 넣어주는 태그
6) <mark> : 형관펜 효과를 주는 태그
7) <small> : 글자를 작게 표현하는 태그
8) <big> : 글자를 크게 표현해주는 태그
9) <sub> : 기본글자에 아래 첨자를 나타내는 태그
10) <sup> : 위첨자를 나타내는 태그
<h3>그 밖에 글자를 표현해주는 태그들</h3>
일반글꼴(태그로 감싸지지 않은 텍스트)
<br><br>
<b> b : 글자를 굵게 표시하는 태그</b> <!--글자를 굵게-->
<br><br>
<strong> strong : 글자를 굵게 표시하는 태그 </strong> <!--글자를 강하게 표시(강조)-->
<br><br>
<em> em : 글자를 기울여서 표시하는 태그 </em>
<!--HTML은 구조만 잡는 역할이기에 굵게, 기울이게 효과를 주고 싶다면 CSS로 해야 함-->
<br><br>
<i> i : 글자를 기울여서 표시하는 태그 </i>
<br> <br>
<s> s : 글자의 취소선을 넣어주는 태그 </s>
<br><br>
<mark> mark : 형광펜 </mark> 효과를 주는 태그들
<br><br>
<small> small : 글자를 작게 표현해주는 태그 </small>
<br><br>
<big> big : 글자를 크게 표현해주는 태그</big>
<br><br>
sub : 기본글자에 <sub> 아래 첨자</sub>를 나타내는 태그들
<br><br>
sup : <sup> 위첨자 </sup>를 나타내는 태그
< 글자관련 응용문제 >
<h3> 글자 관련 태그 응용 문제 </h3>
태그들은 해당 태그 내에서 중첩으로 사용 가능하다. <br>
<b> 굵은 </b> 글자를 사용할 수도 있고 <br>
<i> 기울이거나, </i> <s>취소선</s>을 넣는 등 다양하게 사용할 수 있다. <br>
<mark>형관펜</mark>을 넣어 글자를 강조할 수도 있다.<br>
HTML 꿀잼꿀잼
2. 목록 관련 태그
1) <li> : 가장 기본적인 목록을 나타내는 태그, list의 약자
<li>목록1</li>
<li>목록2</li>
- 불릿(bullet)기호 : 채워진 원, 빈 원, 네모 등 모양 변경 가능 CSS시간에 할 예정
2) <ul> : 순서가 없는 목록 태그
* 조상요소(2개이상의 자손이 있을 때) - 후손요소 - 부모요소 - 자식요소
<ul><!--부모요소, 4개의 자식요소를 가지고 있음(직계자손만 해당)두 개이상의 자손이 있을 경우 조상요소-->
<li>HTML <!--부모요소, 1개의 자식요소(ul), 후손요소, 조상요소(li의 입장)-->
<ul> <!--부모요소, 1개의 자식요소(li)-->
<!-- 목록 안에 목록을 넣을 수 있다. -->
<li> 글자 관련 태그 </li>
<li> 목록 관련 태그 </li>
</ul>
</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>3)<ol> : 순서가 있는 목록 태그 , 기본적으로 1부터 시작하는 숫자값
type속성을 이용하여 변경가능(속성값 : 1(기본값), A, a, i, l)
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol start="5">
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>3) <dl> : 설명과 관련된 목록태그
<dt> : 제목
<dd> : 설명
- dd를 여러 줄 작성할 수 있으며, 제목과 설명을 추가로 작성이 가능하다.
<실습문제>
<h3>자바(Java)과정 학습내용</h3>
<b>담당강사 : 이**</b><br>
핸드폰번호 : 010-1111-2222
<hr>
<ul>
<li>프로그래밍언어
<ul>
<li><s>Java</s></li>
</ul>
</li>
<li>데이터 베이스
<ul>
<li><s>Oracle</s></li>
</ul>
</li>
<li>Frontend
<ol>
<li><mark>HTML5</mark></li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
</li>
<li>서버 개발 기술
<ol>
<li><s>JDBC</s></li>
<li>Servlet</li>
<li>JSP</li>
<li>AJAX</li>
</ol>
</li>
<li> 프레임워크
<ol>
<li>MyBatis</li>
<li><b>Spring</b></li>
</ol>
</li>
</ul>
</body>
</html>3. 표관련태그
● 표 : 행과 열로 이루어짐
문서에서 다량의 데이터를 정리해서 표현하고자 할 때 사용
● 표를 구성하는 태그 : <table>, <tr>, <th>, <td> // <thead>, <tbody>
<table></table> : 기본적으로 표를 생성해주는 태그
1) 기본적인 표 만들기
- 테이블 만드는 법: 1. 테이블을 쓴다. > 2. <tr>태그를 쓴다 > <td>셀들을 나눠준다
(1) border 속성 : 표의 테두리 두께 지정
(2) <caption> 태그 : 테이블의 제목추가(기본적으로 테이블 상단 중앙)표의 이름을 지정해줄 수 있는 tag
(3) width 속성 : 가로길이지정, 크기(속성값), 단위 px
(4) height 속성 : 세로길이지정 (세로 길이는 첫 칸에만 지정해주면 됨)
(5) <th> : 가운데정렬 + 볼드체
(6) <td> : 일반폰트
<table border="1">
<caption>웹 브라우저 종류</caption>
<tr>
<th width = "150" height = "30">브라우저 명</th>
<th width = "80">제조사</th>
<th width = "220">홈페이지</th>
</tr>
<tr>
<td>Chroom</td>
<td>Google</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>Edge</td>
<td>Microsoft</td>
<td>http://www.microsoft.com</td>
</tr>
<tr>
<td>Safari</td>
<td colspan="2">Apple</td>
</tr>
</table>
2) 표와 행과 열을 합치는 속성
- 셀태그<th>, <td>와 속성을 이용해서 행 또는 열을 합칠 수 있음
- colspan = "2" : 2개의 열을 합치겠다.
- rowsspan = "2" : 2개의 행을 합치겠다.
<table border="1">
<tr>
<td colspan="2" rowspan="2" width = "130", height = "150"></td>
<td>이름</td>
<td width = "80"></td>
</tr>
<tr>
<td>연락처</td>
<td></td>
</tr>
<tr>
<td height = "50">주소</td>
<td colspan="3"></td>
</tr>
<tr>
<td height = "200">자기소개</td>
<td colspan="3"></td>
</tr>
</table>
<br><br><br>
<table border="1">
<tr>
<td colspan="2" rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
3) 테이블 내에 구조나누기
- <thead> : 테이블 당 하나만 존재가능
- <tfoot> : 테이블 당 하나만 존재가능(thead뒤에 존재해야 함)
<table border="1">
<thead> <!--테이블 당 하나만 존재가능-->
<th>이름</th>
<th>주소</th>
<th>성별</th>
</thead>
<tbody>
<tr>
<td>이**</td>
<td>남*시</td>
<td>남</td>
</tr>
<tr>
<td>홍길동</td>
<td>서울시</td>
<td>남</td>
</tr>
<tr>
<td>철수</td>
<td>대전광역시</td>
<td>남</td>
</tr>
<tfoot>
<th colspan = "2">총 인원</th>
<td>3명</td>
</tfoot>
</tbody>
<tfoot>
</tfoot>
</table>
<실습문제>
<table border="1">
<thead>
<th colspan="5" rowspan="5">게시판</th>
</thead>
<tbody>
<th>글번호</th>
<th>제목</th>
<th>닉네임</th>
<th>작성일</th>
<th>조회수</th>
<tbody>
<tr>
<td>5</td>
<td>점심 뭐가 맛있나요?</td>
<td>종로지킴이</td>
<td>2022-18-18 14:22</td>
<td>3</td>
<tr>
<td>4</td>
<td>부장님께 혼났습니다ㅠㅠ</td>
<td>신입이</td>
<td>2022-18-18 16:42</td>
<td>32</td>
</tr>
<tr>
<td>3</td>
<td>주식 아직도 해?</td>
<td>은행원</td>
<td>2022-10-17 16:23</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>박** 축구 너무 잘해</td>
<td>패스마스터</td>
<td>2022-10-17 10:15</td>
<td>15</td>
</tr>
<tr>
<td>1</td>
<td>첫글</td>
<td>신나신나</td>
<td>2022-10-13 01:11</td>
<td>3</td>
</tr>
<tr>
<td rowspan = "2">합계</td>
<td colspan = "4"> 총 게시글 수: 5</td>
</tr>
<tr>
<td colspan="4">총 조회 수: 150</th>
</tr>
</table>
4. 이미지 및 멀티미디어 관련 태그
1) 이미지 관련태그
< img src = "삽입하고자 하는 img의 경로(필수)" alt = "이미지설명문구"
width = "이미지의 가로크기"(px/%) height = "이미지의 세로크기(px/%)" >
(1) src속성, alt속성
● alt
- 사진의 경로가 없는 경로거나 이미지를 제대로 표현할 수 없는 경우 대체텍스트의 용도
- 시각 장애인들을 위한 스크린리더(화면낭독기)에서 이미지를 읽어주는 설명문
웹 접근성 => 사용자의 신체적 특징이나, 지역, 나이, 지식수준 등을 고려하여
가능한 많은 사용자가 불편 없이 이용할 수 있도록 서비스를 만들어서 제공하는 것
<h3>src속성, alt속성</h3>
<img src="https://han.gl/sKmKU" >
<br>
<!-- 절대경로 -->
<img src = "resources\image\bono1.jpg" alt="이 사진은 보노보노입니다.">
<!-- 만약 경로가 잘못되었거나, 망가졌을 때 이미지가 나오지않고 그림이 나옴
이때 alt속성을 적어준 것이 출력됨 > 오류 시에만 나오는 문구 -->+ 이미지 주소가 너무 길 경우, url줄이기를 이용해 줄이기(가독성을 위해)
(2) width와 height 속성
- 이미지의 가로, 세로 길이 조정가능
- 고정길이(px), 가변길이(%)로 지정이 가능하다.
● 고정길이단위(px) - 기본값 : 화면사이즈가 조정되더라도 이미지의 크기가 변동 X
<img src="/resources/image/flower2.jpg" alt="꽃" width="100" height="150"/>
<img src="/resources/image/flower3.jpg" alt="꽃" width="150" height="200">
<img src="/resources/image/flower4.jpg" alt="꽃" width="200" height="200">
<img src="/resources/image/flower5.jpg" alt="꽃" width="200" height="175">+ 닫는 태그가 없는 태그 = 빈태그 / 빈 태그를 표시할 때 맨 끝에 /를 붙여 빈태그를 표시해줌
● 가변길이단위(%) : 화면사이즈 혹은 부모요소 사이즈에 따라 이미지의 크기도 같이 변동
<img src="/resources/image/flower2.jpg" alt="꽃" width="15%" height="150"/>
<img src="/resources/image/flower3.jpg" alt="꽃" width="15%" height="200">
<img src="/resources/image/flower4.jpg" alt="꽃" width="15%" height="200">
<img src="/resources/image/flower5.jpg" alt="꽃" width="15%" height="175">2) 미디어 관련 태그
(1) 오디오 관련 태그
< audio src = " "controls autoplay loop></audio>
- controls : 플레이어를 보일 여부 지정
- autoplay : 자동재생여부지정(IE O, Chroom X)
- loop : 반복재생여부지정
<audio src="/resources/audio/major.mp3" controls autoplay loop></audio>● controls="controls"속성명과 속성값이 같을 경우 속성값을 생략해도 됨
(2) 비디오 관련 태그
<video src = " "controls autoplay loop width = " " height = " " poster = " "></video>
- controls, autoplay, loop : 오디오와 동일
- width, height : 가로, 세로 길이 지정
- poster : 썸네일 이미지
<video src="/resources/video/movie.ogv" controls
width="400" height="200" poster="/resources/image/bono.jpg"></video>
5. 입력양식 및 폼관련 태그
1) 입력양식관련 태그
(1) <input> 태그
- 사용자에게 값을 "입력"받을 수 있도록 텍스트 상자, 체크박스 등등을 만들 수 있는 태그
- type속성으로 지정가능
Id : <input type="text"> <br>
Pwd : <input type="password"> <br>
성별 : <input type="radio"> 남자 <input type="radio"> 여자 <br><br>
<button>회원가입</button>
<input type="submit" value = "회원가입">● type = password : 비밀번호를 *로 표시해주는 속성
2) 폼관련 태그
(1) form
- 해당 입력 양식의 틀을 의미
- form 태그 내에 submit 버튼을 클릭 시 해당 form 태그에 작성한 사용자가 입력한 값들을 서버로 넘기면서 요청하는 역할을 하는 것이 form 태그와 submit버튼
<form action = " " method = " "></form>
● action 속성 : 해당 form 태그 안에 사용자가 입력한 값들을 전달하면서 요청할 서버의 경로를 제시
즉, 어디로 보낼 건지 지정
● method 속성 : 요청 전송 방식을 지정하는 속성(get방식(기본방식) / post방식) <br>
> get방식(기본) : 요청 시 사용자가 입력한 값들이 url에 노출되는 방식 (예) 네이버 검색
> post방식 : 요청 시 사용자가 입력한 값들이 url에 노출되지 않는 방식 (예) 로그인
- form 태그 내의 submit버튼 클릭 시 action에 지정한 서버의 경로로 method에 작성된 요청 전송 방식을 사용해서
사용자가 입력한 값들을 key = value 전달
<form action="test.do" method="get">
검색 내용 : <input type="text" name = "query"> <!--name 속성 : key 제시-->
<input type="submit" value="검색">
</form>
● fieldset : 그룹을 묶는 태그 (테두리를 만들어준다)
● legend : 해당 그룹의 제목을 붙여주는 태그(없어도 무관)
<form action="1234.do" method="post">
<fieldset>
<legend>제목1</legend>
입력1 : <input type="text" name = "text1"> <!--url에 검색한 값이 나타나지 않음-->
</fieldset>
<fieldset>
<legend>제목2</legend>
입력2 : <input type="text" name="text2">
</fieldset>
<input type="submit" value="확인" >
</form>
(2) text와 관련된 input태그의 type (type = "test")
- 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 상자
아이디 : <input type="text" name = "userId" value
placeholder="아이디를 입력하세요. " required >● key : name / value : 사용자가 입력한 값
● name : key 지정 , 의미를 부여해서 짓는 것이 좋음
● value : 텍스트값을 양식에 넣을 수 있음
● placeholder : 입력을 유도하는 꾸밈요소 / 진짜 값이 입력된 것이 아닌, 입력할 값을 안내
● required : 필수 입력사항일 경우 부여 / 반드시 값을 입력해야 서버로 내보낼 수 있음
- 비밀번호를 입력할 수 있는 상자
비밀번호 : <input type="password" name = "userPwd"
required maxlength="5" placeholder="영문, 숫자, 특수문자 포함 최대 5글자">● maxlength : 작성할 수 있는 최대 길이
- type = "search/url/email"
검색 : <input type="search" name ="query" placeholder="검색어 입력">
<br>
홈페이지 : <input type="url" name = "homepage" value="http://">
<br>
이메일 : <input type="email" name = "email">
<input type = "submit">● 겉모습은 일반 텍스트 상자와 비슷하지만 각각의 정보에 맞게 세분화된 기능 제공
● 검색 : <input type = "search" name = "query" placeholder = "검색어입력">
● 홈페이지 : <input type="url" name = "homepage" value="http://">
● 이메일 : <input type="email" name = "email">
(3) textarea 태그
- 텍스트 상자인데 여러 줄 입력할 수 있음
<form action = "test.do">
<fieldset>
<legend>글 작성</legend>
글제목 : <input type = "text" name = "title" size="30"> <br>
글내용 : <textarea type = "text" name = "content" cols = "30"
rows = "20" style="resize:none;" ></textarea>
<br><br>
</fieldset>
<input type = "submit" value="작성하기">
</form>
(4) 숫자와 관련된 input태그의 타입
● type = "number"
- 숫자값만 작성 가능한 텍스트 상자
- 스핀박스를 표시(스핀박스 : 위 / 아래 화살표 버튼)
<form action="test.do">
수량 : <input type = "number" name = "amount" min = "0" max = "20" value = "1" step = "5">- min : 최소값
- max : 최대값
- step : 한 번에 증가하거나 감소할 수 있는 값의 크기
● type = "range"
- 슬라이드바를 이용해서 숫자를 지정
점수 : <input type = "range" name = "score" min = 0 max = 100 step = 25>
<input type="submit">
<input type="reset">
</form>* reset : 현재 부모요소 form 태그 안에 있는 input 태그들 초기화
(5) 날짜 및 시간과 관련된 input태그의 type
: type = "date/month/week/time/datetime-local"
● 연도, 월, 일을 입력받을 수 있는 텍스트 상자
date : <input type = "date" name = "date">● 연도, 월을 입력받을 수 있는 텍스트 상자
month : <input type = "month" name ="month">● 연도, 해당 년도에 몇 번째 주인지 입력받을 수 있는 텍스트 상자
week : <input type = "week" name = "week">● 오전/오후, 시, 분을 입력받을 수 있는 텍스트 상자
time : <input type = "time" name = "time">● 연도, 월, 일, 오전/오후, 시, 분을 입력받을 수 있는 텍스트 상자
datetime - local : <input type="datetime-local" name = "dt">
(6) 라디오 버튼과 체크박스 관련 input태그
● 라디오 버튼(type = "radio")
- 제시한 여러 개의 선택지들 중에서 오로지 한 개만 선택해야 할 때 사용 <br>
- 제출 시 현재 선택된 (checked)값이 넘어감 <br>
- name 속성값이 똑같은 것들끼리 하나의 그룹으로 묶임 (하나만 선택가능 )
점심메뉴 :
<input type = "radio" name = "lunch" id = "lunchA" value = "짜장면" checked> <label for = "lunchA">짜장면</label>
<input type = "radio" name = "lunch" id = "lunchB" value = "짬뽕" > <label for = "lunchB">짬뽕</label>
<input type = "radio" name = "lunch" id = "lunchC" value= "짬짜면" > <label for = "lunchC">짬짜면</label>* 무조건 체크해서 제출하게 하고 싶다면 셋 중 하나를 checked속성 넣어주기
* id는 고유한 식별자
* 체크박스가 아닌 글자를 클릭해도 선택하게 하고 싶다면 id지정 후 label붙이기
● 체크박스(type="checkbox")
- 제시한 여러 개의 선택지들 중에서 여러 개를 선택 가능하게 하고 싶을 때 사용
- 넘기고자 하는 값을 value속성에 명시해야 함
취미 :
<input type="checkbox" name="hobby" value = "exercise" id = "exercise"> <label for = "exercise">운동</label>
<input type="checkbox" name="hobby" value="sleep" id="sleep"> <label for = "sleep">수면</label>
<input type="checkbox" name="hobby" value="reading_book" id="reading_book"> <label for = "reading_book">독서</label>
(7) 추가적인 input태그의 type
- type = "color"
: 색상을 선택할 수 있는 input태그의 type
색상선택 : <input type="color">- type = "file"
: 첨부하고자 하는 파일을 선택할 수 있는 input태그의 type
첨부파일 : <input type="file">- type = "hidden"
: 특정 값을 사용자에게 입력받지않고, 화면에 노출시키지도 않고 넘기고자 하는 값이 있을 경우 사용할 수 있음
(식별자 : update 시 글번호)
=> 주로 primary key에 해당하는 값을 넘김
안보임 : <input type = "hidden" value="1111">
<input type = "submit">
</form>
(8) 자주쓰이는 버튼 정리
● input태그로 버튼 만드는 법
- type : "submit/reset/button"
<input type="submit">
<input type="reset">
<input type="button" value="일반버튼">● button태그로 버튼 만드는법 (type = "submit/reset/button")
<button>제출</button>
<button type="reset">초기화</button>
<button type="button">일반버튼</button>- button태그에 type속성을 생략했을 경우 기본값은 submit, 그래서 form태그 내에서는 botton태그를 작성할 떄 type속성을 명시하는 것이 좋음
(9) select태그와 option태그
- 사용자에게 키보드로 직접 입력받는 것이 아니라 내가 제시한 여러 옵션들 중에서 선택할 수 있게끔 해주는 태그
- 제출 시 현재 선택된(selected) 값이 넘어감
- 각각의 option에 value 속성값을 명시 했을 경우 value값이 전달됨
만약 value속성값을 명시 하지 않을 경우 기본적으로 option 태그의 content영역의 값이 넘어감
<form action="0_test.html">
고냉지 메뉴 :
<select name = "kimchi_soup">
<option value="김치찌개">김치찌개</option>
<option>꽁치김치찌개</option>
<option>삼겹김치찌개</option>
<option>순두부김치찌개</option>
<!-- value속성값을 적으면 value값이 넘어가고 안적었다면 content 값이 넘어감 -->
</select>
(10) datalist : textbox + select 기능을 제공한다.
좋아하는 색상 : <input type = "text" name="color" list="colorlist">
<datalist id="colorlist">
<option>검정색</option>
<option>빨간색</option>
<option>파란색</option>
<option>노란색</option>
</datalist>
<button>버튼</button>
< 실습 문제 >
<fieldset>
<legend>회원가입양식</legend>
<form action="test.do">
*아이디<br>
<input type="text" name = "userId" placeholder="영문 소문자, 숫자, 특수기호(_,-) 5~20" size = "35" maxlength="20" required >
<button>아이디 중복확인</button> <br><br>
*비밀번호<br>
<input type="text" name = "userPwd" placeholder="영문 소문자, 숫자, 특수문자 8~15" size = "35" maxlength="15"><br><br>
*비밀번호재확인 <br>
<input type="text" name = "userPwd" placeholder="영문, 소문자, 숫자, 특수문자 8~15" size = "35" maxlength="15"><br><br>
* 이름 <br>
<input type="text" name = "name" size = "35"><br><br>
* 주민등록번호 <br>
<input type="text" name = "userNo" size = "12" maxlength="6"> - <input type="text" size = "12" maxlength="7"> <br><br>
* 성별 <br>
<input type="radio" name = "gender" checked>선택안함 <input type="radio" name = "gender">남자 <input type="radio" name="gender"> 여자 <br><br>
* 생년월일 <br>
<input type="date" name = "birthday"> <br><br>
* 주소 <br>
<input type="text" name="address" size="35"> <br><br>
* 우편번호 <br>
<input type="number" name="postNo"> <button>우편번호 찾기</button> <input type="checkbox" name="checkbox"> 우편수신동의 <br><br>
* 이메일 <br>
<input type="text" name="email"><input type="checkbox" name="checkbox"> 메일수신동의 <br><br>
* 휴대폰번호 <br>
<select name="phone1">
<option value="010">010</option>
</select>
-
<input type="text" name="phone2" size="10" maxlength="4">
-
<input type="text" name="phone2" size="10" maxlength="4"> <input type="checkbox"> 문자 수신 동의 <br><br>
<button type="reset">초기화</button>
<button type="submit">가입하기</button>
</form>
</fieldset>
'클라우드 융합 Full-stack 웹 개발자 양성과정 > HTML, CSS, JavaScript, j-Query' 카테고리의 다른 글
| j-Query - 개요, 기본선택자, 추가적인 선택자 (0) | 2022.11.01 |
|---|---|
| JavaScript - 요소가져오기(접근하기), 변수와 자료형, 문자열과 숫자, 배열, 함수, 객체1, 객체2, window객체, 이벤트, 정규표현식 (0) | 2022.10.24 |
| JavaScript - 개요, 데이터 입출력 (0) | 2022.10.24 |
| CSS - 화면구조잡기(기본, 실습, 상세구조, 세부구조), 실습 (0) | 2022.10.19 |
| HTML - 태그(영역, 하이퍼링크관련 태그), CSS - 선택자(기본, 기타, 우선순위), 스타일(글꼴, 텍스트, 목록, 영역, 테두리, 배경, 레이아웃, 화면꾸미기) (0) | 2022.10.19 |