고정 헤더 영역
상세 컨텐츠
본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--<img src=""이미지 파일 경로" alt="대체용 텍스트"> -->
<img src="images/image_070202.webp" alt="레드향" width="240",height="240">
<br> <!-- 줄바꾸기 테그 -->
<hr> <!-- 한줄 긋는 태크-->
<a href="https://www.naver.com"> <img src="image_070201.webp" alt="레드향" width="240",height="240"></a>
<br> <!-- 줄바꾸기 테그 -->
<hr> <!-- 한줄 긋는 태크-->
<a href="https://ijto.or.kr/korean"><img src="https://ijto.or.kr/korean/gharhksfl/pgm_slider/img/main_visual07.jpg" alt="제주관광공사" width="50%"></a>
<br> <!-- 줄바꾸기 테그 -->
<hr> <!-- 한줄 긋는 태크-->
<h1> 웹 문서에 PDF 파일 삽입하기</h1>
<object width="900" height="800" data="SQL기초.pdf"></object>
<br> <!-- 줄바꾸기 테그 -->
<hr> <!-- 한줄 긋는 태크-->
<!-- 속성 값
controls : 플레이어 화면에 컨트롤 바를 표시
autoplay : 오디오나 비디오를 자동으로 실행
loop : 오디오나 비디오를 반복 재생
muted : 오디오나 비디오의 소리를 제거
preload : 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정
width,height : 비디오 플레이어의 너비아 높이를 지정 width나 height의 값 중에서 하나만 지정하면 나마지는 자동으로 계산해서 표시
-->
<h1> 웹 문서에 비디오 파일 삽입하기</h1>
<video src="salad.mp4" autoplay muted loop width="700"></video>
<br> <!-- 줄바꾸기 테그 -->
<hr> <!-- 한줄 긋는 태크-->
<h1> 웹 문서에 음악 파일 삽입하기</h1>
<audio src="spring.mp3" autoplay loop></audio>
<br> <!-- 줄바꾸기 테그 -->
<hr> <!-- 한줄 긋는 태크-->
<h1> 웹 문서에 하이퍼링크 삽입하기1</h1>
<br> <!-- 줄바꾸기 테그 -->
<hr> <!-- 한줄 긋는 태크-->
<h1> 웹 문서에 하이퍼링크 삽입하기2</h1>
<br> <!-- 줄바꾸기 테그 -->
<hr> <!-- 한줄 긋는 태크-->
<h1> 웹 문서에 하이퍼링크 삽입하기3</h1>
<a href="index.html" target="_blank" > <img src="images/image_070202.webp" alt="레드향" width="240",height="240"> </a>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset>
<legend>개인정보</legend>
<!-- emsp M문자 자릿수만큼 공백확보-->
<label for="user-id">아이디   (6자이상)</label>
<input type="text" id="user-id" required size="10">
<br>
<!-- nbsp 스페이스 한칸 자릿수만큼 공백확보-->
<label for="pwd">비밀번호 (특수문자포함 6자 이상)</label>
<input type="password" id="pwd" required size="10">
<input type="hidden" value ="사이트를 통한 직접 로그인">
<input type="image" src="images/login.png" alt="로그인" width="62" height="35" value ="로그인">
<input type="reset" value ="초기화">
</fieldset>
<fieldset>
<legend>배송정보</legend>
<ul>
<li><label for="user-name">이름</label>
<input type="text" id="user-name" value = "정태웅" readonly onfocus="this.blur()"> <!-- readonly 수정불가 --><!-- onfocus="this.blur() 커서가 가지 못함-->
</li>
<li><label for="addr">배송주소</label>
<input type="text" id="addr" autofocus>
</li>
<li><label for="mail">이메일</label>
<input type="email" id="mail">
</li>
<li><label for="phone">연락처</label>
<input type="tel" id="phone" size = "35" placeholder="하이픈은 빼고 입력해 주세요.(01012345678)">
</li><label for="date">배송지정(주문일로부토 최소 3일 이후)</label>
<br><input type="date" id="date">
</li>
</ul>
<legend>상품선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<label><input type="checkbox" value="s_3" checked>선물용 3kg</label>
<label><input type="checkbox" value="s_5">선물용 5kg</label>
<label><input type="checkbox" value="f_3" checked>가정용 3kg</label>
<label><input type="checkbox" value="f_5">가정용 5kg</label>
<p><b>포장 선택</b></p>
<label><input type="radio" name="gift" value="yes">선물포장</label>
<label><input type="radio" name="gift" value="no" checked>선물비포장</label>
<ul>
<li><label><input type="checkbox" value="s_3">선물용 3kg</label>
<input type="number" min="0" max="5">개 (최대 5개)
</li>
<li><label><input type="checkbox" value="s_5">선물용 5kg</label>
<input type="number" min="0" max="3" value="1">개 (최대 3개)
</li>
<li><label><input type="checkbox" value="s_3">선물용 3kg</label>
<input type="range" min="0" max="5">개 (최대 5개)
</li>
<li><label><input type="checkbox" value="s_5">선물용 5kg</label>
<input type="range" min="0" max="3" value="1">개 (최대 3개)
</li>
</ul>
<p></p>
<h1>날짜 지정하기</h1>
<input type ="date">
<input type ="month">
<input type ="week">
<p></p>
<h1>시간 지정하기</h1>
<input type ="time">
<input type ="datetime-local">
<br>
<form>
<input type="button" value="공지 창 열기" onclick="window.open('webEx2.html')">
</form>
<legend>반품정보</legend>
<p>만일 수령한 상품에 문제가 있다면 즉시 <b>반품 신청</b>해 주세요</b></p>
<p>반품 신청시 상품의 상태를 사진으로 첨부해 주세요</p>
<form>
<input type="file" value="파일선택" >
</form>
</fieldset>
</body>
</html>
'풀스텍과정' 카테고리의 다른 글
| 39일차학습일지_CSS (0) | 2024.07.04 |
|---|---|
| 38일차 학습일지_HTML (0) | 2024.07.03 |
| 36일차학습_HTML (0) | 2024.07.01 |
| 35일차학습 (0) | 2024.06.28 |
| 30일차학습_SQL (0) | 2024.06.21 |
