1. 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>인풋</title>
</head>
<input type="text"/> -1
<input type="password"/> -2
<input type="radio"/> - 3
<input type="button"/> - 4
<input type="submit"/> - 5
<input type="checkbox"/> - 6
<input type="file"/> - 7
<input type="date"/> - 8
<input type="email"/> - 9
<input type="url"/> - 10
<input type="tel"/> - 11
</body>
</html>- 출력 결과 -
2. Textarea 텍스트 입력 박스 창
- 코드입력 -
<!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>textarea</title>
</head>
<body>
<textarea></textarea>
<textarea cols="30" rows="10"></textarea>
</body>
</html>- 출력 결과 -
3. ul 순서가 없는 목록 태그
- ul 안에 <li> 리스트 항목을 넣어준다
- 코드 입력 -
<body>
<!--순서가 없는 목록 태그-->
<ul>
<li>content1</li>
<li>content2</li>
</ul>
- 출력 결과 -
4. ol 순서가 있는 목록 태그
- 순서대로 리스트를 보여준다
- 코드 입력-
<ol>
<li>content1 </li>
<li>content2</li>
</ol>
- 출력 결과 -
< 순서를 알파벳 순 으로 표현 하고 싶을때>
- ol type= "A" start="3" > 알바벳 3번째 자리부터 시작
- 코드 입력 -
<ol type="A" start="3">
<li>content1 </li>
<li>content2</li>
</ol>
- 출력 결과 -
5 . Table - 표
<border = "테두리(숫자)" , width="가로길이(%, px)" , align="정렬() >
<tr> table row = 테이블의 축
<td> = 표의 데이터
ex) <td width ="길이" , height="높이" >
<roespan> = 세로병합
<colspan> =가로병합
<th> = 제목
6. Iframe
- iframe src="삽입할 페이지 주소 또는 문서 위치
/ src - 경로 가져오기 /
- 코드 입력-
<!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>iframe</title>
</head>
<body> <!--src 경로 가지고 오는것 -->
<iframe src="http://www.koreaitacademy.com/" frameborder="0" width="500" height="800"></iframe>
</body>
</html>
- 출력 결과 -
- 웹페이지 안에 보여줄 웹사이트가 보여지는것을 볼수 있다.
# 하나의 웹사이트 안에서 또 다른 웹페이지를 열고 싶다
ex> 유뷰브 - 공유하기 - 퍼가기 - 안에있는 iframe 복사 - 붙여넣기
- 코드 입력 -
<!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>iframe</title>
</head>
<body> <!--src 경로 가지고 오는것 -->
<iframe src="http://www.koreaitacademy.com/" frameborder="0" width="500" height="800"></iframe>
<!-- 다른 사이트 가져오기-->
<iframe width="560" height="315" src="https://www.youtube.com/embed/-JhoMGoAfFc"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
- 출력 결과 -
- 한개의 웹 사이트 안에 서로 다른 두개의 웹이 보여진다.
'Class > Frontend' 카테고리의 다른 글
| [프론트 엔드 DAY03- 2] (0) | 2022.04.25 |
|---|---|
| [프론트 엔드 DAY03-1 ] (0) | 2022.04.19 |
| [프론트 엔드 DAY03] (0) | 2022.04.17 |
| [프론트엔드 day01-1 ] (0) | 2022.04.16 |
| [프론트엔드 day01] (0) | 2022.04.10 |
댓글