List의 종류
- ol (Ordered List)
- li (List item)
- li (List item)
- li (List item)- ul (Unorderde List)
- li (List item)
- li (List item)
- li (List item)
- 목록을 만들 때 유용.
메뉴 네비게이션을 만들 때 유용. (css의 도움 필요)
<!DOCTYPE html>
<html>
<head>
<title>List 실습</title>
</head>
<body>
<div>
<h1>OL (Ordered List)</h1>
<ol>
<li>ML 포스팅 꿈꾸는 157km 사이드암</li>
<li>"150km 던지겠다" ERA 0.00 겁없는 7R 루키</li>
<li>"윤동희처럼 독특한 타이밍... 스윙궤도만 고쳤을 뿐."</li>
<li>암흑기 한화의 ‘토종 에이스’…류현진 뒤에서 김민우</li>
<li>KIA 스프링캠프 마감...이범호 감독 "백업 기량 발전</li>
</ol>
</div>
<div>
<h1>UL (Unordered List)</h1>
<ul>
<li>ML 포스팅 꿈꾸는 157km 사이드암</li>
<li>"150km 던지겠다" ERA 0.00 겁없는 7R 루키</li>
<li>"윤동희처럼 독특한 타이밍... 스윙궤도만 고쳤을 뿐."</li>
<li>암흑기 한화의 ‘토종 에이스’…류현진 뒤에서 김민우</li>
<li>KIA 스프링캠프 마감...이범호 감독 "백업 기량 발전</li>
</ul>
</div>
<!-- 실제로는 이렇게 많이 씀 -->
<div>
<h1>Element List - UL (Unordered List)</h1>
<ul>
<li>
<div>
<h3>'러셀-AD 폭발 + 르브론 트리플-더블급 활약' LAL, 서부...</h3>
<p>레이커스가 홈에서 완승을 거뒀다. LA 레이커스는 5일(이하 한국시간) LA 크립토닷컴 아레나에서 열린 2023-2024 NBA 정규시즌 오클라호마시티 썬더와의 경기에서 116-104로 승리했다.
레이커스는 주축 선수들의 고른 활약을 바탕으로 서부 선두 오클라호마시티를 잡았다. 르브론 제임스가 19점 11리바운드 8어시스트로 트리플-더블급 활약을 펼쳤고 디안젤로 러셀이 26점,
앤써니 데이비스가 24점을 쏟아냈다.</p>
<p>루키 · NBA</p>
</div>
</li>
<li>
<div>
<h3>'러셀-AD 폭발 + 르브론 트리플-더블급 활약' LAL, 서부...</h3>
<p>레이커스가 홈에서 완승을 거뒀다. LA 레이커스는 5일(이하 한국시간) LA 크립토닷컴 아레나에서 열린 2023-2024 NBA 정규시즌 오클라호마시티 썬더와의 경기에서 116-104로 승리했다.
레이커스는 주축 선수들의 고른 활약을 바탕으로 서부 선두 오클라호마시티를 잡았다. 르브론 제임스가 19점 11리바운드 8어시스트로 트리플-더블급 활약을 펼쳤고 디안젤로 러셀이 26점,
앤써니 데이비스가 24점을 쏟아냈다.</p>
<p>루키 · NBA</p>
</div>
</li>
</ul>
</div>
</body>
</html>
이렇게 보이는 차이점이 있다.
Anchor
<a>태그
- anchor 태그 : Link ( Page -> Page )
<a href"이동할 페이지 주소">링크명</a>
<!DOCTYPE html>
<html>
<head>
<title>Anchor 실습</title>
</head>
<body>
<a href="#bottom">가장 아래로 가기</a>
<!-- anchor 태그 : Link ( Page -> Page ) <a>링크명</a> -->
<!-- href ==> Hyperlink REFerence -->
<a href="div.html">div 실습 페이지로 이동</a>
<a href="https://naver.com">Naver로 이동</a>
<a href="https://daum.net">Daum으로 이동</a>
<a href="https://google.com">Google로 이동</a>
<!-- 책갈피 기능 -->
<ul id="top">
<li><a href="#html">HTML 소개</a></li>
<li><a href="#div">DIV Tag</a></li>
<li><a href="#p">P Tag</a></li>
<li><a href="#list">List</a></li>
</ul>
<div>
<h1 id="html">HTML 소개</h1>
<p>HTML은 Hyper Text Markup Language 입니다.</p>
<a href="#top">위로 가기</a>
</div>
<div>
<h1 id="div">DIV Tag</h1>
<p>DIV는 Divisiond의 약자 입니다.</p>
<a href="#top">위로 가기</a>
</div>
<div>
<h1 id="p">P Tag</h1>
<p>P는 Paragraph의 약자 입니다.</p>
<a href="#top">위로 가기</a>
</div>
<div>
<h1 id="list">List</h1>
<p>List는 목록을 만들어주는 기능입니다.</p>
<p>표현 방식에 따라 ol, ul로 구분됩니다.</p>
<p>리스트 아이템은 li 태그로 작성합니다.</p>
<a href="#top">위로 가기</a>
</div>
<div id="bottom"></div>
</body>
</html>
Table
<th>와 <td>의 수가 맞아야 한다.
<body>
<h2>HTML Table</h2>
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
</body>