태그 참고자료
h1 ~ h6
제목 등에 사용한다.
<h1>다람쥐 헌 쳇바퀴에 타고파</h1>
<h2>다람쥐 헌 쳇바퀴에 타고파</h2>
<h3>다람쥐 헌 쳇바퀴에 타고파</h3>
<h4>다람쥐 헌 쳇바퀴에 타고파</h4>
<h5>다람쥐 헌 쳇바퀴에 타고파</h5>
<h6>다람쥐 헌 쳇바퀴에 타고파</h6>
p
문장 작성시 사용한다.
<p>안녕하세요. 제이본 입니다.</p>p태그안에 div태그를 넣을 수 없다.
br
다음 줄로 넘길 때 사용한다. (개행)
안녕<br>하세요
div
내용을 구분할 때 사용한다. 즉, 문단이다.
<div>
<p>dd</p>
</div>
span
문장 안의 내용에 스타일을 주거나 기능을 줄 때 사용한다.
<p>안녕하세요. <span style="background-color: yellow;">제이본</span> 입니다.</p>
details
내용을 숨겼다가 보여준다.
<details>
<summary>설레이는 이 마음은 뭘까</summary>
<p>왠지 잠을 이룰수가 없어</p>
</details>
ul
순서가 없는 목차
<ul>
<li>사과</li>
<li>바나나</li>
<li>파인애플</li>
</ul>
ol
순서가 있는 목차
<ol>
<li>베인</li>
<li>그라가스</li>
<li>카직스</li>
</ol>
a
하이퍼링크를 생성한다.
<a href="https://google.com" target="_self">구글로 이동</a>
4개가 있다
- _self : 클릭한 창에서 연다. - _blank : 새 창에서 연다. - _top : 가장 상위 창에서 연다. (프레임을 무시하며, 전체브라우저 창에서 작동, 부모가 없으면 _self처럼 작동) - _parent : 부모창에서 연다.
img
이미지를 출력한다.
(대표적인 inline-block)
<img src="https://zrr.kr/N9WI" alt="우주 오리" width="400"/>src = 이미지경로
alt = 이미지이름
strong
텍스트를 강조한다.
<p>이 기차 번호는 <strong>999</strong> 입니다.</p>
form
입력 정보를 감싸고, 서버와 정보를 주고 받는다. (지금 생략)
<form action="서버 url" method="get 또는 post"></form>input
데이터를 입력 할 수 있다.
<!-- input -->
<h1>텍스트입력</h1>
<!-- text가 제일 기본 -->
<input type="text" />
<h1>비밀번호 입력</h1>
<input type="password" />
<h1>체크박스 입력</h1>
<label>
<input type="checkbox" />
밥먹기
</label>
<h1>라디오 버튼</h1>
<label>
<!-- name기준으로 작동됨 -->
<!-- 해줘야 중복선택이 안됨 -->
<!-- checked를 해줘야 기본적으로 선택되어 있음 -->
<input type="radio" name="ok" checked />
예
</label>
<label>
<input type="radio" name="ok" />
아니오
</label>
<label>
<!-- 체크 못하게 하는 것 -->
<input type="radio" name="ok" disabled />
몰라요
</label>
<h1>이메일 입력</h1>
<input type="email" name="id" />
<h1>날짜 입력</h1>
<input type="date" name="date" />
<h1>파일 입력</h1>
<input type="file" name="id" />
<h1>범위 입력</h1>
<input type="range" name="id" />
<h1>색상 입력</h1>
<input type="color" />
label
input 태그의 제목을 붙인다.
<label>
아이디
<input type="text">
</label>fieldset, legend
내용을 감쌀 때 사용한다.
<fieldset>
<legend>로그인</legend>
<p>
<label for="userid">아이디</label>
<input type="text" id="userid" />
</p>
<p>
<label for="passwd">비밀번호</label>
<input type="password" id="passwd" />
</p>
</fieldset>
textarea
문장 이상의 내용을 입력할 때 사용한다.
<textarea cols="30" rows="10"></textarea>
button
버튼
<button type="button">눌러주세요</button>
4개 있다.(모양이 바뀌는 것은 아님)
- button : 클릭할 수 있는 버튼 - submit : 폼 데이터를 제출하는 제출 버튼 - reset : 폼 데이터를 초기값으로 리셋하는 리셋 버튼
iframe
외부 사이트를 내 페이지 내부에 넣을 수 있다.
대부분의 사이트가 해당 기능이 작동 되지 않도록 설정되어 있음.
<iframe width="560" height="315" src="https://wikidocs.net"></iframe>
위키독스는 열어놓은 상태지만 네이버로 연결하면 되지 않는다.
그러나 유튜브는 가능해서 해보았다.
유튜브의 영상을 클릭하여 공유하기 버튼을 눌린다.
퍼가기를 눌린다.
동영상과 코드가 나오는데 복사를 한다.
복사한 걸 VSC에 붙여준다.<!-- 내페이지에 다른 페이지를 넣을 때 --> <iframe width="560" height="315" src="https://www.youtube.com/embed/VaqjXbtsEj0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>실행하면 웹에 아래와 같이 동영상이 보인다.
audio
오디오를 출력합니다.
<audio src="https://zrr.kr/5Xik" controls></audio>
video
비디오를 출력한다.
<video src="https://zrr.kr/Mghf" controls width="400"></video>
table
tr : row
th : 제목컬럼
td : 컬럼
열병합 할 때 colspan
colspan="2" 컬럼 두개 합치기
행병합 rowspan
rowspan="2" 행 두개 합치기
<!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>
<table border="">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td rowspan="2">15</td>
</tr>
<tr>
<td>박진희</td>
</tr>
<tr>
<td colspan="2">엄준식</td>
</tr>
</tbody>
</table>
</body>
</html>
s07-quiz.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
td {
width: 50px;
height: 50px;
}
.clear1 {
background-color: deeppink;
color: white;
}
.num1 {
background-color: lightpink;
color: black;
}
.equal {
background-color: rgb(255, 163, 235);
color: white;
}
</style>
<title></title>
</head>
<body>
<table>
<tbody style="text-align: center">
<tr style="background-color: hotpink; color: white">
<td colspan="4">25</td>
</tr>
<tr class="num1">
<td colspan="2" class="clear1">claer</td>
<td>-</td>
<td>+</td>
</tr>
<tr class="num1">
<td>7</td>
<td>8</td>
<td>9</td>
<td>/</td>
</tr>
<tr class="num1">
<td>4</td>
<td>5</td>
<td>6</td>
<td>x</td>
</tr>
<tr class="num1">
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2" class="equal">=</td>
</tr>
<tr class="num1">
<td colspan="2">0</td>
<td>.</td>
</tr>
</tbody>
</table>
</body>
</html>
시맨틱 태그
태그에 의미를 부여한다.
사람 뿐 아니라 검색 엔진 등 기계가 이해하는 태그다.
<header>헤더</header>
<nav>네비게이션</nav>
<section>섹션</section>
<article>글</article>
<aside>사이드</aside>
<footer>푸터</footer>
미래가 기대되는 풀스택개발자 공부 이야기~~