<문제1>
<답>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제</title>
</head>
<body>
<h1>수습 국원 모집</h1>
<h2>방송에 관심 있는 새내기 여러분 환영합니다.</h2>
<p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부나 전공에 상관없습니다.
<br>평소 방송에 관심있었던 여러 학우들의 지원바랍니다.</p>
<ul>
<li><strong>모집 기간</strong> : 3월 2일 ~ 3월 11일</li>
<li><strong>모집 분야</strong> : 아나운서, PD, 엔지니어</li>
<li><strong>지원 방법</strong> : 양식 작성 후 이메일 접수
<br><em>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</em></li>
</ul>
<h3>혜택</h3>
<ol type="a"> <!-- ol 타입 변경 -->
<li>수습기자 활동 중 소정의 활동비 지급</li>
<li>정기자로 진급하면 장학금 지급</li>
</ol>
<img src="img/camera.png">
</body>
</html>
<문제2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>회원 가입을 환영합니다</h1>
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li><label>아이디 </label><input type="text" ></li>
<li><label>이메일 </label><input type="email" ></li>
<li><label>비밀번호 </label><input type="password" ></li>
<li><label>비밀번호 확인 </label><input type="password" ></li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type="radio" name="email" value="yes"><label>메일 수신</label>
<input type="radio" name="email" value="no"><label>메일 수신 안 함</label>
</fieldset>
<button>가입하기</button>
<button>취소</button>
</body>
</html>
<보충>
- label은 다른 태그를 설명하는 태그일 뿐임. 안에 따로 다른 태그를 넣거나 하는 태그가 아님.
- radio 타입은 이름이 같은 상태에서 value 값을 다르게 지정해줘야 양자택일이 가능해짐
<추가 문제>
1. <textarea>..</textarea>
<textarea> : 텍스트를 여러 줄 입력하는 영역을 만든다.
<textarea> 속성
cols : 텍스트 영역의 가로 너비를 문자 단위로 지정한다.
rows : 텍스트 영역의 세로 길이를 줄 단위로 지정한다.
2. <select>..</select>, <option>..</option>
사용자가 내용을 직접 입력하는 것이 아니라 여러 옵션 중 하나를 선택하는 것이다.
<select>
<option> ..</option>
</select>
<select> 속성
size : 화면에 표시할 드롭다운 항목의 개수를 지정한다.
multiple : 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용한다.
<option> 속성
value : 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정한다.
selected : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여줄 항목을 지정한다.
* 연습 문제
* 연습문제 2
<최종 응용 문제>
다른 것들 응용해서 만들어보자.
-저 맨 윗창 누르면 구글로 가도록 링크를 걸어주었다.
-입력하면 input 박스안의 글자가 사라지도록 만들어 주었다.
- 그림은 로고를 캡쳐해서 따왔다.
<작성 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<fieldset style="text-align: center; width: 200px;">
<button type="button" onclick="location.href ='https://www.google.com/webhp?hl=ko&sa=X&ved=0ahUKEwj688uB2tL8AhX5R2wGHbruC6kQPAgI'"
style="border: 2px solid black; padding: 1px;">
<!-- // 버튼에 링크 거는 법 // 박스 테두리 만들기 //
// <a href="">글자</a> 사용하면 글자에 링크가능 -->
<img src="./google.png" style=" width: 30px; height: 20px;" alt="">
<b>Log in with Google</b>
</button>
<p><b>or</b></p>
<!-- 박스에 색 칠하기,경계선 없애기, 입력시 사라지는 글자 입력 -->
<input type="text" placeholder="Username" style="border:none; background-color: rgb(220, 212, 212); height: 30px;">
<p><input type="text" placeholder="Password" style="border:none; background-color: rgb(220, 212, 212); height: 30px;"></p>
<button style="color: aliceblue; background-color: black; width: 170px; height: 30px;">LOGIN</button>
<p style="font-size: small;"><b>Forgot your password?</b></p>
<!-- 글자 크기 조절 -->
</fieldset>
</body>
</html>
|
cs |
'📚HTML, CSS > 실습 및 프로젝트' 카테고리의 다른 글
| html / css 프로젝트 1-(1) (0) | 2023.01.30 |
|---|---|
| [html, css] 기초 or 기본 문제들 모음(3)(+유효성 검사) (0) | 2023.01.30 |
| [html, css] 기초 or 기본 문제들 모음(2) (1) | 2023.01.27 |
| [html, css] 기초 or 기본 문제들 모음 (0) | 2023.01.26 |
| CSS 기초문제들 (0) | 2023.01.24 |