728x90
1.9개의 버튼을 가진 다음 웹 페이지를 작성하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>버튼을 만들자</title>
</head>
<body>
<h3>버튼을 만들자</h3>
<hr>
<table>
<tr>
<td><input type="button" name="버튼" value="1"></td>
<td><input type="button" name="버튼" value="2"></td>
<td><input type="button" name="버튼" value="3"></td>
</tr>
<tr>
<td><input type="button" name="버튼" value="4"></td>
<td><input type="button" name="버튼" value="5"></td>
<td><input type="button" name="버튼" value="6"></td>
</tr>
<tr>
<td><input type="button" name="버튼" value="7"></td>
<td><input type="button" name="버튼" value="8"></td>
<td><input type="button" name="버튼" value="9"></td>
</tr>
</table>
</body>
</html>
2.<figure>태그와 <figcaption>태그를 이용하여 다음과 같은 문서를 작성하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>웹 브라우저</title>
</head>
<body>
<h3>웹 브라우저 소개</h3>
<hr>
<table>
<tr>
<td>
브라우저라고 불리기도 하는 웹 브라우저(Web Browser)는, 사용자에게 웹 서버 컴퓨터에 접속하고 웹 페이지, 이미지, 동영상, 음악 등 다양한 데이터 다운받아 보여주는 소프트웨어이다. <b>그림 1-2</b>는 대표적인 Chrome 웹 브라우저를 보여준다.
</td>
<td>
<figure>
<img src="media/spongebob.png" alt="그림" width="100px" height="100px">
<figcaption>그림 1-2 구글 Chrome</figcaption>
</figure>
</td>
</tr>
<tr>
<td>웹 페이지는 브라우저에 HTML5 문서임을 알리기 위해 <b>그림 1-3</b>과 같은 코드를 첫 라인에 삽입하여야 한다.</td>
<td>
<figure>
<img src="media/spongebob.png" alt="그림" width="100px" height="100px">
<figcaption>그림 1-3 HTML5 문서 구성</figcaption>
</figure>
</td>
</tr>
</table>
</body>
</html>
3.<fieldset>,<legend>,<label>,<input>태그를 이용하여 다음 폼을 작성하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>로그인 폼 만들기</title>
</head>
<body>
<h3>로그인 폼</h3>
<hr>
<fieldset>
<legend>Login</legend>
<label>Username <input type="text" name="Username"></label>
<label>Password <input type="password" name="password"></label>
</fieldset>
</body>
</html>
4.<details>태그와 <summary>태그를 이용하여 다음과 같은 웹 페이지를 작성하라. 똑같이 하든지 이와 유사한 페이지를 작성해도 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>웹 프로그래밍 개요</title>
</head>
<body>
<h3>웹 프로그래밍 개요</h3>
<hr>
<details>
<summary>웹의 기본 목적</summary>
<p>웹의 기본 목적은 한 컴퓨터에서 만든 문서(document)를 다른 컴퓨터에서 쉽게 볼 수 있도록 하는 것이다.</p>
</details>
<details>
<summary>왜 Web인가?</summary>
<p>전 세계의 컴퓨터들을 인터넷으로 거미줄처럼 연결하고 웹 문서를 쉽게 주고받을 수 있도록 시스템을 만들고 WWW(World Wide Web), 간단히 줄여 웹(Web)이라고 부른다.</p>
</details>
<details>
<summary>웹 페이지를 구성하는 3요소</summary>
<ul>
<li>HTML - 문서의 구조와 내용</li>
<li>CSS(Cascading Style Sheet)-문서의 모양</li>
<li>JavaScript - 행동 및 응용 프로그램</li>
</ul>
</details>
</body>
</html>
5.도형 서식을 지정하는 다음 모양의 폼을 작성하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>도형 서식 폼 만들기</title>
</head>
<body>
<h3>도형 서식 폼 만들기</h3>
<hr>
<fieldset>
<legend>도형 서식 입력</legend>
선종류 <select size=3>
<option>선없음</option>
<option>실선</option>
<option>점선</option>
</select><br>
선두께 <input type="number" min="1" max="10" step="1">
선색 <input type="color" value="#00BFFF" onchange="document.body.style.color=this.value"><br>
투명도(0~100): <input type="range" min="0" max="100">
</fieldset>
</body>
</html>728x90
'HTML+CSS+JavaScript' 카테고리의 다른 글
| [HTML5+CSS3+Javascript 웹프로그래밍]7장 실습문제 (0) | 2021.10.15 |
|---|---|
| [HTML5+CSS3+Javascript 웹프로그래밍]7장 연습문제 (0) | 2021.10.15 |
| [HTML5+CSS3+Javascript 웹프로그래밍]4장 실습문제 (0) | 2021.10.12 |
| [HTML5+CSS3+Javascript 웹프로그래밍]6장 OpenChallenge (0) | 2021.10.11 |
| [HTML5+CSS3+Javascript 웹프로그래밍]6장 실습문제 (0) | 2021.10.10 |