[필기정리]Day35 - HTML 실습문제 및 해답

Web/HTML

2020. 7. 29. 11:51

Q1. <h1>부터 <h6> 태그를 사용해 제목을 구현하시오.

A. 

<!DOCTYPE html>
<html>
	<head>
		<title>제목연습문제</title>
	</head>
	<body>
		<h1>CoderBear</h1>
        <h2>CoderBear</h2>
        <h3>CoderBear</h3>
        <h4>CoderBear</h4>
        <h5>CoderBear</h5>
        <h6>CoderBear</h6>
	</body>
</html>

Q1 - 결과출력화면

 

Q2. 단락 태그, 개행 태그, 수평 줄 태그를 사용해 제목을 구현하시오.

A. 

<!DOCTYPE html>
<html>
	<head>
		<title>제목연습문제</title>
	</head>
	<body>
		<h1>CoderBear's Log</h1>
        <h2>CoderBear의 티스토리에 오신 것을 환영합니다.</h2>
        <hr>
        <h3> 카테고리 소개</h3>
        <p> SW </p>
        <br>
        <p> Web </p>
        <br>
        <p> DB </p>
        <br>
        <p> Tip </p>
        <br>
	</body>
</html>

<p> : 단락 태그

<br> : 개행 태그

<hr> : 수평 줄 태그

Q2 - 결과출력화면

Q3. 앵커태그를 이용해 각각 네이버와 구글로 이동하게 하시오.

A.

<!DOCTYPE html>
<html>
	<head>
		<title>앵커태그연습문제</title>
	</head>
	<body>
    	<a href="https://www.naver.com">naver</a>
        <br>
        <a href="https://www.google.com">google</a>
        <br>
	</body>
</html>

<a> : 앵커 태그 + href 속성 

Q3 - 결과출력화면

Q4. 빈 태그로 어떻게 만드는가?

A. 빈 태그는 닫는 태그가 없이 열린 태그만 작성하면 된다.

   대표적인 예시로 <img> <br> <input type=""> 등이 있다.

   

Q5. 각각의 링크를 누르면 정의된 링크로 이동될 수 있게 만드시오.

    ex) Move to Alpha 는 Alpha가 정의된 곳으로 이동.

A. ???????????????????

<!DOCTYPE html>
<html>
	<head>
		<title>앵커태그연습문제</title>
	</head>
	<body>
    	<a href="https://www.naver.com">naver</a>
        <br>
        <a href="https://www.google.com">google</a>
        <br>
	</body>
</html>

 

Q6. 글자 형태 태그 중 <b>, <i>, <small>, <sub>, <sup>, <ins>, <del> 태그의 활용예시를 만드시오.

A.

<!DOCTYPE html>
<html>
	<head>
		<title>글자형태연습문제</title>
	</head>
	<body>
    	<b>Coderbear</b>
        <br>
        <i>Coderbear</i>
        <br>
        <small>Coderbear</small>
        <br>
        <sub>Coderbear</sub>
        <br>
        <sup>Coderbear</sup>
        <br>
        <ins>Coderbear</ins>
        <br>
        <del>Coderbear</del>
        <br>
	</body>
</html>

<b> : 굵은 글자

<i> : 기울어진 글자

<small> : 작은 글자

<sub> : 아래첨자 글자

<sup> : 윗첨자 글자

<ins> : 밑출 친 글자

<del> : 가운데 줄 그어진 글자

Q6 - 결과출력화면

 

Q7. 목록 태그 중 <ul>, <ol>, <li> 태그의 활용예시를 만드시오.

A.

<!DOCTYPE html>
<html>
	<head>
		<title>목록연습문제</title>
	</head>
	<body>
    	<h1> Fruit </h1>
        <ol>
        	<li> apple </li>
            <li> banana </li>
            <li> melon </li>
            <li> grape </li>
        </ol>
        
        <h1> vagetable </h1>
        <ul>
        	<li> radish </li>
            <li> onion </li>
            <li> garlic </li>
            <li> corn </li>
        </ul>
	</body>
</html>

<ul> : 순서 없는 목록

<ol> : 순서 있는 목록

<li> : 목록 요소

Q7 - 결과출력화면

Q8. 테이블을 만들어 표의 배경색을 추가해보시오.

A.

<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <table border="1">
        <caption>Caption</caption>
        <colgroup>
            <col span="2" style="background: #bbdefb">
            <col style="background: #e3f2fd">
        </colgroup>
        <thead style="background: #0d47a1">
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
        </tbody>
        <tfoot style="background: #ff9966">
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
       	 </tfoot>
    	</table>
	</body>
</html>

Q8 - 결과출력화면

Q9. 아래와 같이 표를 만들어보시오.

A.

<html>
<head>
    <title>HTML5 Basic</title>
</head>
<body>
    <table border="1">
        <tbody>
        <tr>
            <th colspan="3">Table Data</th>
            <th rowspan="3">Table Data</th>
        </tr>
        <tr>
            <td>Table Data</td>
            <td rowspan="2">Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    	</tbody>
    </table>
</body>
</html>

<colspan> : 행 합치기

<rowspan> : 열 합치기

 

Q10. 아래와 같이 만들어보시오.

       그림 파일명 : search.jpg

A.

<!DOCTYPE html>
<html>
	<head>
    	<title>이미지태그예시문제</title>
	</head>
	<body>
    	<img src="search.jpg" alt="그림이 존재하지 않습니다." width="300">
    	<img src="Nothing" alt="그림이 존재하지 않습니다." width="300">
	</body>
</html>

<src> : 이미지의 경로 지정 (상대경로 사용하는 것이 더 좋다.)

<alt> : 이미지가 없을 때 나오는 글자 지정

<width> : 이미지의 너비 지정

 

Q11. 아래와 같이 구현해보시오.

      파일명 : music.mp3

A.

<html>
	<head>
    	<title>HTML5 Basic</title>
	</head>
	
    <body>
   		<audio src="music.mp3" controls="controls"></audio>
	</body>
</html>

<src> : 음악 파일의 경로 지정

<controls> : 음악 재생 도구를 출력할지 지정

 

Q12. 아래와 같이 구현해보시오.

       파일명 : HTML.jpg

A. 

<html>
	<head>
    	<title>HTML5 Basic</title>
	</head>
	<body>
    	<video poster="http://placehold.it/640x360" width="640" height="360" controls="controls">
        <source src="Wildlife.mp4" type="video/mp4">
        <source src="Wildlife.webm" type="video/webm">
    	</video>
	</body>
</html>

<src> : 비디오 파일의 경로 지정

<poster> : 비디오 준비 중일 때의 이미지 파일 경로 지정

<width> : 비디오의 너비를 지정

<height> : 비디오의 높이를 지정

<controls> : 비디오 재생 도구를 출력할지 지정

 

Q13. 아래와 같이 구현해보시오.

     

     ① text

     ② password

     ③ file

     ④ submit  순으로 구현할 것

A. 

<html>
	<head>
    	<title>HTML5 Basic</title>
	</head>
	<body>
    	<form>
        	<input type="text" name="name"><br>
        	<input type="password" name="password"><br>
        	<input type="file" name="file"><br>
	        <input type="submit">
    	</form>
	</body>
</html>

text : 글자 입력 양식 생성

password : 비밀번호 입력 양식 생성

file : 파일 입력 양식 생성

submit : 제출 버튼 생성

 

Q14. radio 버튼과 checkbox 버튼을 만들어 보시오.

A.

<html>
	<head>
    	<title>HTML5 Basic</title>
	</head>
	<body>
    	<form>
        	<input type="checkbox" name="checkbox">체크박스
            <br>
        	<input type="radio" name="password">라디오
            <br>
    	</form>
	</body>
</html>

checkbox : 체크박스 생성

radio : 라디오 버튼 생성

 

Q15. input 태그를 이용하여 텍스트를 여러 줄 입력 받을 수 있게 구현하시오.

A.

<html>
	<head>
    	<title>HTML5 Basic</title>
	</head>
	<body>
    	<form>
        	<textarea>
            </textarea>
    	</form>
	</body>
</html>

<textarea> : 여러 줄의 긴 문장을 작성할 수 있는 태그

                 ex) 게시판 내용

 

Q16. 아래와 같이 구현하시오.

A.

<html>
	<head>
    	<title>HTML5 Basic</title>
	</head>
	<body>
    	<select>
        	<option>김밥</option>
        	<option>떡볶이</option>
        	<option>순대</option>
        	<option>오뎅</option>
    	</select>
	</body>
</html>

<select> : 하나만 선택 가능

<option> : 옵션 생성

 

Q17. 아래와 같이 구현하시오.

A.

<html>
	<head>
    	<title>HTML5 Basic</title>
	</head>
	<body>
    	<select multiple="multiple">
        	<option>김밥</option>
        	<option>떡볶이</option>
        	<option>순대</option>
        	<option>오뎅</option>
    	</select>
	</body>
</html>

multiple : 옵션을 여러 개 선택하고 싶을 때 사용하는 것

 

Q18. 아래와 같이 구현하시오.

A.

<html>
	<head>
    	<title>HTML5 Basic</title>
	</head>
	<body>
    	<select>
        	<optgroup label="HTML5">
            	<option>Multimedia Tag</option>
            	<option>Connectivity</option>
            	<option>Device Access</option>
        	</optgroup>
        	
            <optgroup label="CSS3">
            	<option>Animation</option>
            	<option>3D Transform</option>
        	</optgroup>
    	</select>
	</body>
</html>

<optgroup> : 선택 옵션들을 묶을 때 사용하는 태그

 

Q19. 아래와 같이 구현하시오.

A. 

<html>
	<head>
    	<title>HTML5 Basic</title>
	</head>
	<body>
	    <form>
    	    <fieldset>
            <legend>입력 양식</legend>
            <table>
                <tbody>
                	<tr>
                    	<td><label for="name">이름</label></td>
                    	<td><input id="name" type="text"></td>
                	</tr>
                    
                	<tr>
                    	<td><label for="mail">이메일</label></td>
                    	<td><input id="mail" type="email"></td>
                	</tr>
            	</tbody>
              </table>
            <input type="submit">
        </fieldset>
    	</form>
	</body>
</html>

<fieldset> : 입력 양식을 설명하는 태그

<legend> : <fieldset> 안에서만 사용 가능하다.

 

Q20. div와 span의 차이점을 설명하시오.

A. div와 span 모두 공간분할태그이나

   div는 block 형식으로 공간 분할하는 형식이고,(전체 공간 다 차지하는 방식)

   span은 inline 형식으로 공간 분할하는 형식이다.(정해진 그 공간 만큼만 차지하는 방식)

 

Q21. HTML로 회원가입 폼을 구현하시오.

 

A. 내가 생각한 답 

<!DOCTYPE html>
<html>
<head>
<title>회원가입</title>
</head>
<body>
	<form method = "post" action="JSPEx.jsp">
    	<table border="1">
        	<caption>회원가입</caption> // 표에 캡션 붙이는 태그
            	<tr>
                	<td>
                    <label for="name">이름</label>
                    </td>
                    <td>
                    <input type="text" name="name" id="name" required> // required - 미입력 시 전송불가하게 하는 속성
                    </td>
                </tr>
                
                <tr>
                	<td>
                    <label for="id">아이디</label>
                    </td>
                	<td>
                    <input type="text" name="id" id="id" required>
                    </td>
                </tr>
               	
                <tr>
                	<td>
                    <label for="pw">비밀번호</label>
                    </td>
                	<td>
                    <input type="password" name="pw" id="pw" required>
                    </td>
                </tr>
                
                <tr>
                	<td>
                    <label for="pw2">비밀번호 확인</label>
                    </td>
                	<td>
                    <input type="password" name="pw2" id="pw2" required>
                    </td>
                </tr>
                
                <tr>
                	<td>
                    <label for="email">이메일</label>
                    </td>
                	<td>
                    <input type="email" name="email" id="email" required>
                    </td>
                </tr>
                
                <tr>
                	<td>취미</td>
                    <td>
                    <input type="checkbox" name="hobby" value="reading" id="reading">
                    <label for="reading">독서</label>
                    <input type="checkbox" name="hobby" value="cooking" id="cooking">
                    <label for="cooking">요리</label>
                    <input type="checkbox" name="hobby" value="running" id="running">
                    <label for="running">달리기</label>
                    <input type="checkbox" name="hobby" value="gamming" id="gamming">
                    <label for="gamming">게임</label>
                    <input type="checkbox" name="hobby" value="painting" id="painting">
                    <label for="painting">그림그리기</label>
                    </td>
                </tr>
                
                <tr>
                	<td>거주지역</td>
                    <td>
                    <input type="radio" name="area" value="seoul" id="seoul" required>
                    <label for="seoul">서울시</label>
                    <input type="radio" name="area" value="kyunggi" id="kyunggi">
                    <label for="kyunggi">경기도</label>
                    <input type="radio" name="area" value="gangwon" id="gangwon">
                    <label for="gangwon">강원도</label>
                    <input type="radio" name="area" value="chungcheong" id="chungcheong">
                    <label for="chungcheong">충청도</label>
                    <input type="radio" name="area" value="gyeongsang" id="gyeongsang">
                    <label for="gyeongsang">경상도</label>
                    <input type="radio" name="area" value="jeolla" id="jeolla">
                    <label for="jeolla">전라도</label>
                    <input type="radio" name="area" value="jeju" id="jeju">
                    <label for="jeju">제주시</label>
                    </td>
                </tr>
                
                <tr>
                	<td>
                	<label for="mobileCompany">휴대폰번호</label>
                	</td>
                    <td>
                    	<select name="mobileCompany" id="mobileCompany">
                    		<option value="SKT">SKT</option>
                        	<option value="KT">KT</option>
	                        <option value="LGU">LGU</option>
    	                </select>
                        <input type="tel" name="phoneNumber" id="phoneNumber" required>
                    </td>
                </tr>
                
                <tr>
                	<td colspan="2">
                    	<input type="submit" value="전송">
                        <input type="reset" value="초기화">
                    </td>
                </tr>
            </table>
        </form>
	</body>
</html>

결과출력화면

 

728x90
저작자표시

'Web > HTML' 카테고리의 다른 글

[필기정리]Day34 - HTML 태그  (2) 2020.07.28
[필기정리] Day33 - HTML 기본 개념  (0) 2020.07.27

티스토리툴바