저번에 프론트엔드 스터디를 하면서 HTML 퀴즈를 풀면서 복습을 했었다.(밑의 링크 참고)
2023.07.02 - [프로그래밍/프론트엔드] - [W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보았다.
[W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보았다.
프론트엔드 스터디를 하면서 강의를 다 듣고 나면, w3schools라는 사이트에서 관련 문제들을 풀어보기로 정하였다. https://www.w3schools.com/quiztest/default.asp W3Schools Quizzes W3Schools offers free online tutorials, r
quickchabun.tistory.com
예제를 풀어보면 더 좋을 것 같아서 검색을 하던 중 좋은 예제를 제공하는 사이트를 찾았다.
https://dinfree.com/lecture/frontend/121_html_exam.html#q-1
HTML 프로그래밍 기초
HTML 프로그래밍 기초 실습 예제 모음 입니다.
dinfree.com
이 사이트에서 제공하는 퀴즈 2개를 풀어보았다.
코드
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1" width="300px" height="300px">
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">5</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td>7</td>
<td colspan="2">8</td>
</tr>
</table>
</body>
</html>
결과
후기
border 속성은 테이블의 테두리를 설정해준다. 숫자가 높을수록 테두리가 두꺼워진다.
<tr>은 테이블의 행을 만드는 태그이고, <td>는 테이블의 열을 만드는 태그이다.
rowspan은 세로를 합병하고(열 합병), colspan은 가로를 합병한다(행 합병).
코드
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
First name: <br><input type = "text" name = "name"/><br>
Last name: <br><input type = "text" name = "name"/><br>
Email: <br><input type = "text" name = "name"/><br>
Gender: <input type = "radio" name = "gender"/>Male,
<input type = "radio" name = "gender"/>Female<br>
Favorite : <input type = "checkbox" name = "favorite"/>HTML,
<input type = "checkbox" name = "favorite"/>Java,
<input type = "checkbox" name = "favorite"/>PHP<br>
University : <select name = "university">
<option value = "seoul">Seoul University</option>
<option value = "yonsei">Yonsei University</option>
<option value = "korea">Korea University</option>
</select><br>
Color:
<input type="color"><br>
Date:
<input type="date"><br><br>
<input type="submit" value="Registration">
</form>
</body>
</html>
결과
후기
폼에 대해서 이해할 수 있어서 좋았다.
input type을 많이 이용했는데, 이 문제에서는 text, radio, checkbox, color, date, submit을 이용했다.
드롭다운 목록을 생성하는 select도 이용했다.
'Frontend > HTML, CSS' 카테고리의 다른 글
| [CSS] CSS 예제를 풀어보자 - 소스코드 설명 페이지 만들기 (2) | 2023.07.06 |
|---|---|
| [W3Schools/W3스쿨즈] CSS 퀴즈를 풀어보자 (0) | 2023.07.05 |
| [CSS] 얄코의 CSS 강의를 듣고 (0) | 2023.07.04 |
| [W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보자 (0) | 2023.07.02 |
| [HTML] 생활코딩 WEB1 - HTML & Internet을 듣고 (0) | 2023.07.01 |