img
<img src="" alt="">
src : 경로
alt : 이미지에 설명 추가
src에 적는 경로
1. 절대경로 : 파일이 가진 고유한 경로
ex)이미지 주소복사
2. 상대경로 : 특정 위치 기준
* ./ : 현재폴더
* ../ : 상위폴더
* / : 루트폴더
ex)
<img src="./IMG/univ.jpg" alt="">
<img src="../HTML/IMG/univ.jpg" alt="">
<img src="/IMG/univ.jpg" alt="">
*실습)
네이버 이미지클릭시 네이버로이동
<a href="https://www.naver.com/" target="_blank"> <img src="./IMG/NAVER.jpg" alt="네이버링크"> </a>
---------------------------------------
테이블 태그
*실습)
<h3> 테이블태그로 좋은국밥 메뉴판 만들기 </h3>
<!-- 테이블태그 : table 생성 -->
<!-- border : 테이블 테두리 -->
<table border="1">
<!-- caption : 표의 제목 -->
<caption> 좋은 국밥 </caption>
<!-- 7행 3열 테이블 -->
<!-- thead : Header Content를 모아놓은 태그 -->
<thead>
<!-- tr (table row) 행 -->
<tr>
<!-- th : 행의 제목 -->
<th>메뉴</th>
<th>가격</th>
<th>비고</th>
</tr>
</thead>
<!-- tbody : Body Content를 모아놓은 태그 -->
<tbody>
<tr>
<!-- td (table data) 열 -->
<td>좋은 국밥</td>
<td>8,000원</td>
<!-- rowspan : 행 병합 -->
<td rowspan="3">식사</td>
</tr>
<tr>
<td>머리국밥</td>
<td>7,000원</td>
</tr>
<tr>
<td>고기국밥</td>
<td>7,000원</td>
</tr>
<tr>
<td>소주</td>
<td>4,000원</td>
<td rowspan="2">주류</td>
</tr>
<tr>
<td>맥주</td>
<td>4,000원</td>
</tr>
<tr>
<td>막걸리</td>
<!-- colspan : 열 병합 -->
<td colspan="2">판매중지</td>
</tr>
</tbody>
</table>
입력양식 태그
form태그
<!-- form태그 : 사용자로부터 데이터를 입력받에서 전송할 때 사용 -->
<form action=""> <!-- action : 데이터를 전송할 위치, form태그 필수속성 -->
ID를 입력하세요 : <input type="text" name="id" placeholder="ID입력"> <br>
이름을 입력하세요 : <input type="text" name="name" value="최수환"> <br>
<!-- name : 입력받은값 구분하기위해 ***필수*** name 지정 안하면 값 구분 못함-->
<!-- placeholder : 미리보기 기능 -->
<!-- value : 기본값 지정 -->
비밀번호 입력 : <input type="password" name="pw">
<!-- password : 입력 값 안보이게 -->
<hr>
이메일선택
<select name="email">
<!-- uo,ol/li 처럼 select와 option은 한몸 -->
<option value="google"> 구글 </option>
<!-- value : 전송될때 value 값으로 전송됨 -->
<option value="naver"> 네이버 </option>
<option value="daum"> 다음 </option>
</select>
<hr>
체크박스(여러개 선택) : 좋아하는 음식 고르기 <br>
치킨 <input type="checkbox" name="food" value="chicken">
<!-- name 통일, value로 값 구분 -->
피자 <input type="checkbox" name="food" value="pizza">
햄버거 <input type="checkbox" name="food" value="burger">
<hr>
라디오버튼(1개만 선택) : 성별 고르기 <br>
여자 <input type="radio" name="gender" value="feemale">
남자 <input type="radio" name="gender" value="male">
<hr>
파일 선택 : <input type="file" name="file">
<hr>
색깔 선택 : <input type="color" name="color">
<hr>
날짜 선택 : <input type="date" name="birthday"> <br>
날짜 + 시간 : <input type="datetime-local" name="meeting">
<hr>
게시글 작성 : <br>
<textarea name="board" cols="30" rows="10" style="resize: none;"></textarea>
<hr>
초기화 버튼 <input type="reset" value="초기화 버튼">
<!-- reset : input 요소의 모든 값을 추기화 -->
<hr>
전송 버튼 <input type="submit" value="로그인">
<!-- submit : input 요소의 모든 값을 -->
</form>
'학습 기록 > HTML, CSS' 카테고리의 다른 글
CSS TIP 모음 (0) | 2023.11.21 |
---|---|
23.06.05 / CSS (0) | 2023.06.05 |
23.06.02 / HTML / 제목, 본문, 리스트, a태그 (0) | 2023.06.02 |