FrontEnd Programming
[FrontEnd] 2. HTML 태그 상세(div, p, span, list, anchor, table 태그)
코딩펭귄
2024. 3. 6. 00:06
div 태그
= division
- 화면을 분할시키려는 목적으로 사용. 단, 띄어쓰기 많이한건 표시안됨
- 웹페이지를 만들때 *가장*많이 쓰는 태그 중 하나
p 태그
- 문장과 문단을 구분
- paragraph : 문장을 작성할 때 사용
- p태그를 두번쓰면, 아래와 같이 문장과 문장이 떨어져 표현된것을 확인할수있음
SPAN 태그
- 문자를 감싸기만 한것은 아무런 기능도 적용이 안됨. 꾸며줘야됨ex) <span style = "font-weight:bold; color: red;">
Headlines 실습 (글씨크기)
기사 따라하기 (Headline 실습)
https://n.news.naver.com/sports/wfootball/article/477/0000476940
<!DOCTYPE html>
<html>
<head>
<title>김민재, 투헬 떠나보내고 새 감독 맞이한다..."뮌헨, 알론소와 긍정적인 초기 회담 진행"→ "리버풀은 부담"</title>
</head>
<body>
<!--기사 제목 영역-->
<div>
<h1>김민재, 투헬 떠나보내고 새 감독 맞이한다..."뮌헨, 알론소와 긍정적인 초기 회담 진행"→ "리버풀은 부담"</h1>
<h6>입력2024.03.05. 오후 1:22 수정2024.03.05. 오후 1:33</h6>
</div>
<!--기사 내용 영역-->
<div>
<p>독일 매체 '스카이스포츠 독일'은 5일(한국시간) "사비 알론소 감독은 바이에른 뮌헨이 토마스 투헬 감독의 후임으로 가장 선호하는 인물이다"라고 전했다.</p>
<p>이어서 "알론소 감독과 뮌헨은 긍정적인 초기 회담을 진행했다. 알론소 감독의 차기 행선지는 뮌헨으로 기울고 있으며, 여름에 바이어 04 레버쿠젠을 떠날 가능성이 있다"라고 덧붙였다. 또한 "뮌헨은 알론소 감독을 선임할 시 얼마나 많은 타이틀을 획득하느냐에 따라 최대 2,500만 유로(약 361억 원)의 보상금을 지불해야 한다. 레버쿠젠은 이번 시즌 독일 분데스리가 선두를 달리고 있으며 유럽축구연맹 유로파리그(UEL) 16강에도 진출해 있는 상황이다.</p>
<p>알론소 감독은 선수 시절 뛰어난 축구 센스와 정확한 롱 패스 능력을 바탕으로 팀의 중원을 책임졌던 미드필더 출신이다. 2004년 리버풀에 입단한 뒤, 2009년부터는 레알 마드리드의 유니폼을 입었다. 이어서 2014년에는 뮌헨의 유니폼을 입었고, 3년 뒤 현역 은퇴를 선언했다.</p>
</div>
<!--기사 하단 영역-->
<div>
<p><span style="font-weight: bold;">기사제공</span> oo스포츠</p>
<p>김oo 기자(kim@co.kr)</p>
</div>
</body>
</html>
결과)
해당 화면 div로 나눠서 만들어보기 실습
<!DOCTYPE html>
<html>
<head>
<title>스포츠 홈: 네이버 스포츠</title>
</head>
<body>
<div>
<h3>'러셀-AD 폭발 + 르브론 트리플-더블급 활약' LAL, 서부 선두 OKC에...</h3>
<h5>레이커스가 홈에서 완승을 거뒀다.LA 레이커스는 5일(이하 한국시간) LA 크립토닷컴 아레나에서 열린 2023-2024 NBA 정규시즌 오클라호마시티 썬더와..."</h6>
<h6>루키·NBA</h6>
</div>
<div>
<h3>'부상도 없는데… 김민재 왜 벤치? ' 누구도 예상 못한 투헬 파격 결정, 현실로 이뤄지나</h3>
<p>[스타뉴스 | 이원희 기자] 팀 훈련에 집중하는 김민재. /사진=바이에른 뮌헨 SNS토마스 투헬 바이에른 뮌헨 감독(왼쪽). /AFPBBNews=뉴스1�..."</p>
<p>스타뉴스·분데스리가</p>
</div>
<div>
<h3>'두 집 살림'에 올림픽대표팀도 임시 코치 등장…'황선홍 없는' 황선홍호, 3월 사우디 대회 참가</h3>
<h5>대한민국 올릭픽 축구대표팀은 3월 18일부터 26일까지 사우디아라비아 담맘에서 열리는 서아시아축구연맹 23세 이하 챔피언십에 초청돼 참가한다. 이때 황선홍 ..."</h5>
<h6>엑스포츠뉴스·대표팀</h6>
</div>
<div>
<h3>어제는 홈런, 오늘은 2루타, 김하성의 장타쇼… 이정후는 5G 연속 안타</h3>
<h5>샌디에이고 파드리스 김하성. AP=연합뉴스 샌디에이고 파드리스 김하성(28)이 이틀 연속 장타를 터트렸다. 이정후는 5경기 연속 안타를 기록했다. 김하성은 ..."</h5>
<h6>중앙일보·메이저리그</h6>
</div>
<div>
<h3>류현진 쳐다보지도 않더니…토론토 1466억원 에이스도 류현진 바라기도 '이게' 안 좋아 '찜찜하네'</h3>
<h5>토론토 블루제이스 케빈 가우스먼./게티이미지코리아[마이데일리 = 김진성 기자] “갑자기 이런 현상이 나타났다.”토론토 블루제이스는 2023-2024 FA 시..."
</h5>
<h6>마이데일리·메이저리그</h6>
</div>
</body>
</html>결과)
List
- 목록을 만들때 유용. 메뉴 네비게이션을 만들때 유용 (css의 도움이 필요함)
List의 종류
1. ol : ordered List → 순번이 있는 리스트를 만들고 싶을때 사용
- li (List item)
- li (List item)
- li (List item)
2. ul : Unordered List
- li (List item)
- li (List item)
- li (List item)
<div>
<h1>OL (ordered List)</h1>
<ol>
<li>[4대금융 주총 체크포인트]①큰 변화 없는 KB</li>
<li>"이젠 순대까지"…신세계푸드, 고기보다 나은 '대안..</li>
<li>컬리는 왜 '테크 인력' 대규모 채용에 나섰나</li>
<li>출범 앞둔 포스코 장인화호…국민연금 제동, 순항 변수..</li>
</ol>
</div>
<div>
<h1>UL (UnOrdered List)</h1>
<ul>
<li>[4대금융 주총 체크포인트]①큰 변화 없는 KB</li>
<li>"이젠 순대까지"…신세계푸드, 고기보다 나은 '대안..</li>
<li>컬리는 왜 '테크 인력' 대규모 채용에 나섰나</li>
<li>출범 앞둔 포스코 장인화호…국민연금 제동, 순항 변수..</li>
</ul>
</div>결과)
Anchor
- 링크 걸어줄때, 책갈피기능 만들때 사용
- 브라우저에서 보일때 파란색 밑줄 : 아직 방문 안한 링크, 보라색밑줄 : 방문한적있는 링크
- 웹페이지에서 제일위로/아래로 가기 기능에 많이 사용됨
<!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는 Division의 약자입니다.</p>
<p>브라우저 화면의 영역을 분할하는 기능을 합니다.</p>
<a href="#top">위로가기</a>
</div>
<div>
<h1 id = "p">P Tag</h1>
<p>P는 Paragraph의 약자입니다.</p>
<p>문장이나 문단을 표현할 떄 사용하면 좋습니다.</p>
<a href="#top">위로가기</a>
</div>
<div>
<h1 id = "list">List</h1>
<p>표현방식에따라 ol, ul로 구분됩니다.</p>
<p>리스트 아이템은 li태그로 작성합니다.</p>
<a href="#top">위로가기</a>
</div>
<div id = "bottom"></div>
</body>
</html>
table
- tr : 테이블의 row
- th : 테이블의 제목 칸
- td : 테이블의 칸
- 테이블 규칙 : 테이블의 첫번째 row(head)가 3칸(3개의열)이라면 -> 내용(body)도 3칸(3개의열)이어야함
<!DOCTYPE html>
<html>
<head>
<title>Table 실습</title>
</head>
<body>
<table>
<!-- <thead> = title 영역을 표현하는 요즘 방법 -->
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<!-- <tbody> = 본문 영역을 표현하는 요즘 방법 -->
<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>
</html>