2020. 2. 16. 19:08ㆍProgramming/HTML,CSS
2020.2.4
어제는 약속이 있어서 못했다.
오늘은 유튜버 "코딩하는 테그보이 워니"의 영상을 보며 공부했다.
웹사이트 코딩할때 필요한 HTML 이 영상 하나로 끝내세요
링크
:https://www.youtube.com/watch?v=50JOpxN0554&list=PLa7Lj786Q-GtH_zTBNufgR4MTiKH6OP4_&index=3
html의 기초를 7분정도 보여주는데 유익한 것 같았다.
저번에 본 영상 중 몰랐던 부분을 알 수 있었다.
따라하면서 코딩을 치며 공부했다.
html 연습중
링크:
https://20200204.dlalsgh0315.repl.co/
생각보다 웹사이트 만드는게 간단해서 놀랐다.
제대로 된 공부를 하는 느낌이였다.
코드
<html>
<head>
<title>html 연습중</title>
<link href="style.css" rel="stylesheet"
type="text/css" />
<meta name="description" content="html 연습문서">
<style>
.item {
color: red;
}
.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>
<h6>안녕하세요</h6>
<b>굵은 글씨</b>
<i>기울은 글씨</i>
<p>안녕하세요</p>
<!-- 링크 태그 -->
<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>3살</td>
</tr>
<tr>
<td>민욱</td>
<td>1살</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>
<div></div>
<!-- 인풋 태그 -->
텍스트 <input type="text"
체크박스 <input type="checkbox" />
라디오 <input type="radio" />
색깔 <input type="color" />
여러 문장 <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>
<!-- 미디아 관련 태그들 -->
<img src="https://i.imgur.com/CylgwLR.png" />
<video src="https://www.w3schools.com/html/mov_bbb.mp4" controls />
</body>
</html>
다음번엔 css관련 영상을 보며 공부해야겠다.
'Programming > HTML,CSS' 카테고리의 다른 글
| css 공부하기 (0) | 2020.02.16 |
|---|---|
| html 공부하기4 (0) | 2020.02.16 |
| html 공부하기3 (0) | 2020.02.16 |
| html 공부하기2 (0) | 2020.02.16 |
| 코딩 공부를 다시 시작하다. (3) | 2020.02.16 |