HTML_태그의 종류(table,img)

table 태그

 

• 표를 만들 때 사용하는 태그다.

 

table 태그의 주요 태그

<table>

표를 정의하는 태그다

<thead>

표의 헤더부를 저의하는 태그다

<tbody>

표의 바디부를 정의하는 태그다

<tr>

표 내부의 행(table row)를 정의하는 태그다

<th>

행 내부의 제목 셀(table heading)을 정의하는 태그

<td>

행 내부의 일반 셀(table data)을 정의하는 태그

 

thead와 tbody는 표의 헤더부와 표의 바디부를 구분해서 각각 다른 스타일을 적용하거나 혹은 스트립트에서 바디부만 조작하기 위해서 사용

 

table 태그 사용예시

<style>
	thead{
            background-color: green;
            }

            tbody tr:nth-child(2n){
                background-color: lightgray;
            }
</style>

<h3>부서정보</h3>
    <table border="1">
        <tr>
            <td>부서아이디</td>
            <td>부서이름</td>
            <td>부서관리자</td>
        </tr>
        <tr>
            <td>10</td>
            <td>총무부</td>
            <td>김유신</td>
        </tr>
        <tr>
            <td>20</td>
            <td>기술부</td>
            <td>강감찬</td>
        </tr>
        <tr>
            <td>30</td>
            <td>영업부</td>
            <td>이순신</td>
        </tr>
    </table>

    <h3>학생정보</h3>
    <table border="1">
    <thead>
        <tr>
            <th>학번</th>
            <th>학과</th>
            <th>학년</th>
            <th>이름</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td>100</td>
            <td>컴퓨터공학과</td>
            <td>3</td>
            <td>이순신</td>
        </tr>
        <tr>
            <td>101</td>
            <td>컴퓨터공학과</td>
            <td>3</td>
            <td>강감찬</td>
        </tr>
        <tr>
            <td>103</td>
            <td>기계공학과</td>
            <td>1</td>
            <td>류관순</td>
        </tr>
    </tbody>
    </table>

 

위 코드에 대한 브라우저 출력 결과

 

 

 

테이블의 셀 병합 코드

 

• rowspan : 해당 셀이 점유할 행의 수를 지정한다 / 세로방향 병합
• colspan : 해당 셀이 점유할 열의 수를 지정한다 / 가로방향 병합

 

 

 

img 태그

 

• 웹페이지에 이미지를 삽입하는 태그

 

img 태그 주요 속성

src	이미지 경로를 지정한다 외부 이미지도 삽입할 수 있다
alt	이미지를 설명하는 텍스트를 지정한다 웹 접근성 준수를 위해서 필수값
width	그림의 너비를 지정하기 ( css로 지정가능 )
height	그림의 높이 지정하기

 

 

img 태그 사용예시

<img src="images/GettyImages-1774896643.jpg" width="450" height="300" alt="harry kane">

 

 

 

form 태그

 

• 사용자가 입력한 데이터를 수집해서 웹서버로 제출할 때 사용하는 태그
• input, textarea, button, select, checkbox, radio button 등의 입력 양식 태그를 포함할 수 있다

 

form 태그 주요속성

method	수집한 입력데이터를 웹 서버로 전달하는 방식을 지정한다 전달방식은 GET/POST가 있다
action	수집한 입력데이터가 전송될 URL을 지정한다 수집한 입력데이터를 처리하는 웹 애플리케이션의 URL을 지정한다

 

 

주요 입력 양식 태그 종류

<input type = "text" />	텍스트 입력필드를 추가한다
<input type = "password" />	비밀번호 입력필드를 추가한다
<input type = "radio" />	여러 개 중에서 하나만 선택할 수 있는 라디오 버튼을 추가한다
<input type = "checkbox" />	여러 개 중에서 복수개 선택할 수 있는 체크박스를 추가한다
<input type = "file" />	첨부파일 업로드 필드를 추가한다
<input type = "date" />	날짜 입력필드를 추가한다
<input type = "datetime" />	날짜/시간 입력필드를 추가한다
<input type = "number" />	숫자 입력필드를 추가한다
<input type = "reset" />	입력폼 초기화 버튼을 추가한다
<input type = "sybmit" />	폼 입력값을 서버로 제출하는 버튼을 추가한다
<input type = "hidden" />	숨김 필드를 추가한다 숨김필드는 페이지에 표시되지 않지만 입력값을 제출할 때 서버로 같이 제출된다
<select> 태그	콤보박스를 추가한다 콤보박스는 <option> 태그를 포함한다
<textarea> 태그	여러 줄의 텍스트를 입력할 수 있는 입력필드를 추가한다
<button> 태그	버튼을 생성한다

 

 

input 태그에는 name이라는 속성값이 있는데 name값을 지정해주지 않으면 웹 서버로 전송이 되지 않는다

웹서버로 전송할 때 name : value로 저장을 해서 보내는데 자바에 Collection에 Map의 Key : Value와 방식이 동일하다

 

 

 

form 태그 및 주요 입력 양식 태그들 사용예시

 <h2>입력폼 예</h2>
    <form action="login.jsp" method="post">
        <h3>텍스트 입력필드</h3>
        <input type="text" name="id" />

        <h3>비밀번호 입력필드</h3>
        <input type="password" name="pwd" id="">

        <h3>라디오 버튼</h3>
        <input type="radio" name="gender" id="" value="male" checked />남자
        <input type="radio" name="gender" id="" value="female" />여자 <br>

        <input type="radio" name="edu" id="" value="고졸" />고졸
        <input type="radio" name="edu" id="" value="전문대졸" />전문대졸
        <input type="radio" name="edu" id="" value="대졸" />대졸
        <input type="radio" name="edu" id="" value="대학원졸" />대학원졸

        <h3>체크박스</h3>
        <input type="checkbox" name="skils" id="" value="java">java
        <input type="checkbox" name="skils" id="" value="pythod">pythod
        <input type="checkbox" name="skils" id="" value="C">C
        <input type="checkbox" name="skils" id="" value="C++">C++
        <input type="checkbox" name="skils" id="" value="rust">rust

        <h3>날짜 필드</h3>
        <input type="date" name="birth" id="" />

        <h3>시간 필드</h3>
        <input type="time" name="" id="">

        <h3>날짜/시간 필드</h3>
        <input type="datetime-local" name="birthdaytime" id="">

        <h3>숫자 필드</h3>
        <input type="number" name="amount" id="" value="0" step="10" min="0" max="100">

        <h3>범위 필드</h3>
        <input type="range" name="points" id="" max="100" step="5" value="35">

        <h3>첨부파일 필드</h3>
        <input type="file" name="myfile" id="">

        <h3>숨김 필드</h3>
        <input type="hidden" name="userNo" value="12341234">
        <!--
            숨김필드는 페이지에 표시되지 않는다
            폼 입력값을 제출할 떄 같이 서버로 제출된다
        -->

        <h3>콤보박스</h3>
        <select name="city" id="">
            <optgroup label="시">

                <option value="1100">서울</option>
                <option value="1200">인천</option>
                <option value="1300">부산</option>
                <option value="1400">광주</option>
                <option value="1500" selected>대전</option>
                <option value="1600">대구</option>
            </optgroup>
            <optgroup label="도">
                <option value="2100">경기도</option>
                <option value="2200">강원도</option>
                <option value="2300">충청도</option>
                <option value="2400">전라도</option>
                <option value="2500">경상도</option>
                <option value="2600">제주</option>
            </optgroup>
        </select>

        <h3>텍스트 박스</h3>
        <textarea name="memo" id="" cols="10" rows="100"></textarea>

        <h3>리셋버튼과 제출버튼</h3>
        <input type="reset" value="리셋버튼">
        <input type="submit" value="제출버튼">
        </form>
        </body>

 

 

위 코드에 대한 브라우저 출력결과