6) 이미지 요소
- 일련된 항목들이 나열된 것들이다.
- img
- alt
- src
(1) img 태그
- 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그이다.
<img src="./images/pizza.png" alt="피자">(2) alt 태그
- 이미지의 대체 텍스트를 나타내는 속성이다.
- 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성이다.
- src 속성과 더불어 반드시 들어가야 하는 속성이다.
(3) width/height 속성
- 값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산된다.
- 둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경된다.
- 반면 두 속성 모두 선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경된다.
(4) 상대경로와 절대경로
- 상대경로 : 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로
- 절대경로 : 실제 그 이미지가 위치한 곳의 전체 경로
<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">
<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">(5) 이미지 파일 형식
- gif : 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식
- jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식(투명을 지원하지 않는다.)
- png : 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식
7) 테이블 요소
- 데이터를 표로 나타낼 때 사용되는 태그이다.
- table
- th
- tr
- td
(1) 표의 구성 요소
-
하나의 table은 하나 이상의 tr로 이루어져 있으며, tr은 셀을 나타내는 th, td를 자식으로 가지게 된다.
-
표를 구성할 때는 위에서 아래로, 좌측에서 우측으로 작성하면 된다.
<html>
<body>
<table border=2>
<thead>
<tr>
<th>이름</th> <th>성별</th> <th>주소</th><th>회비</th>
</tr>
</thead>
<tbody>
<tr>
<td>평경장</td> <td>남</td> <td rowspan="2">청주</td><td>1000원</td>
</tr>
<tr>
<td>정마담</td> <td>여</td> <td>500원</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">합계</td><td>1500원</td>
</tr>
</table>
</body>
</html>
(2) 표의 구조와 관련된 태그
- 표를 구조적으로 파악하기 위해 도움이 되는 태그를 사용한다.
- caption: 표의 제목을 나타내는 태그
- thead: 제목 행을 그룹화하는 태그
- tfoot: 바닥 행을 그룹화하는 태그
- tbody: 본문 행을 그룹화하는 태그
8) 폼 요소
- 웹 사이트에는 사용자의 입력을 요구하기도 한다.
텍스트를 입력받거나 선택을 하게끔 하기 위해 폼 요소를 사용한다. - type = "text"
- placeholder
- type = "password"
- type = "radio"
- type = "checkbox"
- type = "file"
- type = "submit"
- type = "image"
- type = "button"
- select
- textarea
- button
- label
- fieldset
- legend
- form
(1) type="text"
- 주로 아이디, 이름, 주소, 전화번호 등
단순한 텍스트를 입력할 때 사용
<input type="text" placeholder="ㅇㅇㅇ">(2) type="password"
- 암호와 같이 공개할 수 없는 내용을 입력할 때 사용한다.
<input type="password">(3) type="radio"
- 라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 한다.
<input type="radio" name="gender"> 남자
<input type="radio" name="gender"> 여자(4) type="checkbox"
- 체크박스는 중복 선택이 가능하다.
<input type="checkbox" name="hobby"> 발라드
<input type="checkbox" name="hobby"> 댄스
<input type="checkbox" name="hobby"> 힙합(5) type="file"
- 파일을 서버에 올릴 때 사용한다.
<input type="file">(6) type="submit|reset|image|button"
- submit, reset, image, button 타입은 모두 클릭 가능한 버튼을 만든다.
<form action="./test.html">
메시지: <input type="text" name="message"><br>
<input type="submit">
<input type="reset">
<input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
<input type="button" value="버튼">
</form>| 이름 | 기능 |
|---|---|
| submit | form의 값을 전송하는 버튼 |
| reset | form의 값을 초기화하는 버튼 |
| image | 이미지를 삽입할 수 있는 버튼 |
| button | 아무 기능이 없는 버튼 |
(7) select
- 선택 목록 상자 또는 콤보박스라고도 한다.
- 몇 개의 선택지를 리스트 형태로 노출하고 그중 하나(또는 그 이상)를 선택할 수 있게 하는 태그이다.
<select>
<option>서울</option>
<option>경기</option>
<option>강원</option>
...
</select>(8) textarea
- 여러 줄의 텍스트를 입력할 때 사용한다.
- 몇 개의 선택지를 리스트 형태로 노출하고 그중 하나(또는 그 이상)를 선택할 수 있게 하는 태그이다.
<textarea rows="5" cols="30">
...
</textarea>-
textarea에는 텍스트 상자의 크기를 조절하는
rows,cols속성이 있다. -
cols : 가로 크기를 조절하는 속성(한 줄에 들어가는 글자의 수, 수치의 의미는 평균적인 글자의 너비로 정확히 글자 수를 나타내지는 않습니다.)
-
rows : 세로 크기를 조절하는 속성(화면에 보여지는 줄 수)
(9) button
- 버튼을 만들 때 사용하며 submit, reset, button 3가지의 타입이 있다.
<button type="submit|reset|button">ㅇㅇㅇ</button>- input 타입의 submit, reset, button과 같은 기능이지만
빈 태그가 아니라서내용을 안에 직접 넣을 수 있으므로 좀 더 자유로운 스타일 표현이 가능하다.
(10) label
form 요소의 이름과form 요소를 명시적으로 연결시켜주기 위해 사용한다.
<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>form 요소의 id 속성값과 label의 for 속성값을 같게 적어주어야 한다.
- label을 사용하면 이를 클릭했을 경우, 해당 form 요소를 클릭한 것처럼 동작한다.
- 사용성, 접근성적인 측면으로 중요한 역할을 하므로 반드시 써주는 것이 좋다.
(11) fieldset, legend
- form 요소를 구조화 하기 위해 필요한 태그이다.
<fieldset>
<legend>기본 정보</legend>
... 폼 요소들 ...
</fieldset>
<fieldset>
<legend>부가 정보</legend>
... 폼 요소들 ...
</fieldset>
- fieldset : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
- legend : 폼 요소의 제목으로 fieldset 내부에 작성
(12) form
form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해준다.
<form action="" method="">
<fieldset>
<legend>기본 정보</legend>
... 폼 요소들 ...
</fieldset>
<fieldset>
<legend>부가 정보</legend>
... 폼 요소들 ...
</fieldset>
</form>
I can be your Genie🧞♀️ How ‘bout Aladdin? 🧞♂️