TIL (Today I learned
TIL ----- HTML 기본 태그 정리
코딩준우
2023. 7. 5. 12:17
# 기본 글자 태그
제목 : <h1></h1> ~ <h6></h6>
단락 : <p></p>
줄바꿈: <br/>
링크 <a href=""></a>
# 목록 태그
## 순서가 있는 목록 ol : ordered list
1. 바나나 li
2. 딸기 li
3. 수박 li
4. 키위 li
## 순서가 없는 목록 ul : unordered list
- 바나나 li
- 딸기 li
- 수박 li
- 키위 li
<ol>
<li>바나나</li>
<li>딸기</li>
<li>수박</li>
<li>키위</li>
</ol>
<ul>
<li>딸기</li>
<li>수박</li>
<li>키위</li>
<li>바나나</li>
</ul>
# 테이블 (표)
<table></table> : 표 자체를 의미
tr : table row : 줄 하나
-th : table heading : 줄에 들어가는 제목
-td : table data : 줄에 들어가는 데이터
<table border="10">
<tr>
<th colspan="2">이름</th>
<th>나이</th>
</tr>
<tr>
<td rowspan="2">가나다</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</table>
# 이미지
<!--
src에는
URI : Uniform Resource Identifier(식별자)
> 학생을 부르는 방법
URL : Uniform Resource Locator(위치)
> 왼쪽에서 2번째, 앞에서 2번째에 있는 (2, 2) 학생 나와
URN : Uniform Resource Name(이름)
> 홍길동-1, 홍길동-2 나와
URL
1. 절대 경로
> 서울 특별시 강서구 마공동 어디어디 몇동 몇호
2. 상대 경로
. : 현재 폴더(생략하고 쓰는 경우)
b.jpeg
./b.jpeg
.. : 현재 폴더의 한 단계 위 폴더
../a.jpeg
../folder/b.jpeg
> 우리집 위
> 우리집 아래
> 우리집 위로 올라가서 왼쪽 첫 번째 방에 있는 책상 위에 있는 키
[예X] http:://example.com/
[예X] //example.com/
[예] /test/example/aa.jpg
-->
<img src="ht200" alt="이미지가 없어요">
<img src="test.jpeg">
# 오디오와 비디오
<audio src="test.mp3" controls></audio>
<video src="test.mp4" controls="controls"></video>
<script>
document.querySelector("audio")
document.querySelector("video")
</script>
# 입력 양식
<form action="">
<!--
input 태그의 id와 for을 일치 시키면
label을 눌렀을 때도 input 태그를 누른 것
처럼 작동함
-->
<label for="id">이름 :</label>
<input type="text" name="" id="id" value="안녕하세요"> <br>
<label for="password">비밀번호</label>
<input type="text" name="" id="password" value="안녕하세요"> <br>
<label for="check">인터넷을 통하여</label>
<input type="checkbox" name="referer" id="check"> <br>
<label for="check">친구로 부터</label>
<input type="checkbox" name="referer" id="check"> <br>
<label for="check">광고로 부터</label>
<input type="checkbox" name="referer" id="check"> <br>
<label type="">성별</label> <br>
<label type="">남자:</label>
<!-- name 속성 값이 같을 경우 하나만 선택되게 동작 -->
<input type="radio" name="gender" id="">
<label type="">여자:</label>
<input type="radio" name="gender" id="">
<label type="">그외:</label>
<input type="radio" name="gender" id=""> <br>
<input type="submit" value="안녕하세요"> <br> <br>
<input type="button" value="안녕하세요">
<input type="range" id="" value="30">
<input type="color" name="" id="" value="#F0FF0F"> <br>
</form>
<textarea name="" id="" cols="30" rows="10">
안녕하세요
안녕하세요
안녕하세요
안녕하세요
</textarea>
<!-- multiple="multiple" 여러개 선택 가능하게 하는 속성-->
<select name="" id="">
<optgroup label="여름에 맛있는 것">
<option value="">참외</option>
<option value="">수박</option>
</optgroup>
<optgroup label="항상 맛있는 것">
<option value="">바나나</option>
</optgroup>
</select>
<p contenteditable=""></p>
# 공간 분할
-Block : div, h, p
-Inline : span, a, b, i, input
<div><span>Inline</span><span>Inline</span><span>Inline</span></div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<span>Inline</span><span>Inline</span><span>Inline</span>
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
<h1>글자</h1>
<p>글자</p>
<a href="">글자</a>
<b>글자</b>
<i>글자</i>
<input type="text" name="" id="">
Inline-Block : img
<img src="test.jpeg" alt="">
<img src="test.jpeg" alt="">
<img src="test.jpeg" alt="">
<img src="test.jpeg" alt="">
<img src="test.jpeg" alt="">
<!-- div와 같지만 웹브라우저 입장에서는 해석하는데 도움이 되는 태그 -->
<header>
<h1>사이트 이름</h1>
</header>
<nav>
<ul>
<li><a href="">링크</a></li>
<li><a href="">링크</a></li>
<li><a href="">링크</a></li>
</ul>
</nav>
<aside>
<ul>
<li><a href="">세부 카테고리 이동</a></li>
<li><a href="">세부 카테고리 이동</a></li>
<li><a href="">세부 카테고리 이동</a></li>
</ul>
</aside>
<section></section>
<article></article>
<footer></footer>