exam13
html로 작성해보기
<body>
<!-- 3행 2열 -->
<table border="1">
<!-- <thead> -->
<tr>
<td>이름</td>
<td><input type="text" name="name" value="" /></td>
</tr>
<!-- </thead> -->
<tr>
<td>비밀번호</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>이메일</td>
<td>
<input type="text" name="name" value="" />@
<select>
<option value="a">선택하세요</option>
<option value="a">naver.com</option>
<option value="a">hanmail,net</option>
<option value="a">직접 입력하세요</option>
</select>
</td>
</tr>
</table>
</body>
exam14
html로 작성해보기
<!-- 열병합 -->
<!-- 사용법 : <td colspan="2">내용</td> -->
<table border="1">
<tr>
<td colspan="2">글쓰기 게시판</td>
</tr>
<tr>
<td><label for="">제목</label></td>
<td><input type="text" /></td>
</tr>
<tr>
<td>내용</td>
<td><textarea cols="50" rows="10"></textarea></td>
</tr>
<tr>
<td>파일첨부</td>
<td><input type="file" name="" id="" /></td>
</tr>
<tr>
<td></td>
<td>5M 이하의 파일만 첨부 가능합니다</td>
</tr>
<tr>
<td colspan="2">
<!-- <input type="button" value="확인"> -->
<!-- 2번째 방법: 버튼 -->
<button>확인</button>
</td>
</tr>
</table>
exam15
html로 작성해보기
<body>
<h3>개인 신상 정보 입력</h3>
<form action="">
이름 : <input type="text" name="" id="" />
<br />
<br />
</form>
비밀번호 : <input type="text" name="" id="" />
<br />
<br />
성별 : <input type="radio" name="" id="" />남성
<input type="radio" name="" id="" />여성
<br />
<br />
취미 :
<input type="checkbox"/>영화감상
<input type="checkbox"/>게임
<input type="checkbox"/>음악듣기
<br />
<br />
파일 첨부 : <input type="file" name="" id="" />
<br />
<br />
이메일 : <input type="text" name="" id="" />
<select name="" id="">
<option value="">----선택----</option>
<option value="">naver.com</option>
<option value="">hanmail.net</option>
<option value="">직접입력</option>
</select>
<br />
<br />
자기소개 : <textarea cols="30" rows="5"></textarea>
<br />
<br />
<input type="button" value="확인" />
</body>
exam16
html로 작성해보기
<body>
<!-- 행병합 힌트 : <td rowspan='2'>내용</td> -->
<table border="1">
<thead>
<tr>
<th colspan="2"><b>날짜</b></th>
<th><b>날씨</b></th>
<th><b>풍향</b></th>
<th><b>풍속(m/s)</b></th>
</tr>
</thead>
<tr>
<td>24일(월)</td>
<td>오후</td>
<td><img src="./image/우산.jpg" alt=""></td>
<td>남~남서</td>
<td>3~7</td>
</tr>
<tr>
<td rowspan="2">25일(화)</td>
<td>오전</td>
<td><img src="./image/우산.jpg" alt=""></td>
<td>서~북서</td>
<td>3~6</td>
</tr>
<tr>
<td>오후</td>
<td><img src="./image/날씨.jpg" alt=""></td>
<td>북서~서</td>
<td>3~6</td>
</tr>
</table>
</body>
복습과 자주 쓰는 용어 및 태그 정리
<body>
<!-- TODO : 컴퓨팅 자주쓰는 코딩 용어 -->
<!-- :(콜론), ;(세미콜론), &(앤퍼센트), -->
<!-- HTML : Markup 언어 : <여는태그>글자</닫는태그> 로 작성하는 언어 -->
<!-- HTML 요소들 : -->
<!-- 태그(요소, element), 속성(attribute), 값(value) -->
<!-- 태그 : h1, p, table 등 -->
<!-- 속성 : src, width, height 등 -->
<!-- 값 : src="값" , width="값" 등 -->
<!-- 단축키 : 인텔리제이 -->
<!-- 줄복사 : ctrl + d -->
<!-- 줄삭제 : ctrl + y -->
<!-- 윈도우 단축키 -->
<!-- 복사 : ctrl + c -->
<!-- 잘라내기 ctrl + x -->
<!-- 붙여넣기 ctrl + v -->
<!-- 실행취소 ctrl + z -->
<!-- html(구조), css(디자인), js(동작) -->
<!-- 3가지 파일로 각각 분리 코딩(권고) -->
<!-- 플러그인 : Auto renme tag -->
<!-- TODO: 1) 제목태그 : h1 ~ h6 -->
<h1>안녕하세요</h1>
<h2>안녕하세요</h2>
<h3>안녕하세요</h3>
<h4>안녕하세요</h4>
<h5>안녕하세요</h5>
<h6>안녕하세요</h6>
<!-- TODO: 2) 폰트 -->
<!-- 굵은 글씨 -->
<b>안녕하세요</b>
<!-- 이텍릭체 글씨 -->
<i>안녕하세요</i>
<!-- TODO: 3) 단락(*) -->
<p>안녕하세요..</p>
<!-- TODO: 4) 링크(앙커,*) : 페이지 이동 -->
<!-- TODO: 5) 줄바꿈(*) -->
안녕하세요<br/>
안녕하세요<br/>
<!-- TODO: 6) 특수 태그 -->
<!-- < : < (less than) -->
<!-- > : > (greater than) -->
<!-- 공백 : -->
<!-- TODO: 7) 이미지(*) -->
<img src="./image/bird2.jpg" alt="새" width="300">
<!-- TODO: 8) 목록(*), ul(unordered list,*) ,ol(ordered list) -->
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul>
<!-- TODO: 9) 테이블(*) -->
<table>
<!-- 제목 : thead(생략가능) -->
<thead>
<!-- tr : 1행 -->
<tr>
<!-- th : 1열 -->
<th>요일</th>
</tr>
</thead>
<table>
<!-- 제목 : tbody(생략가능) -->
<tbody>
<!-- tr : 1행 -->
<tr>
<!-- td : 1열 -->
<td>요일</td>
</tr>
</tbody>
</table>
</body>
겨로가
요약2
<body>
<!-- TODO: form 태그(부모태그, 생략가능) > input (자식태그) -->
<!-- TODO: 1) 라벨 + 입력양식 -->
<!-- for="변수명" == id="변수명" -->
<!-- label 클릭하면 input 양식에 포커스 생김 -->
<label for="name">이름</label>
<input type="text" id = "name"/>
<br/>
<!-- TODO: 2) 패스워드 -->
<input type="password" />
<br/>
<!-- TODO: 3) 파일 대화상자 -->
<input type="file">
<br/>
<!-- TODO: 4) 체크박스 -->
<input type="checkbox" />좋음
<br/>
<input type="checkbox" />나쁨
<br/>
<!-- TODO: 5) 라디오박스 -->
<input type="radio" name="gender" />남
<input type="radio" name="gender" />여
<!-- TODO: 6) Select 박스 -->
<!-- 속성 : selected - 화면에 먼저 보일 문자 -->
<!-- 사용법 : <option>항목</option> -->
<select>
<option>김밥</option>
<option selected>떡볶이</option>
<option>순대</option>
<option>어묵</option>
</select>
<!-- TODO: 7) textarea : 긴 글쓰기 -->
<!-- cols="가로크기", rows="세로크기" -->
<textarea cols="30" rows="10"></textarea>
</body>
결과
ㅇㅇ
<body>
<!-- 과거 방식(레가시 시스템(legacy system)) -->
<!-- <div>머리말</div>
<div>메뉴</div>
<div>본문</div>
<div>꼬리말</div> -->
<!-- 현대 방식 -->
<!-- 시멘틱 태그 : header(머리말), nav(메뉴), section(본문), footer(꼬리말) -->
<!-- 장점 : 검색엔진 노출 잘됨 -->
<!-- 머리말 시작 -->
<header>
<h1>HTML 5 기본</h1>
</header>
<!-- 머리말 끝 -->
<!-- 메뉴시작 -->
<nav>
<ul>
<li><a href="#">메뉴 - 1</a></li>
<li><a href="#">메뉴 - 2</a></li>
<li><a href="#">메뉴 - 3</a></li>
</ul>
</nav>
<!-- 메뉴 끝 -->
<!-- 본문 시작 -->
<!-- selection(대본문), article(소본문) -->
<section>
<!-- 소본문시작 #1 -->
<article>
<h1>안녕하세요</h1>
<p>그린컴퓨터아카데미입니다.</p>
</article>
<!-- 소본문끝 -->
<!-- 소본문시작 #2 -->
<article>
<h1>안녕하세요2</h1>
<p>그린컴퓨터아카데미입니다.2</p>
</article>
<!-- 소본문끝 -->
</section>
<!-- 본문끝 -->
<!-- 꼬리말 시작 -->
<footer>
<address>부산광역시 수영구</address>
</footer>
<!-- 꼬리말 끝 -->
</body>
결과
'HTML > Html' 카테고리의 다른 글
| [HTML]테이블, 이미지 링크연결, 라디오, 체크박스, 버튼, 파일첨부, 대화상자, 아이디 비밀번호(텍스트 입력) (0) | 2023.08.02 |
|---|---|
| [HTML] 비주얼 스튜디오 단축키 (0) | 2023.08.01 |
| [HTML] HTML(비쥬얼 스튜디오 시작 세팅 및 사용법) 폰트, 태그, 텍스트, 오디오, 이미지 (0) | 2023.08.01 |