반응형
<!DOCTYPE html>
<html>
<head>
<title>이준호의 코딩월드</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" name="description" content="이준호의 문서">
<style type="text/css">
.top{
background: red;
height: 100px;
}
.mid{
background: blue;
height: 100px;
}
.bot{
background: yellow;
height: 100px;
}
.like{
background: red;
}
.sub{
background: blue;
}
.comment{
background: yellow;
}
</style>
</head>
<body>
<div class ="item">안녕</div>
<h1>안녕하세요</h1>
<h2>안녕하세요</h2>
<h3>안녕하세요</h3>
<h4>안녕하세요</h4>
<h5>안녕하세요</h5>
<b>굵은 글씨</b><br />
<i>기울은 글씨</i>
<p>안녕하세요 저는 스팩 이준호입니다</p>
<!-- 미디어 관련 테그들 -->
<img src="https://i.imgur.com/CylgwLR.png" />
<video src="https://www.w3schools.com/html/mov_bbb.mp4"controls />
<!-- 링크테그 -->
<a href="google.com">구글</a>
<a href="facebook.com" target="_blank">페이스북</a>
<!-- 테이블테그 -->
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>제니</td>
<td>1살</td>
</tr>
<tr>
<td>위니</td>
<td>3살</td>
</tr>
</tbody>
</table>
-->
<!-- 목록 테그 -->
<ol>
<li>워니</li>
<li>제니</li>
</ol>
<ul>
<li>워니</li>
<li>제니</li>
</ul>
<!-- 구역을 나누는 태그 -->
<div class="top">상단</div>
<div class="mid">중단</div>
<div class="bot">하단</div>
<span class ="like">좋아요</span>
<span class="sub">구독</span>
<span class="comment">댓글</span>
<!-- 인풋테그 -->
텍스트 <input type="text" name="??"/>
체크박스 <input type="checkbox" name="??"/>
라디오<input type="radio" name=""/>
색깔<input type="color" name=""/>
여러문장<textarea></textarea>
드랍다운<select name="name">
<option value="워니">워니</option>
<option value="제니">제니</option>
</select>
<form>
<input type="email" placeholder="이메일" />
<input type="password" placeholder="비밀번호">
<button type="submit">로그인</button>
</form>
</body>
</html>
반응형
'Web Dev' 카테고리의 다른 글
| Java (Spring) : maven project 생성 (0) | 2021.04.01 |
|---|---|
| Java (Spring) : 스프링 개요 -> IoC 컨테이너에 대하여 (2) | 2021.04.01 |
| Java : 네트워크 (0) | 2021.03.29 |
| JavaScript : 자바스크립트 생성자의 자유도, 상속에 대하여 (0) | 2021.03.24 |
| JavaScript : 함수는 값이다 ? 잉? (0) | 2021.03.22 |
| JavaScript : 라이브러리 사용 맛 보기 (0) | 2021.03.20 |
