CONTENTS
HTML Practice
1. 랠리 테스트
2. HTML 예시 대로 짜보기
3. 블록 나누기
4. 홈페이지 레이아웃 태그 연습
참고사이트) GoFullPage, ezPDF Editor, Theme Wagon
--------------------------------------------------------------------------------
HTML Practice
1. 랠리 테스트
| 문항 | 답변 | |
| 1 | 다음의 태그중 인라인과 블록을 선별할 수있다. p ul ol dl li h1 ~ h6 address hr label b,strong mark i br span small sub sup s |
인라인 : label b strong mark i br span small sub sup s 블록 : p ul ol dl li h1~h6 address hr |
| 2 | 인라인의 특징을 설명할 수 있다. | 요소를 가로로 쌓음 width, height 크기조절 사용x |
| 3 | 블록의 특징을 설명할 수 있다. | 요소를 세로로 쌓음 크기 조절 사용o |
| 4 | a 태그의 속성값은 무엇이 있는가? | href <a href="url"><a> |
| 5 | img의 속성값은 무엇이 있는가? | src <img src="img.jpg"> |
| 6 | 절대경로란 무엇인가? | 특정파일이나 폴더의 위치를 나타내는 전체경로 |
| 7 | 상대경로란 무엇인가? | 현재 작업 위치 폴더 기준으로 특정 파일 이나 폴더를 나타내는 경로 |
| 8 | 폼태그의 속성은 무엇인있는가? (3가지 이상) |
action, method(get, post), name
<form action="/progress"> <form method="post"><form name="formdata"> |
| 9 | 폼의 하위태그를 제어하기 위한 속성중 널값을 허용하지 않는 것은? | requird <input type="text" required> |
| 10 | 폼의 하위태그를 제어하기 위한 속성중 최대글자수를 제한하는 것은? | maxlength <input type="text" maxlength="10"> |
| 11 | 폼의 하위태그를 제어하기 위한 속성중 최소글자수를 제한하는 것은? | minlength <input type="txet" minlength="10"> |
| 12 | 폼의 하위태그를 제어하기 위한 속성중 특정내용을 미리 표시하는것은? | placehoder<input type="text" placehoder> |
| 13 | 폼의 하위태그를 제어하기 위한 속성중 읽기전용으로 변환하는 것은? | readonly<input type="text" readonly> |
| 14 | 폼의 하위태그를 제어하기 위한 속성중 숫자의 최소값을 제어하는 것은? | min <input type="number" min="1"> |
| 15 | 폼의 하위태그를 제어하기 위한 속성중 숫자의 최대값을 제어하는 것은? | max <input type="text" max="10"> |
| 16 | 폼의 하위태그를 제어하기 위한 속성중 input의 길이를 제어하는 것은? | size <<input type="text" size="10"> |
| 17 | 폼의 하위태그 중 라디오버튼이나 체크박스를 미리 체크되게 하는 속성은? | checked <input type="text" checked> |
| 18 | 다음의 폼하위태그의 입력받는 데이터의 특징을 서술할수있다. input:text input:password input:email input:radio input:checkbox input:submit input:reset input:button input:file input:number |
input:text : 텍스트 입력 input:password : 텍스트 입력, 보이지 않게 처리 input:email : email 양식에 맞게 입력, @없을시 submit되지 않음 input:radio : 여러개중 하나를 선택하게 지정 가능 input:checkbox : 여러개중 다양하게 선택할 수 있게 지정 가능 input:submit : 지정된 action으로 입력데이터를 전달 input:reset : 입력 내용 초기화 input:button : 함수를 작성하여 이벤트를 연결 input:file : 파일 첨부 input:number : 숫자값 입력 |
2. HTML 예시 대로 짜보기
1)test_table.html
<body>
<section>
<article>
<header>
<h1>강의 시간표</h1>
</header>
<table border="1">
<tr>
<td style="text-align: center;">구분</td>
<td style="text-align: center;">월</td>
<td style="text-align: center;">화</td>
<td style="text-align: center;">수</td>
<td style="text-align: center;">목</td>
<td style="text-align: center;">금</td>
</tr>
<tr>
<td style="text-align: center;">1교시</td>
<td rowspan="2">웹 기획</td>
<td rowspan="2">웹 디자인</td>
<td rowspan="2">HTML</td>
<td rowspan="2">웹 디자인</td>
<td>영어</td>
</tr>
<tr>
<td style="text-align: center;">2교시</td>
<td rowspan="4">야외수업</td>
</tr>
<tr>
<td style="text-align: center;">3교시</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="text-align: center;">4교시</td>
<td rowspan="2">UI 디자인</td>
<td rowspan="2">자바스크립트</td>
<td rowspan="2">모바일 디자인</td>
<td rowspan="2">HTML</td>
</tr>
<tr>
<td style="text-align: center;">5교시</td>
</tr>
</table>
</article>
</section>
</body>
* table내용 가운데 정렬 style="text=align: center;" 사용
2)test_join.html
<head></head>
<title></title>
<body>
<!-- table 사용 줄 맞춤 -->
<h1>회원 가입 양식</h1>
<form>
<table>
<tr>
<td>- 아이디</td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td>- 비밀번호</td>
<td><input type="password" name="psw"></td>
</tr>
<tr>
<td>- 비밀번호 확인</td>
<td><input type="password" name="psw_re"></td>
</tr>
<tr>
<td>- 이름</td>
<td><input type="text" name="user_name" maxlength="3"></td>
</tr>
<tr>
<td>- 성별</td>
<td><input type="radio" name="sex" id="sex1" value="female">여성
<input type="radio" name="sex" id="sex2" value="male">남성</td>
</tr>
<tr>
<td>- 전화번호</td>
<td>
<select name="number">
<option value="1" selected>02</option>
<option value="2">051</option>
<option value="3">055</option></select>
- <input type="tel" name="tel1">
- <input type="tel" name="tel2"></td>
</tr>
<tr>
<td>- 이메일</td>
<td>
<input type="text" name="email">@
<select name="mail" id="mail">
<option value="1">선택</option>
<option value="2">gmail.com</option>
<option value="3">naver.com</option>
</select></td>
</tr>
<tr>
<td>- 자기소개</td>
<td><textarea name="introduce" rows="5" cols="50"></textarea></td>
</tr>
</table>
</form>
</body>
3. 블록 나누기
-홈페이지 제작시 참고
<웹페이지 전체화면 캡쳐>
GoFullPage 다운로드
GoFullPage - Full Page Screen Capture - Chrome 웹 스토어
추가 권한을 요청하지 않고 현재 페이지의 스크린샷을 전체적으로 캡처하고 신뢰할 수 있습니다!
chromewebstore.google.com
*구글 크롬 확장 프로그램 설치-> 카메라 아이콘 안 보일시 핀 고정 후 사용
<PDF 편집프로그램>
ezPDF Editor 3.0 다운로드
http://www.ezpdf.co.kr/main/downPage/downPage.jsp
ezPDF Solution
디지털 업무 환경, PDF 전자문서 선두기업 유니닥스의 ezPDF 솔루션과 함께하세요.
www.ezpdf.co.kr
<무료 템플릿 페이지>
Theme Wagon 다운로드
Home
Download the Best Free & Premium Responsive Bootstrap Templates from a hand-picked collection of over 1000 responsive Bootstrap themes & templates
themewagon.com
예시)
* ezPDF Editor사용법: PDF 파일 우클릭 ->연결프로그램->ezPDF Editor 으로 열기
화면이 짤릴 경우 'PNG' 다운->'주석'->사각형으로 구분
4. 태그 이용해서 홈페이지 만들어보기
예시) 참고
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=header, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<div>
<span>hello@colorlib.comㅣ</span>
<span>free shpping for all Order of &99</span>
</div>
<div>
페이스북 트위터 링크드인 핀터레스트ㅣ
국가아이콘 EnglishㅣLogin
</div>
</header>
<nav>
<div>
<img src="" alt="logo">
</div>
<ul>
<li style="list-style-type: none;"><a href="#">HOME</a></li>
<li style="list-style-type: none;"><a href="#">SHOP</a></li>
<li style="list-style-type: none;"><a href="#">PAGES</a></li>
<li style="list-style-type: none;"><a href="#">BLOG</a></li>
<li style="list-style-type: none;"><a href="#">CONTACT</a></li>
</ul>
<div>
하트 장바구니 item: $150.00
</div>
</nav>
<section id="main">
<div>
<table border="1" width="20%">
<td>
<select name="" id="">
<option value="" selected>All departments</option>
<option value=""></option>
<option value=""></option>
</select>
<ul>
<li style="list-style-type: none;">Fresh Meat</li>
<li style="list-style-type: none;">Vegetables</li>
<li style="list-style-type: none;">Fruit&Nut Gifts</li>
<li style="list-style-type: none;">Fresh Berries</li>
<li style="list-style-type: none;">Ocean Foods</li>
<li style="list-style-type: none;">Butter&Eggs</li>
<li style="list-style-type: none;">Fastfood</li>
<li style="list-style-type: none;">Fresh Onion</li>
<li style="list-style-type: none;">Papayaya&Crisps</li>
<li style="list-style-type: none;">iOatmeal</li>
<li style="list-style-type: none;">Fresh Bananas</li>
</ul></td>
</table>
</div>
<select name="" id="">
<option value="" selected>All catagories</option>
<option value=""></option>
<option value=""></option>
</select>
ㅣ <input type="text" placeholder="What do you need?"> ㅣ
<div>SEARCH</div>
<div>
전화 +65 11.188.888
</div>
<div>
support 24/7 time
</div>
<img src="" alt="">
<div>
FRUIT Fresh
<h2>Vegrtable</h2>
<h2>100% Organic</h2>
<div>Free Pickup and Delivery Available</div>
</div>
<div>SHOP NOW</div>
.
' .
. .
'프론트엔드 웹프로그래밍 > HTML' 카테고리의 다른 글
| 개발자 환경 구축 3일차(24/11/13) (6) | 2024.11.13 |
|---|---|
| 개발자 환경 구축 2일차(24/11/12) (0) | 2024.11.12 |
| 개발자 환경 구축 1일차(24/11/11) (4) | 2024.11.11 |