1. 표관련 태그
2. 이미지 및 멀티미디어 관련 태그
3. 입력양식 및 폼 관련 태그
1. 표관련 태그
표(table)
- 대량의 데이터를 정리해서 표현하고자 할 때 사용한다.
- 행(row)과 열(column) 그리고 셀(cell)로 이루어져있다.
표를 구성하는 태그
<table>
<caption>표 제목</caption>
</table>(1) 행과 셀을 만드는 태그
<tr> : table row의 약어로 표의 행을 만드는 태그
<th> : table head의 약어로 셀을 나타내는 태그(볼드체, 중앙 정렬 => 제목 표기)
<td> : table data의 약어로 셀을 나타내는 태그(일반 글씨체, 왼쪽 정렬 => 값 표기)기본적인 4행 3열의 표 예시
- width="x", height="y" 로 표의 가로 세로 크기 설정 가능
tr>th*3 단축키를 통해 자동완성 가능 여기서 border 속성은 표의 테두리 두께를 의미한다. <table border="1"> <caption><b>웹 브라우저 종료</b></caption> <tr> <th width="130" height="30">브라우저명</th> <th widith="80">제조사</th> <th width="150">홈페이지</th> </tr> <tr> <td>Edge</td> <td>Microsoft</td> <td>www.edge.com</td> </tr> <tr> <td>Chrome</td> <td>Google</td> <td>www.google.com</td> </tr> </table>
웹 브라우저 종료 브라우저명 제조사 홈페이지 Edge Microsoft www.edge.com Chrome www.google.com
(2) 행과 열을 합치는 속성
- 셀(th, td) 태그와 속성을 이용하여 행, 열 단위로 합칠 수 있다.
- rowsapn : 행을 합침
<td rowspan="합칠 셀의 개수">셀 내용</td>- colspan : 열을 합침
<td colsapn="합칠 셀의 개수">셀 내용</td>(3) 표의 구조
- 표의 맨 하단에 합계, 요약 등을 표시하는 표의 경우에는 표의 구조를 나누어 놓는 것이 좋다.
- table의 자식으로 tr 태그가 올 경우 react에서는 에러가 발생할 수 있다고 한다.
<thead> <tbody> <tfoot> 태그를 통해 제목, 본문, 요약을 나눈다.셀 병합과 표의 구조 예시
<table border="1"> <caption>회원 정보</caption> <thead> <tr> <th>이름</th> <th>나이</th> <th>주소</th> </tr> </thead> <tbody> <tr> <td>카네코</td> <td>31</td> <td rowspan="2">도쿄</td> => rowspan을 통해 아래행과 병합(2행) </tr> <tr> <td>아이묭</td> <td>29</td> </tr> <tr> <td>병건리</td> <td>40</td> <td>서울</td> </tr> </tbody> <tfoot> <tr> <td>총 회원</td> <td colspan="2">3명</td> => colspan을 통해 오른쪽 행과 병합(2행) </tr> </tfoot> </table>
회원 정보 이름 나이 주소 카네코 31 도쿄 아이묭 29 병건리 40 서울 총 회원 3명
2. 이미지 및 멀티미디어 관련 태그
2.1. img 태그
: 웹 문서에 이미지를 삽일할 때 가장 기본인 태그
img 태그의 속성
- src : 이미지 파일의 경로를 지정하여 웹 브라우저에 알려주는 역할(필수)
- 절대경로 : src="/~~" 항상 최상위 디렉토리에서부터 원하는 파일을 찾고자 할 때 사용
- 상대경로 : src="../~~" 항상 현재파일의 디렉토리에서부터 원하는 파일을 찾고자 할 때 사용
- alt : 이미지를 대신해서 읽어 줄 텍스트(이미지 설명 문구) / 이미지 제대로 표현 불가한 경우 대체 텍스트 / 시각장애인들을 위한 스크린리더에서 읽어주는 이미지 설명 문구
- width : 이미지의 가로 크기(픽셀-px or 퍼센트-% 중 작성)
- height : 이미지의 세로 크기
- 픽셀(px) : 고정 길이 단위 - 이미지 크기를 픽셀 크기만큼 표시(크기 변동 없음)
- 퍼센트(%) : 가변 길이 단위 - 웹 브라이저 창의 너비와 높이를 기준으로 이미지 크기 결정
이미지 픽셀
<img src="../resources/image/nuguri1.gif" width="200px" height="150">
이미지 퍼센트
<img src="../resources/image/dog1.gif" alt="" width="23%" height="250">반응형 이미지 : 화면 사이즈에 따라 보여줄 이미지를 지정
- 웹 페이지의 크기 변경에 따라 보여지는 이미지가 달라진다.
- picture 태그는 0개 이상의 source 요소와 하나의 img 요소로 구성
- srcset="경로 지정" media="미디어 조건"
- img 태그는 마지막에 작성(source보다 뒤에 작성)
<picture>
화면의 가로사이즈가 600일 때까지 보여줄 이미지
<source srcset="../resources/image/animal1.gif" media="(max-width:600px)" >
화면의 가로사이즈가 1500일 때까지 보여줄 이미지
<source srcset="../resources/image/animal2.gif" media="(max-width:1200px)" >
그 이상일 경우 보여줄 이미지
<source srcset="../resources/image/animal3.gif">
위 조건을 모두 만족하지 못하는 경우
<img src="../resources/image/flower1.jpg">
</picture>이미지 맵(image map) : html에서 하나의 이미지에 링크를 거는 방법
- name 속성을 통해 이름을 지정하고 img 태그에 usemap 속성으로 이미지 맵을 지정
- map 태그의 name 이름과 usemap의 value는 동일해야 한다.
- map 태그에는 #을 먼저 작성
- shape : 영역의 형태를 지정
(defalut : 화면 전체 / rect : 사각형 / circle : 원형 / poly : 다각형) - coords : 링크로 사용할 영역 좌표를 지정
- href : 이동할 페이지
- alt : 대체문구
- shape : 영역의 형태를 지정
<img src="../resources/image/passion2.jpg" width="500px" usemap="#mymap">
<map id="mymap"> usemap과 map의 value는 값이 동일해야 한다.
<area shape="rect" coords="0,0,250,504" href="http://google.com" alt="구글로 이동하기 영역">
<area shape="rect" coords="250,0,500,504" href="http://naver.com" alt="네이버로 이동하기 영역">
</map>2.2.오디오, 비디오 관련 태그
- 오디오 관련 태그
<audio src="오디오 파일 경로"></audio>
<audio src="../resources/audio/major.mp3" controls autoplay loop muted preload="auto">- 비디오 관련 태그
<video src="비디오 파일 경로"></video>
<video src="../resources/video/video1.mp4" controls autoplay width="400px" height="200px"
poster="../resources/image/ball.gif">- 관련 속성
| 종류 | 설명 |
|---|---|
| controls | 화면에 컨트롤 바 표시 |
| autoplay | 자동재생 |
| loop | 반복재생 |
| muted | 음소거여부 |
| preload | 재생 전 다운로드 여부 |
| width/height | 가로/세로 길이 |
| poster | 비디오 섬네일 |
3. 입력 양식 및 폼 관련 태그
로그인 버튼, 회원가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소를 폼(form)이라고 한다.
3.1. Input 태그
- 사용자에게 값을 입력받을 수 있는 텍스트 박스 또는 체크 박스 등을 만들 수 있다.
- input 태그는 다양한 type 속성을 통해 값을 전달
<input type="text, password, radio, button, etc..">
아이디 : <input type="text"> <br>
비밀번호 : <input type="password"> <br>
성별 : <input type="radio"> 남자 <input type="radio"> 여자 <br>
<button>회원가입</button>
<input type="button" value="회원가입" >아이디 :
비밀번호 :
성별 : 남자 여자
폼 관련 태그
종류 설명 method 사용자가 입력한 데이터의 전송방식을 지정하는 속성, get과 post - get방식(기본값): 사용자가 입력한 값들을 url의 쿼리스트링으로 만들어 전송하는 방식
(주소 표시줄에 입력 내용이 그대로 드러나는 단점/256~4096byte까지 전송가능)- post방식: 데이터 전송 시 사용자가 입력한 값들이 url의 body에 담겨서 전송되는 방식 name 서버로 전송했을 때의 key값으로 사용 action form 태그 내 사용자가 입력한 값들을 전달(서버의 경로)
폼 요소 태그
- fieldset 태그 : 그룹을 묶는 태그 (큰 사각형으로 묶는다)
- legend xorm : 그룹에 제목을 붙이는 태그(묶은 사각형의 제목)
- label 태그 : input 태그와 같은 폼 요소에 레이블을 붙일 때 사용. 입력란 가까이에 아이디, 비밀번호처럼 붙여놓은 텍스트
아래의 형태로 사용하여 label 태그의 for 속성과 폼 요소의 id 속성을 통해 연결(1) <label>아이디<input type="text"></label> (2) <label for="user-id">아이디</label> <input type="text" id="user-id"
- input의 submit 타입으로 제출 버튼 클릭 시 action에 지정한 서버로 method에 작성한 전송방식대로 사용자가 입력한 값들이 key, value 형태로 전달된다.(제출 버튼)
제목1 입력 1 :<form action="test"> <fieldset> <legend>제목1</legend> 입력 1 : <input type="text" name="text1"> <br> 입력 2 : <input type="text" name="text2"> <br> </fieldset> <fieldset> <legend>제목2</legend> 입력 3 : <input type="text" name="text1"> <br> 입력 4 : <input type="text" name="text2"> <br> </fieldset> <input type="submit"> </form>
입력 2 :
제목2 입력 3 :
입력 4 :
3.2. text와 관련된 input 태그의 타입들
1) type="text" - text 타입 : 한 줄짜리 일반 텍스트(주로 아이디, 이름, 주소 등)
2) type="password" - password 타입 : 비밀번호 필드로 *로 표기
3) type="search/url/email" : 겉모습은 일반 텍스트와 동일하나 각 기능에 맞게 독특한 기능들 제공
- 텍스트 필드의 주요 속성들
| 종류 | 설명 |
|---|---|
| size | 화면에 몇 글자 보이도록 할 것인지 지정 |
| placeholder | 미입력 시 텍스트 박스 배경의 회색 글씨를 의미 |
| maxlength | 텍스트 박스 최대 문자수 지정 |
| required | 최소 한글자 입력해야 submit가능하도록 설정(form 태그에서만 사용) |
<form action="test">
<label>아이디 : </label>
<input name="userId" placeholder="아이디를 입력하세요" maxlength="12" required>
<label>비밀번호 : </label>
<input type="password" name="userPwd" placeholder="영문,숫자,특수문자8~15"
maxlength="15" required>
검색 : <input type="search" name="keyword" placeholder="검색어 입력..."> <br>
홈페이지 : <input type="url" name="homepage" placeholder="홈페이지 주소를 입력하세요..."> <br>
이메일 : <input type="email" name="email" placeholder="이메일을 입력하세요"> <br>
<input type="submit" value="제출">
</form>비밀번호 :
검색 :
홈페이지 :
이메일 :
textarea: "여러 줄" 입력할 수 있는 텍스트 박스
게시글 작성 글 제목:<form action="test"> <fieldset> <legend>게시글 작성</legend> 글 제목: <input type="text" name="title" size="35px"><br> 글 내용: <textarea name="content" cols="30" rows="10"style="resize: none;" >글내용: 안녕하세요 반갑습니다 안녕히 가세요</textarea> <input type="submit" value="작성하기"> </fieldset> </form>
글 내용:
3.3. 라디오버튼과 체크박스 관련 input 태그의 타입
1) type="radio"
- 여러 항목 중 원하는 항목 오직 1개를 선택할 때 사용하는 폼 요소
- name 속성값이 같은 것들끼리 하나의 그룹으로 지정된다
- 서버로 데이터를 전송할 때 현재 선택된(chekced) 값 1개만 넘어간다(그룹당 1개)
- 체크 박스와 라디오 버튼에서 사용할 수 있는 속성
| 종류 | 설명 |
|---|---|
| value | 서버로 넘겨줄 값 지정. 영문이거나 숫자여야 하며 필수 속성이다 |
| checked | 처음 기본으로 선택되어 있을 항목. 속성값은 따로 없다 |
<form action="checked">
성별 :
<input type="radio" name="gender" value="X" id="genderX">
<label for="genderX">선택안함</label>
<input type="radio" name="gender" value="M" id="genderM">
<label for="genderM">남자</label>
<input type="radio" name="gender" value="F" id="genderF">
<label for="genderF">여자</label>
</form> 2) type="checkbox"
- 여러 항목 중 원하는 항목 여러개를 선택하여 서버로 전송할 때 사용하는 폼 요소
- 현재 선택된(checked) 값들이 넘어간다.
- 넘기고자 하는 값들의 value값을 지정해줘야 한다. 미지정 시 (on이라는 문자열만 넘어간다)
<form action="checked">
취미:
<input type="checkbox" name="hobby" id="baseball" value="야구" checked>
<label for="baseball">야구</label>
<input type="checkbox" name="hobby" id="bascketball" value="농구">
<label for="basketball">농구</label>
<input type="checkbox" name="hobby" id="soccer" value="축구">
<label for="soccer">축구</label>
<input type="submit" value="☆제출하기★">
</form>3.4. 숫자와 관련된 input 태그의 타입들
1) type="number"
- 숫자값만 작성 가능한 텍스트 상자
- 스핀박스가 표시됨
- number와 range 타입에서 사용할 수 있는 속성
| 종류 | 설명 |
|---|---|
| min | 최솟값 지정(기본값 0) |
| max | 최댓값 지정(기본값 100) |
| step | 숫자 간격 지정(기본값 1) |
| value | 필드에 표시할 초기값 |
<form action="number">
수량 : <input type="number" name="amount" min="0" max="100" step="10" value="0">
<input type="submit" value="제출">
</form>2) type="range"
- 슬라이드바를 통해 값의 범위 지정 가능
<form action="number">
점수 : <input type="range" name="score" min="0" max="100" step="10" value="0">
<input type="submit" value="제출">
</form>3.5. 날짜 및 시간과 관련된 input 태그의 타입들
type="date/month/week/time/datetime-local
<form action="date">
date : <input type="date" name="dateIn"> <br> 연도-월-일
month : <input type="month" name="monthIn"> <br> 연도-월
week: <input type="week" name="weekIn"> <br> 연도-주
time : <input type="time" name="timeIn"> <br>
datetime-loacal : <input type="datetime-local" name="datetime-loacal"> <br>
<input type="submit" value="☆제출하기★">
</form>
month :
week:
time :
datetime-loacal :
3.6. 추가 input 태그들 타입
- 컬러 타입 : 사용자가 색상 선택 가능
<input type="color" name="color">- 파일 첨부 타입 : 첨부하고자 하는 파일 선택 가능
<input type="file" name="upload">- 히든 타입 : 특정값을 사용자에게 입력받지 않고, 화면에 노출시키지도 않고 서버에 전송하고자 할 때 사용하는 속성
<input type="hidden" name="hidden" value="오우"> - 전송/리셋/기본 버튼 타입
- submit : 폼에 입력한 정보를 서버로 전송
- reset : 사용자가 폼에 입력한 모든 내용 삭제
- button : 오직 버튼 형태
<input type="submit" value="표시할 내용(제출)">
<input type="reset" value="표시할 내용(취소)">
<input type="button" value="표시할 내용(그냥 버튼)">- button 태그 : 버튼 태그의 type 속성 생략 시 기본값은 submit
- submit
- reset
- button
<button type="submit">제출</button>
<button type="reset">초기화</button>
<button type="button">일반버튼</button>제출
초기화
일반버튼
select 태그와 option 태그
- 사용자에게 직접 값을 입력받는 것이 아닌, 제시한 여러 옵션들 중에서 선택할 수 있게 해주는 태그
- 서버로 데이터 전송시 현재 선택된(selected) 값이 넘어간다.
- 각 option태그에 value속성값을 지정하여 지정한 값이 서버로 넘어가게 하거나,
value 속성값을 명시를 하지 않고 option태그의 content영역값이 자동으로 넘어가게 할 수 있다.국적 : 한국 미국 영국 러시아 선택안함<form action="select"> 국적 : <select name="national"> <option value="ko">한국</option> <option value="us">미국</option> <option value="eu">영국</option> <option value="ru">러시아</option> <option selected>선택안함</option> </select> </form>
datalist 태그와 option 태그
- select에 값이 없더라도 text박스를 통해 내가 작성한 값이 서버에 전달될 수 있도록 지원하는 태그
국적 : 한국 미국 영국 러시아<form action="datalist"> 국적 : <input type="text" name="national2" list="nationalList"> <datalist id="nationalList"> <option>한국</option> <option>미국</option> <option>영국</option> <option>러시아</option> </datalist> <input type="submit" value="제출"> </form>
