<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0620 시험대비</title>
</head>
<body>
<div>
<h3>링크사용법</h3>
<p>< a href="이동하려는 사이트의 url" target="_blank" title="">화면 창에 띄울 문구< /a> </p>
<p> title ="마우스를 위에 대면 뜨는 설명글 </p>
<p><a href="https://www.daum.net" target="_blank" title="다음 포털 사이트를 새 창에서 열기">새 창에서 다음 포털사이트 열기</a></p>
<p><a href="https://www.naver.com" target="_blank" title="네이버 포털사이트를 새 창에서 열기">새 창에서 네이버 포털사이트 열기</a>
<p><a href="https://www.google.com" target="_blank" title="구글 사이트를 새창에서 열기">새 창에서 구글사이트 열기</a></p>
</div>
<div>
<h3>이미지태그 사용법</h3>
<p>img src="" alt="" 이미지 태그는 empty tag이므로 종료태그가 없다</p>
<p>src 속성은 이미지가 저장된 주소의 URL 주소를 명시</p>
<p>alt 속성으로 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정</p>
<p><img src="images/다운로드.png" alt="구글 로고"></p>
<p><img src="images/DAUM.png" alt="다음 로고"></p>
<p><img src="images/NAVER.gif" alt="네이버 로고"></p>
</div>
<div>
<h3> list-ul</h3>
<ul>
<li>apple</li>
<li>banana</li>
<li>coconut</li>
</ul>
<h3>list-ol</h3>
<ol>
<li>양치한다</li>
<li>세수한다</li>
<li>샤워한다</li>
</ol>
<h3>list-descprition list</h3>
<dl>
<dt>마녀2</dt>
<dd>2022년 6월에 개봉한 영화</dd>
</dl>
</div>
<div>
<h3>LOGIN FORM</h3>
<p><img src="images/login.png" alt="로그인 화면입니다."></p>
<form action ="" method="post">
<fieldset>
<legend>Welcome! Our Company!</legend>
<div>
<label for="email"></label>
<input type ="text" name="email" id="" value="" placeholder="Enter email">
</div><!-- email -->
<div>
<label for="">Password</label>
<input type="text" name="" id="" value="" placeholder="Enter password">
</div><!-- password -->
<div>
<label for="">Remember</label>
<input type="checkbox" name="remember" id="remember">
</div><!-- remember -->
<div>
<input type="submit" value="로그인" title="로그인버튼을 눌러주세요">
</div><!-- submit -->
</fieldset>
</form>
</div>
<div>
<h3>Search form</h3>
<form action="https://www.google.com/search" method="get">
<fieldset>
<legend>GOOGLE 검색폼</legend>
<label for="search">검색어 입력 : </label>
<input type="text" name="q" id="search">
<input type="submit" value="검색" title="구글 검색어입니다.">
</fieldset>
</form>
</div><!-- search form_구글 -->
<div>
<h3>SEARCH FORM2</h3>
<form action="https://www.naver.com" method="get">
<fieldset>
<legend>네이버 검색</legend>
<label for="search">검색어 입력 : </label>
<input type="text" name="query" id="search" placeholder="검색어를 입력하세요">
<input type="submit" value="검색" title="네이버 검색어입니다.">
</fieldset>
</form>
</div>
<div>
<h3>SEARCH FORM3</h3>
<form action="https://search.daum.net/search" method="get">
<fieldset>
<legend>다음 검색폼</legend>
<label for="search">검색어 입력 : </label>
<input type="text" name="q" id="search" placeholder="검색어를 입력하세요">
<input type="submit" value="검색" title="다음검색어입니다.">
</fieldset>
</form>
</div><!-- daum -->
<div>
<h3>textarea 만들기</h3>
<label for="content">내용</label>
<textarea rows="4" cols="20" name="" id="content"></textarea>
</div>
<div>
<h3>CHECKBOX</h3>
<form action="" method="">
<fieldset>
<legend>다중 선택</legend>
<div>
<label for="name">회원명</label>
<input type="text" name="name" id="name">
</div>
<div>
<strong>반려동물들</strong>
<input type="checkbox" name="animal" id="dog" value="dog">
<label for="dog">dog</label>
<input type="checkbox" name="animal" id="cat" value="cat">
<label for="cat">cat</label>
<input type="checkbox" name="animal" id="pig" value="pig">
<label for="pig">pig</label>
</div>
<div>
<label for="name">회원명</label>
<input type="text" name="name" id="name" value="홍길동" readonly>
</div>
<div>
<strong>수신여부</strong>
<input type="radio" name="agree" id="yes" value="yes" >
<label for="">동의합니다.</label>
<input type="radio" name="agree" id="no" value="no" checked>
<label for="">동의하지 않습니다.</label>
</div>
<div>
<input type="submit" value="제출" title="회원정보를 전송합니다.">
</div>
</fieldset>
</form>
</div>
<div>
<h3>MULTIBOARD 상세보기</h3>
<div>
<a href="https://www.naver.com">네이버</a>
<a href="https://www.daum.net">다음</a>
<a href="https://www.google.com">구글</a>
</div>
</div><!-- MULTIBOARD 상세보기 -->
<div>
<h3>비밀번호 입력폼</h3>
<form action="#" method="post">
<div>
<label for="password">비밀번호</label>
<input type="password" name="password" id="password">
<span>(*)삭제시 필수입니다.</span>
<div>
<input type="submit" value="확인" title="비밀번호를 전송합니다.">
<input type="reset" value="취소" title="초기화합니다.">
</div>
</div>
</form>
</div><!-- 비밀빈호 입력폼 -->
<div>
<h3>CHECKBOX 다중선택</h3>
<form action="" method="">
<fieldset>
<legend>다중선택</legend>
<div>
<label for="name">회원명</label>
<input type="text" name="name" id="name" value="회원명을 입력하세요">
<span>(*)회원명을 정확히 입력하세요</span>
</div>
<div>
<strong>관심있는 모바일종류</strong>
<input type="checkbox" name="mobile" id="note8" value="note8">
<label for="note8">note8</label>
<input type="checkbox" name="mobile" id="note9" value="note9">
<label for="note9">note9</label>
<input type="checkbox" name="mobile" id="iphone8" value="iphone8">
<label for="iphone8">iphone8</label>
</div>
</fieldset>
</form>
</div>
<h3>RADIO 단일선택</h3>
<form action="" method="">
<fieldset>
<legend>성별체크</legend>
<div>
<label>이름</label>
<input type="text" name="name" id="name"><br>
<strong>성별을 체크해주세요</strong>
<input type="radio" name="sex" id="man" value="man">
<label for="man">남</label>
<input type="radio" name="sex" id="woman" value="woman">
<label for="woman">여</label>
</div>
<div>
<input type="submit" value="제출" title="이름과 성별을 전송합니다">
</div>
</fieldset>
</form>
<div>
</div><!-- 성별 -->
<div>
<h3>SELECT - 단일선택</h3>
<form action="#" method="post">
<fieldset>
<legend>단일선택</legend>
<label for="name">회원명</label>
<input type="text" name="name" id="name" placehold="회원명을 입력하세요"><br>
<label for="fruit">좋아하는 과일 선택</label>
<select name="fruit" id="fruit">
<option value="default">--선택--</option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="coconut">coconut</option>
</select>
<div>
<input type="submit" name="확인" value="확인">
</div>
</fieldset>
</form>
</div>
<div>
<h3>HTML5 FORM</h3>
<p>회원가입을 위한 <b>필수입력(*)</b>항목을 입력해주세요</p>
<form action="#" method="post">
<fieldset>
<legend>필수정보1</legend>
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" placehold="Enter name">
<br>
<label for="password">Password</label>
<input type="text" name="password" id="password" placehold="Enter password">
</div><!-- 필수정보1 -->
</fieldset>
<fieldset>
<legend>추가정보2</legend>
<div>
<div>
<label for="skin"><strong>피부타입</strong></label>
<input type="checkbox" name="skin" id="여드름" value="여드름">
<label for="여드름">여드름</label>
<input type="checkbox" name="skin" id="민감성" value="민감성">
<label for="민감성">민감성</label>
</div>
<div>
<label for="trouble"><strong>피부고민</strong></label>
<select name="trouble" id="trouble">
<option value="default">::::선택사항::::</option>
<option value="여드름">여드름</option>
<option value="민감성">민감성</option>
</select>
<label for="level">피부고민단계 1~5</label>
<select name="level" id="level">
<option value="default">::::선택사항::::</option>
<option value="1단계">1단계</option>
<option value="2단계">2단계</option>
</select>
</div>
<div>
<label for="agree">메일수신에 동의하십니까?</label>
<input type="radio" name="agree" id="yes" value="yes" checked>
<label for="yes">동의합니다.</label>
<input type="radio" name="agree" id="no" value="no">
<label for="no">동의하지 않습니다.</label>
</div>
<div>
<input type="submit" name="확인" value="확인">
<input type="reset" name="취소" value="취소">
</div>
</div><!-- 추가정보2 -->
</fieldset>
</form>
</div><!-- exfinal -->
</body>
</html>출력 화면
백엔드 개발자입니다:)