728x90
수업 날짜: 2022.03.10
웹프 과제로 해당 사진처럼 만드는 것을 하였습니다.
404 고양이는 아무 사진이나 상관없다고 하셨기에 404 고양이로 하였습니다.
전체코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>나의 웹사이트</title>
</head>
<body>
<div style="display: flex">
<div>
<h1>첫 번째 블록</h1>
<p style="font-size: 50px">
<strong>
안녕하세요.
</strong>
<br/>
2217 내 이름
</p>
<input type="text" style="width: 500px; height: 100px; font-size: 50px">
<div>
<button style="width: 250px; height: 100px; font-size: 50px">버튼</button>
<button style="width: 250px; height: 100px; font-size: 50px">버튼2</button>
</div>
<a href="https://www.goggle.com" style="font-size: 30px">구글로 이동</a>
</div>
<div>
<h1>두 번째 블록</h1>
<img src="https://http.cat/404/jpg" alt="cat" height="35%" width="60%">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol style="font-size: 25px">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<table summary="테이블" style="width: 500px; height: 250px">
<caption>테이블 이름</caption>
<tr>
<th>이름</th>
<th>나이</th>
<th>지역</th>
</tr>
<tr>
<th>철수</th>
<th>12</th>
<th>서울</th>
</tr>
<tr>
<th>영희</th>
<th>14</th>
<th>부산</th>
</tr>
</table>
</div>
<div>
<h1>세 번째 블록</h1>
<form>
<input type="text" style="font-size: 50px">
<input type="email" style="font-size: 50px">
<input type="password" style="font-size: 50px">
<input type="date" style="font-size: 50px">
<input type="checkbox" style="font-size: 50px">체크박스</input><br/>
<label>
<select name="coffee">
<option value="1">아메리카노</option>
<option value="2">카페라떼</option>
<option value="3">에스프레소</option>
</select>
</label>
<div>
<button type="submit" style="font-size: 30px">완료</button>
</div>
</form>
</div>
</div>
</body>
</html>
이상입니다.
'학교 공부 > 웹 프로그래밍' 카테고리의 다른 글
| [웹 프로그래밍] 첫 수업 (0) | 2022.03.08 |
|---|