728x90
반응형
1. 오디오
속성의 이름과 값이 같다면 생략가능하다
autoplay는 이제 쓰지 않는다.
audio는 다 알아듣는다. 중간에 글씨쓰면 그걸 못알아듣는 브라우저가 있을때 보여준다.
2. 비디오
오디오와 다르게 width, height가 있고, poster화면이 존재한다.
3. iframe
다른페이지를 내거에서 가져온다.
iframe은 네모 박스이다. 그 안에 다른 html을 넣는다.
4. div
그룹핑하는 개념. 레이아웃처럼 요소들을 가둘 수 있다.
<!DOCTYPE html>
<html>
<head></head>
<title>EX</title>
</head>
<body>
<!-- 오디오 -->
<!-- 속성의 이름과 값이 같다. controls -->
<audio src="./audio/old_pop.mp3" controls="controls"></audio>
<!-- 브라우저마다 호환되는 음원의 파일형식이 다르다. -->
<!-- 속성명과 값이 같은 글씨라면 속성명만 기입하는 축약설정이 가능함 -->
<!-- 온라인 컨버터 사이트를 이용하여 다른 파일 형식을 만들기 -->
<audio controls>
<!-- 셋중에 하나 틀라는뜻 -->
<source src="./audio/old_pop.mp3" type="audio/mp3">
<source src="./audio/old_pop.ogg" type="audio/mp3">
<source src="./audio/old_pop.wav" type="audio/mp3">
<!-- 인라인속성, 옆으로 나열된다. -->
</audio>
<hr>
<!-- 비디오 -->
<video src="./video/movie.ogv" controls></video>
<!-- 브라우저 호환성을 고려하여 여러 파일형식을 등록 -->
<video controls width="640" height="480" poster="./image/coffee.gif" preload="auto">
<source src="./video/trailer.mp4" type="video.mp4">
<source src="./video/trailer.mp4" type="video.ogg">
<source src="./video/trailer.webm" type="video.webm">
</video>
<hr>
<!-- Inline Frame 요소 -->
<iframe src="../DAY01/Hyeyoung coFFee.html" frameborder="1"></iframe>
<!-- 다른 서버의 웹문서도 포함 가능함 -->
<iframe src="http://mrhi2023.dothome.co.kr" frameborder="3"></iframe>
<iframe src="http://www.mrhi.or.kr" frameborder="0"></iframe>
<!-- 하이퍼링크요소 앵커 <a>와 <iframe>을 함께 사용. -->
<!-- 앵커요소에 의해 열리는 웹문서의 target을 iframe으로 지정-->
<iframe src="" frameborder="1" name="aaa"></iframe>
<a href="http://www.w3c.org" target="aaa">월드 와이드 웹 공식 사이트</a>
<a href="http://www.google.com" target="aaa">구글</a>
<hr>
<!-- 영역 그룹 요소 : div(블럭), span(인라인) -->
<div style="background-color: darkolivegreen; border: 2px; padding-left: 10px;">
<h2>title</h2>
<p>this is message</p>
</div>
<!-- div을 알아보자 -->
<p>
안녕하세요. 나는 <div style="color: aqua;">홍길동</div>입니다
</p>
<!-- span을 알아보자 (div와 차이점은?) -->
<p>
안녕하세요. 나는 <span style="color: aqua;">홍길동</span>입니다
</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input element</title>
</head>
<body>
<!-- 텍스트입력기 - text는 한줄입력만 가능하다 -->
<!-- 너비를 넘어가면 자동 스크롤, size는 글자수 -->
<input type="text" size="10"><br>
<!-- password는 인라인요소, 자동 마스킹처리됨 -->
<input type="password"><br>
<hr>
<!-- radio, 하나의 그룹이 되어야만 싱글초이스가 된다. -->
<!-- 라디오 버튼의 name 속성값을 같은 값으로 지정하면 그룹이 된다. -->
라디오 버튼 : <input type="radio" name="rg"> 남자 <input type="radio" name="rg"> 여자 <br>
<!-- 라벨이라는 요소를 이용하면 글씨를 눌렀을때도 라디오버튼이 선택된다. id로 연결한다. -->
<input type="radio" name="rg2" id="rb1"> <label for="rb1">남자</label>
<input type="radio" name="rg2" id="rb2" checked="checked"> <label for="rb2">여자</label>
<hr>
<!-- 체크박스 - 멀티초이스 -->
<label><input type="checkbox">Apple</label>
<label><input type="checkbox">Banana</label>
<label><input type="checkbox">Orange</label>
<hr>
<!-- 제출, 초기화 버튼 : <form>요소 안에 있을때만 기능함-->
<input type="submit" value="전송">
<input type="reset">
<hr>
<!-- 버튼 만들기-->
<!-- 1. input요소의 type이 버튼 -->
<input type="button" value="중복체크" onclick="alert('clicked~ 저리가')">
<hr>
<!-- 2. button요소 -->
<button onclick="alert('중복된 id입니다.')">중복체크</button>
<!-- 2.1 이미지버튼 -->
<button><img src="./image/ms17.png" alt="ms20" width="50"></button>
<!-- 2.2 input type 이미지요소를쓴다. form요소의 제출용 이미지버튼. -->
<input type="image" src="./image/ms17.png" alt="ms20" onclick="alert('경고')" width="50">
<hr>
<!-- 여려줄 입력 -->
<textarea cols="40" rows="5">고양이</textarea>
<hr>
<!-- 콤보박스 -->
<select>
<option>aaa</option>
<option>bbb</option>
<option selected>ccc</option>
</select>
<!-- 콤보박스 옵션 그룹 -->
<select>
<optgroup label="중식">
<option>자장면</option>
<option>짬뽕</option>
<option>볶음밥</option>
</optgroup>
<optgroup label="한식">
<option>김치찌개</option>
<option>김밥</option>
<option>갈비</option>
</optgroup>
</select>
<hr>
<!-- 입력박스 영역을 시각적으로 보여주는 요소 , 레전드는 위 경계선에 이름표가 박힘-->
<fieldset>
<legend>인적사항</legend>
<label>이름 : <input type="text"></label>
<label>주소 : <input type="text"></label>
<label>별명 : <input type="text"></label>
</fieldset>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form element</title>
</head>
<body>
<!-- form요소 : anchor처럼 다른 문서 실행하지만 데이터를 전달할 수 있고, 이동을 위한 별도의 input요소가 필요함 -->
<!-- HTTP Request 프로토콜의 2가지 요청 방식 : get, post -->
<!-- 1. get방식 연습 -->
<form action="./getTest.php" method="get">
<!-- name속성 : 서버에 보낼 데이터를 구별하는 식별자 키값 지정 -->
<input type="text" name="title">
<input type="text" name="msg">
<input type="submit">
</form>
<!-- 2. post방식 연습 -->
<form action="./postTest.php" method="post">
<fieldset>
<legend>POST방식 HTTP 요청</legend>
<label for="in1">name : </label>
<input type="text" name="name" id="in1"> <br>
<label>password : <input type="password" name="pw"></label> <br>
<p>
<!-- name속성이 같아야 같은 그룹이다. -->
<!-- 서버로 보내지는 글씨는 value -->
gender :
<label><input type="radio" name="rg" value="male">male</label>
<label><input type="radio" name="rg" value="female" checked>female</label>
</p>
<p>
<!-- []배열이라고 서버에게 말해줘야한다. 가장 마지막걸 읽는다 -->
fruits:
<label><input type="checkbox" name="fruits[]" value="apple" checked>사과</label>
<label><input type="checkbox" name="fruits[]" value="banana">바나나</label>
<label><input type="checkbox" name="fruits[]" value="orange">오렌지</label>
</p>
<p>
message :
<textarea name="msg" cols="40" rows="5"></textarea>
</p>
<p>
<select name="brand">
<optgroup label="자동차브랜드">
<option value="현대">현대</option>
<option selected value="기아">기아</option>
<option value="쌍용">쌍용</option>
</optgroup>
</select>
</p>
<!-- 화면에 보이지는 않지만 서버에 데이터를 보내고 싶을때 -->
<input type="hidden" name="id" value="aaaa">
<div>
<input type="submit">
<input type="reset">
</div>
</fieldset>
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form element 2</title>
</head>
<body>
<!-- 파일 전송, 미디어 데이터는 post방식이다. -->
<!-- 서버작업에는 꼭 2개가 필수이다. type="file" name="aaa" -->
<form action="./file.php" method="post" enctype="multipart/form-data">
<input type="file" name="aaa" accept="image/png">
<input type="submit" value="전송">
</form>
<hr>
<!-- 여러개의 파일 전송 -->
<form action="./file2.php" method="post" enctype="multipart/form-data">
<input type="file" name="bbb[]" multiple>
<input type="image" src="./image/ms17.png" width="50">
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input element 2</title>
</head>
<body>
<!-- 새로이 추가된 type들 -->
<input type="date"> <br>
<input type="datetime-local"> <br>
<input type="month"> <br>
<input type="week"> <br>
<input type="time"> <br>
<input type="color"> <br>
<!-- 모바일에서 소프트 키보드의 모양을 결정함 -->
<input type="email"> <br>
<input type="tel"> <br>
<input type="url"> <br>
<input type="search"> <br>
<input type="range" min="1" max="10" value="2" step="2"> <br>
<input type="number" min="220" max="280" step="5" value="220">
<hr>
<!-- 새로이 추가된 속성들 -->
<form>
<!-- 힌트 -->
<input type="text" placeholder="힌트입니다."><br>
<!-- 반드시 입력해야하는 요소 [필수입력란]-->
<input type="text" required><br>
<!-- 읽기전용 -->
<input type="text" readonly value="안혜영님"><br>
<!-- 자동 포커싱 -->
<input type="text" autofocus> <br>
<!-- 글자수제한 -->
<textarea cols="30" rows="10"></textarea> <br>
<textarea cols="40" rows="5">고양이</textarea>
<!-- 자동완성기능, <datalist>요소와 함께 써야함 -->
<input type="text" autocomplete list="datas"><br>
<datalist id="datas">
<option value="canada"></option>
<option value="china"></option>
<option value="korea"></option>
</datalist>
<input type="submit">
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>lesson 1 </title>
</head>
<body>
<h3>HTML5 요소 데모 화면</h3>
이름 : <input type="text"> <br>
이메일 : <input type="email"> <br>
웹사이트 : <input type="text"> <br>
정수 : <input type="number"> <br>
범위 : <input type="range"> <br>
메세지 : <textarea cols="40" rows="5">고양이</textarea>
<input type="submit">
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>lesson 2</title>
</head>
<body>
<fieldset>
<legend>카드 정보 입력</legend>
1. <fieldset>
<legend>카드 타입</legend>
1. <input type="radio" name="rg"> VISA <br>
2. <input type="radio" name="rg"> AmEx <br>
3. <input type="radio" name="rg"> MasterCard <br>
</fieldset>
2. 카드번호 <input type="number"><br>
3. CRC소유자 <input type="number"><br>
4. 카드 소유자 이름 <input type="text" placeholder="카드 상의 이름"><br>
</fieldset>
<fieldset>
<input type="submit" value="구매">
</fieldset>
</body>
</html><?php
header('Content-Type:text/html; charset=utf-8');
//사용자로부터 전달받은 파일의 실제데이터는 임시저장소에 배치되고
//이 php에는 파일정보만 전달되어 옴. [5개의 정보]
//파일정보 배열 받기
$file=$_FILES['aaa'];
//이 밑에 5개의 [식별자]는 이미 정해져는 키워드이다.
$srcName=$file['name']; //원본파일명
$type=$file['type'];
$size=$file['size'];
$tmpName=$file['tmp_name']; //임시저장소 위치
$error=$file['error']; //에러정보
//5개의 정보를 잘 받았는지 응답
echo $srcName."<br>";
echo $type."<br>";
echo $size."<br>";
echo $tmpName."<br>";
echo $error."<br>";
//임시저장소에 있는 파일을 영구히 저장하기 위해 이동시켜야함
$dstName = "image/".date('YmdHis').$srcName;
move_uploaded_file($tmpName,$dstName);
?><?php
$file=$_FILES['bbb'];
//전송된 파일의 개수
//'tmp_name' 스네이크 표기법임
//$fileNum = count($file);은 5개로 나온다. 파일의 요소 개수를 불러옴
$fileNum = count($file['name']);
for($i=0; $i<$fileNum; $i++){
$srcName=$file['name'][$i];
$size=$file['size'][$i];
$tmpName=$file['tmp_name'][$i];
}
//잘 받았는지 echo
echo "$srcName <br> ";
echo "$size <br> ";
echo "$tmpName <br>";
echo "================================== <br> ";
//임시저장소 파일들 이동
$dstName="./image/".date('YmdHis').$srcName;
$result= move_uploaded_file($tmpName,$dstName);
if($result) echo "upload success";
else echo "upload fail";
echo "================================== <br> ";
?><?php
// 내가 보내는 형식은 html형식일거야
header("content-Type:text/html; charset=utf-8");
//사용자로부터 (form요소)로부터 GET방식으로 전달된 데이터 받기
//$_ : 슈퍼전역변수 여기안에 모든 데이터를 받는다
$title=$_GET['title'];
$message=$_GET['msg'];
//잘 받았는지 확인하고자 사용자에게 응답(Response)
echo "제목 : $title <br>";
echo "메세지 : $message";
// 이대로 실행하면 php를 해독못함 -> 해독하려면 php를 설치해야하는데.. 웹호스팅으로 가야함
?><?php
header("content-Type:text/html; charset=utf-8");
//POST 방식으로 전달된 값들 받기
//php에서는 사용자가 보낸데이터를 쉽게 받을수있다.
//POST은 배열변수이다. 한두개가 아니다. 연관배열로 받는다. 키값은 글자로
$name=$_POST['name'];
$password=$_POST['pw'];
$gender=$_POST['rg'];
$message=$_POST['msg'];
$brand=$_POST['brand'];
$id=$_POST['id'];
//실무에서는 이 데이터들을 DB에 저장하는 작업
//메세지의 경우 여러줄일 수 있음. 이때, 줄바꿈문자 \n을 브라우저에서는 <br>태그로 변경하여 보여줘야함.
//php는 c언어로 만들었다.
//nl to br ->이건 너무 많이쓰는 !
$message= nl2br($message);
//잘 받았는지 확인하는 목적으로 데이터들 출력(응답 : Response)
echo "<h2>$name</h2>";
echo "<p>$password</p>";
echo "<p>$gender</p>";
echo "<p>$message</p>";
echo "<p>$brand</p>";
echo "<p>$id</p>";
//멀티 초이스에 의해 선택된 값들은 배열로 전달받기에 반복문으로 값 echo
//후르츠[]을쓰지 않는다.
$fruits=$_POST['fruits'];
$num= count($fruits);
for($i=0; $i<$num; $i++){
echo "$fruits[$i],";
}
?>728x90
반응형
'HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS 회원가입 창 만들기 (0) | 2023.05.03 |
|---|---|
| CSS 레이아웃2 (0) | 2023.05.03 |
| CSS 레이아웃 (0) | 2023.05.03 |
| CSS3 (0) | 2023.05.02 |
| HTML WebUI 구현 (0) | 2023.05.02 |
