exam
html로 작성해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul>
<li><b>두 번째 목록</b></li>
<ol>
<li>Lorem ipsum <sup>sit amet</sup></li>
<li><ins>Lorem ipsum sit amet</ins></li>
<li><del>Lorem ipsum sit amet</del></li>
</ol>
</ul>
<!-- -->
<ul>
<li>
<b>두 번째 목록</b>
<ol>
<li>Lorem ipsum <sup>sit amet</sup></li>
<li><ins>Lorem ipsum sit amet</ins></li>
<li><del>Lorem ipsum sit amet</del></li>
</ol>
</li>
</body>
</html>
exam2
html로 작성해보기
<table border="1">
<thead>
<tr>
<th>첫 번째 목록</th>
<td>디자인</td>
</tr>
</thead>
<!-- 본문 -->
<tr>
<th></th>
<td>
<ul>
<li><b>Lorem ipsum dolor sit amit</b></li>
<li><i>Lorem ipsum dolor sit amit</i></li>
<li><small>Lorem ipsum dolor sit amit</small></li>
<li>Lorem ipsum dolor <sub>sit amit</sub></li>
</ul>
</td>
</tr>
<tr>
<th>두번째 목록</th>
<td>디자인 시작</td>
</tr>
<tr>
<td></td>
<td>
<ol>
<li><b>Lorem ipsum dolor sit amit</b></li>
<li><i>Lorem ipsum dolor sit amit</i></li>
<li><small>Lorem ipsum dolor sit amit</small></li>
<li>Lorem ipsum dolor <sub>sit amit</sub></li>
</ol>
</td>
</tr>
<tr>
<th>세번째 목록</th>
<td>디자인 끝</td>
</tr>
</table>
FOAM1
<!-- 1) input : 입력양식 -->
<!-- <input type = "" name = "변수명" value = "화면에_보여질값" /> -->
<!-- type = "text" : 글자 입력 -->
<input type="text" name="name" value="" />
<!-- <br/> : 줄바꿈(추천 -> 리액트 br 에러) -->
<br />
<!-- 패스워드 입력양식 -->
<input type="password" name="password" value="" />
<!-- <br/> : 줄바꿈(추천 -> 리액트 br 에러) -->
<br />
<!-- 체크박스 입력양식 -->
<input type="checkbox" name="checkbox" value="checkbox" /> 좋음
<input type="checkbox" name="checkbox" value="checkbox" /> 나쁨
<!-- <br/> : 줄바꿈(추천 -> 리액트 br 에러) -->
<br />
<!-- 줄 복사 : ctrl + d -->
<!-- 줄 삭제 : ctrl + y -->
<!-- 라디오 입력양식 -->
<!-- 참고) name의 값이 2개가 일치해야 정상적으로 동작함 -->
<input type="radio" name="radio" value="radio" /> 여
<input type="radio" name="radio" value="radio" /> 남
<!-- <br/> : 줄바꿈(추천 -> 리액트 br 에러) -->
<br/>
<!-- file 대화상자 입력양식 -->
<input type="file" name="file" value="file" />
<br/>
<!-- 히든 입력양식 : 특수용도 (화면에는 안보이지만 html 문서에 값을 가지고 있음) -->
<input type="hidden" name="hidden" value="홍길동" />
<br/>
<!-- 입력 양식 : 버튼 -->
<input type="button" value="홍길동" />
<!-- 화면 입력된 text를 지우는 기능 -->
<input type="reset" value="reset" />
<!-- 다른 웹페이지(html페이지)로 이동가능 기능 -->
<input type="submit" value="submit" />
결과
exam3
html로 작성해보기
<!-- 라벨 태그 : 입력양식 앞에 제목(설명) 등으로 사용되는 태그 -->
<label for="">이름</label>
<input type="text"/>
<br/>
성별
<input type="radio" name="radio" value="radio" />
<label for="">남자</label>
<input type="radio" name="radio" value="radio" />
<label for="">여자</label>
<br/>
<input type="button" value="가입">
exam4
html로 작성해보기
<body>
<!-- 라벨 태그 : 입력양식 앞에 제목(설명) 등으로 사용되는 태그 -->
<table border="1">
<thead>
<tr>
<td><label for="">이름</label></td>
<td><input type="text" /></td>
</tr>
</thead>
<td>성별</td>
<td>
<input type="radio" name="gender" />
<label for="">남자</label>
<input type="radio" name="gende" />
<label for="">여자</label>
</td>
</table>
<input type="button" value="가입" />
</body>
select문
<body>
<!-- select 입력양식 : 여러개의 목록이 있는 태그 -->
<!-- selected 속성 : 미리 선택된 값을 지정하는 속성 -->
<select>
<option value="a">김밥</option>
<option value="b" selected>떡볶이</option>
<option value="c">순대</option>
<option value="d">어묵</option>
</select>
</body>
결과
select문2
<body>
<select>
<!-- optgroup 태그 : 목록에 그룹명을 부여해서 화면에 표시함 -->
<!-- front 기술 -->
<optgroup label="HTML5">
<option>html</option>
<option>css</option>
<option>javascript</option>
</optgroup>
<!-- backend 기술 -->
<optgroup label="backend">
<option>java</option>
<option>springboot</option>
</optgroup>
</select>
</body>
결과
select문3
<body>
<!-- 줄복사 : ctrl + d -->
<!-- multiple="multiple" 속성 : 여러개 선택(ctrl 키, shift 키를 이용) -->
<select multiple="multiple">
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>어묵</option>
</select>
</body>
결과
label
<body>
<!-- form(부모태그, 생략가능) > 입력양식(자식태그) -->
<form>
<label for="">이름</label>
<input type="text">
<br/>
<!-- 2) -->
<!-- 입력양식 : name, id, class, width, height 공통속성(모든 태그에 있음) -->
<!-- for="변수명" == id="변수명": label 태그와 input 태그가 연결 -->
<label for="name">이름</label>
<input type="text" id="name"/>
</form>
</body>
결과
메모장
<body>
<!-- form(부모태그, 생략가능) > 입력양식(자식태그) -->
<form>
<label for="">이름</label>
<input type="text">
<br/>
<!-- 2) -->
<!-- 입력양식 : name, id, class, width, height 공통속성(모든 태그에 있음) -->
<!-- for="변수명" == id="변수명": label 태그와 input 태그가 연결 -->
<label for="name">이름</label>
<input type="text" id="name"/>
</form>
</body>
결과
exam5
html로 작성해보기
<body>
<!-- html 특수 태그들 -->
<!-- < : < (less than) -->
<!-- > : > (greater than) -->
<!-- 공백 : -->
<h3>1. <h1>~<h6> 태그 중 가장 글자 크기가 큰 것은 무엇일까요?</h3>
<p>정답 : <h1> </p>
<h3>2. 삶에서 가장 중요한것은 "행복"일까요? 아니면 "사랑"일까요</h3>
<!-- html 특징 : 공백 여러개 입력해도 1개로 인식됨 -->
정답 : <b>둘 다</b>    ...
<br/>
<br/>
중요하지 않을까요?
</body>
exam6
이모티콘은 윈도우 + <
html로 작성해보기
<body>
<h3>간단한 로제 파스타 만들기</h3>
토마토 소스의 <b>새콤 달콤함</b>과 크림소스의 <b>부드럽고 고소함</b>
<br />
<ol>
<li>새우, 마늘, 양파</li>
<li>끓는 물에 스파게티 면</li>
<li>볶아놓은 재료와 스파게티 면</li>
</ol>
😂😊※스파게티 면은 라면이나...
</body>
exam7
html로 작성해보기
단락 <p> </p>쓰면 자동으로 줄 띄움
<body>
<h3>반려동물이란?</h3>
<p>
사람과 더불어 살아가는 동물이란....
</p>
<img src="./image/bird2.jpg" alt="새" width="300" height="" />
</body>
exam8
html로 작성하기
<body>
<h2>글자에 링크 걸기</h2>
<h2>이미지에 링크 걸기</h2>
네이버<br/>
<img src="./image/bird2.jpg" alt="새" width="300" />
</a>
<br/>
구글<br/>
<img src="./image/insect.jpg" alt="새" width="300" />
</a>
</body>
'HTML > Html' 카테고리의 다른 글
| [HTML]연습 문제 & 자주 쓰는 용어 및 태그 정리 (0) | 2023.08.03 |
|---|---|
| [HTML] 비주얼 스튜디오 단축키 (0) | 2023.08.01 |
| [HTML] HTML(비쥬얼 스튜디오 시작 세팅 및 사용법) 폰트, 태그, 텍스트, 오디오, 이미지 (0) | 2023.08.01 |