1. 이미지태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 이미지를 불러오기 위해서는 <img> -->
<!-- 1. 현재 기준으로 파일을 불러드릴때 -->
<img src="image4.jfif">
<!-- 2. 현재 기준으로 폴더를 들어간 후, 파일을 불러드릴때 -->
<img src="img/image4.jfif", alt="뭐가 출력될까">
<!-- 3. 현재 기준으로 작성중인 html 파일이 폴더를 나가야하는 경우,
../ = 폴더를 한번 나가겠다-->
<img src="../img/image4.jfif">
<!-- 4. 현재 기준으로 작성중인 html 파일이 루트폴더로 나가야하는 경우 -->
<img src="/img/image4.jfif">
<!-- 5. CDN : 네트워크를 통해서 경로를 받아올 떄-->
<img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fimg.theqoo.net%2Fimg%2FozOAd.jpg&type=sc960_832">
</body>
</html>
2. A태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 하이퍼링크 기능을 만들기위한 태그 == a태크 -->
<!-- a태그의 핵심은 "href" = "이동할 url" -->
<a href="http://www.naver.com">네이버로 이동
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjEwMjFfNTgg%2FMDAxNDc3MDU4MDg0MjYy.mj1U9exDh6Zls1NFazBv7limXcxexAtiYZEGehRSZ8og.sHV9MJiWsNHfW2IEL-yNsak8eUU8MzE1SIWJ3R0cOjMg.PNG.gtnpt%2FIcon1024_2016._10._21._%25BF%25C0%25C8%25C4_10-54-02.png&type=sc960_832">
</a>
</body>
</html>
3. 테이블태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 표(테이블) 만들때면 <table>
<tr> : 표의 행을 만들때 사용(가로)
<th> : 행을 컬럼으로 쪼개서 제작 => 실제 데이터가 보임
<td> : 행을 데이터(칸)으로 쪼개서 제작 => 실제 데이터가 보임
-->
<table border="1px solid blue", align="center", width="300px">
<tr bgcolor="yellow">
<th>나이</th>
<th>이름</th>
</tr>
<tr>
<td>20</td>
<td>김영희</td>
</tr>
<tr>
<td>30</td>
<td>홍길동</td>
</tr>
</tr>
</table>
</body>
</html>
4. form태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- action="test"는 test파일에 폼형식의 데이터를 전송할 것이다 -->
<form action="test">
<!-- 1. 일반 글자를 입력하는 창 -->
<span>이름: </span>
<input type="text" value="" maxlength="5"> <!-- //모든 input은 value에 들어있다 -->
<br>
<!-- 2. 비밀번호를 입력하는 창 -->
<span>비밀번호: </span>
<input type="password">
<br><br>
<!-- 3. 체크박스 : 복수개 선택할 때-->
<!-- 모든 input 태그에는 "name"이 들어가야 한다: 컴퓨터가 구분할 수 있도록 -->
<!-- 컴퓨터가 데이터를 검색하는데 "value"에 축구로 체크박스 축구를 찾을 수 있다 -->
<!-- 결국 input 태그에는 "name"와 "value"이 들어가야 한다. -->
<span>축구</span><input type="checkbox" name="hobby" value="축구">
<span>농구</span><input type="checkbox" name="hobby" value="농구">
<br><br>
<!-- 4. 라디오버튼 : 무조건 한개만 선택할 때 -->
<span>남자</span><input type="radio" name="gender" value="남자">
<span>여자</span><input type="radio" name="gender" value="여자">
<br><br>
<!-- 5. form 태그의 데이터들을 서버에게 전달하는 버튼 -->
<input type="submit">
<br><br>
</form>
</body>
</html>
5. 그 외 input태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="color">
<br><br>
<input type="range">
<br><br>
<input type="date">
<br><br>
<input type="file">
<br><br>
</body>
</html>
728x90
반응형
'XHTML.CSS' 카테고리의 다른 글
| CSS_기본 구조 (0) | 2022.06.15 |
|---|---|
| HTML_회원가입 (0) | 2022.06.15 |
| HTML_태그_H, 문단, 강조, 리스트 (0) | 2022.06.15 |
| XHTML - 11. XHTML 목록 관련 요소 (0) | 2020.05.28 |
| XHTML - 10. XHTML 링크와 이미지 (하이퍼링크, 이미지, 이미지맵) (0) | 2020.05.28 |