-
HTML 기본 태그프론트엔드 프로그래밍/HTML 2022. 1. 26. 11:37
기본 태그
- HTML 문서 구조 태그
- 텍스트 관련 태그
- 하이퍼링크 태그
- 목록 태그
- 테이블 테그
- 이미지 / 이미지 맵 태그
- 문서 삽입 태그
- 오디오 / 비디오 태그
- 입력 양식 태그
- 공간 분할 태그
- HTML5 시멘틱 구조 태그
문서 구조 태그
- <html></html>
- <head></head>
- <body></body>
<html> 태그
- <html></html>
- 문서의 시작과 끝 표시
- 크게 두 부분으로 구성되어 있음
- <head></head>
- <body></body>
<head> 태그 및 포함되는 태그들
- 웹 브라우저 화면에는 보이지 않지만
- 웹 브라우저가 알아두어야 할 문서 정보 포함
- <meta> 태그
- 문자 인코딩, 문서 키ㅁ워드, 문서 정보 등
- <meta charset="UTF-8">
- <link> 태그
- 외부 리소스 연결
- <link rel="stylsheet" href="myCss.css">
- <title></title> : 문서 제목
- <script></script> : 자바스크립트 코드 삽입
<body> 태그
- <body></body>
- 문서의 몸통 부분
- 실제 화면에 보이는 문서 내용 포함
- 대부분의 태그가 <body>와 </body> 사이에 위치
- 종료 태그 </body> 뒤에 다른 태그를 위치시키지 않음
줄 바꿈 / 공백 문자 사용하지 않는 경우
- 줄 안 바뀌고
- 스페이스 안 생김
- 스페이스는 기본 1개
- 줄 바꿈 태그 : <br>
- 공백 (스페이스) : (1개가 스페이스 1개) (여러 개 사용)
주의!
- HTML 작성 및 내용 변경 후 반드시 다시 저장
- 단축키 : Ctrl + S
텍스트 관련 태그
- 제목 : <hn></hn> (예: <h1></h1>)
- 본문 : <p></p>
- 텍스트 형태 (장식 효과>
- <b><i><strong><em>
- 앵커 태그 : <a></a> (텍스트 클릭할 때 이동)
<hn> 태그
- <h1>제목 출력. 크기1</h1>
- Headline의 약어
- 제목으로 사용
- 줄바꿈으로 출력
- 크기는 1~6 : 1 < 6
- h.html
<p> 태그
- <p></>
- 문단을 나누는 태그 (paragraph)
- 새로 줄바꿔서 시작
- <br> 태그를 2번 사용한 만큼의 간격
- <p> 태그를 여러 번 연속적으로 사용해도 행 간격이 더 이상 벌어지지 않음
<br> 태그
- 줄 바꿈 태그
- 여러 줄을 바꾸려면 여러 개 사용
- <br><br><br>
<hr> 태그
- <hr>
- <hr></hr>
- 수평 줄 표시
- h.html
주석 처리
- <!-- -->
- h.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h1>제목 표시 (크기1)</h1> <h2>제목 표시 (크기2)</h2> <h3>제목 표시 (크기3)</h3> <hr> <h4>제목 표시 (크기4)</h4> <h5>제목 표시 (크기5)</h5> <h6>제목 표시 (크기6)</h6> <!-- html 주석 표시 입니다 --> <!-- 여러 줄을 주석 처리하는 방법입니다 --> </body> </html>
텍스트에 장식 효과를 주는 태그
- text.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>텍스트 관련 태그</title> </head> <body> <h3>h3 : 텍스트에 장식 효과를 주는 태그들</h3> <b>b : 굵은 표시 (텍스트 강조)</b><br> <em>em : 텍스트 강조</em><br> <i>i : 이탤릭체 (텍스트 강조)</i><br> 텍스트<sub>sub : 아래 첨자</sub> </body> </html>
<pre> 태그
- 입력한 형태 그대로 출력
- pre.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>pre 태그</title> </head> <body> <pre> 입력한 형식 그대로 출력 작성한 대로 보여주기 시작은 여기 부터 public void sum(int x, int y){ int sum = x + y } </pre> </body> </html>
<span> 태그
- <span></span>
- 줄바꿈 없이 영역 묶기
- 태그 그 자체로는 아무 의미가 없지만
- 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어서 스타일을 적용하려고 할 때 주로 사용
- 대한민국 <span>서울</span>
하이퍼링크 태그
- 하이퍼링크로 문서를 연결하는 <a> 태그 (앵커 태그)
- 원하는 문서나 사이트로 연결
- 한 문서 내 다른 영역으로 이동 (한 페이지 안에서 지정된 영역으로 이동)
- <a href="파일 경로" target="연결된 문서가 보여줄 위치(프레임영역)">
- 사이트로 이동 : <a href="http://www.naver.com">
- 다른 문서로 이동 : <a href="newMember.html">
- 문서 내 다른 영역으로 이동 : <a href="#jQuery">id가 jQuery인 영역으로 이동</a>
- …..
- <h3 id="jQuery">
- target
- 하이퍼링크의 대상인 문서를어디에서 보여줄지를 지정
- _blank : 새 창에서 출력
- iFrame 이름
- hyperLink.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>하이퍼링크 : a 태그</title> </head> <body> <h3>사이트로 이동</h3> <a href="http://www.naver.com"> 네이버 사이트로 이동</a> <hr> <h3>다른 문서로 이동</h3> <a href="HelloWorld.html">Hello 페이지로 이동</a> <a href="join.html"> 회원 가입</a> <hr> <h3>문서 내 다른 영역으로 이동</h3> <a href="#JavaScript">id가 JavaScript인 영역으로 이동</a><br> <a href="#jQuery">id가 jQuery인 영역으로 이동</a><br> <a href="#css">id가 css인 영역으로 이동</a><br> <hr> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <h3 id="JavaScript">자바스크립트</h3> <p>웹 페이지를 향상시키고 동적인 화면을 구현하기 위해 사용되는 스크립트 언어</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <h3 id="jQuery">jQuery</h3> <p>자바스크립트 작업을 쉽고 빠르게 처리할 수 있도록 도와주는 자바스크립트 라이브러리</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <h3 id="css">css</h3> <p>Cascading Style Sheet : 속성을 이용해 웹 디자인 요소를 제어하는 기능 제공</p> </body> </html>
목록 태그
- 기본 목록 : <ul> <ol> <li>
- 정의 목록 : <dl> <dt> <dd>
기본 목록 태그
- list.html
순서가 없는 목록(Unordered List) <ul> 태그 속성
순서가 있는 목록(Ordered List) 태그 속성
목록 태그 중첩 사용
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>목록 태그 (list)</title> </head> <body> <h3>순서가 없는 목록 (Unordered List)</h3> <ul type="disc"> <li>JavaScript / jQuery</li> <li>웹 프로그래밍</li> <li>인터넷프로그래밍</li> <li>데이터베이스</li> </ul> <ul type="circle"> <li>포도</li> <li>복숭아</li> <li>수박</li> <li>딸기</li> </ul> <ul type="square"> <li>강아지</li> <li>고양이</li> <li>이구아나</li> <li>고슴도치</li> </ul> <h3>순서가 있는 목록 (ordered List)</h3> <hr> <ol type="1"> <li>컴퓨터학과</li> <li>경영학과</li> <li>수학과</li> <li>영어과</li> </ol> <ol type="1" reversed> <li>컴퓨터학과</li> <li>경영학과</li> <li>수학과</li> <li>영어과</li> </ol> <ol type="A"> <li>포도</li> <li>복숭아</li> <li>수박</li> <li>딸기</li> </ol> <ol type="i" start="2"> <li>강아지</li> <li>고양이</li> <li>이구아나</li> <li>고슴도치</li> </ol> </body> </html>
목록 태그 연습 문제
<!-- ul 순서없음, ol 순서있음, li 항목 태그 2021.12.02 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>목록 태그 중첩 사용</title> </head> <body> <h2>목록 태그 사용하기</h2> <ul> <li>프로그래밍</li> <ul type = "circle"> <li>웹 프로그래밍</li> <ol> <li>JSP/SERVLET</li> <li>HTML/JavaScript/JQUERY</li> </ol> <li>모바일 프로그래밍</li> <ol> <li>JAVA</li> <li>안드로이드</li> </ol> </ul> <!-- --------주석 구분----------- --> <li>웹 및 모바일 디자인</li> <ol> <li>포토샵</li> <li>Illustrator</li> <li>HTML5/CSS3</li> </ol> <!-- ----------주석 구분 --------- --> <li>DB</li> <ol> <li>MYSQL</li> <li>MY SQL Server</li> <li>Oracle</li> </ol> </ul> </body> </html>테이블 태그
table.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>table 태그</title> <style> td { width:100px;} </style> </head> <body> <table border="1"> <caption>테이블1</caption> <thead align="center"> <tr><th>a</th><th>b</th><th>c</th><th>d</th></tr> <tr><td rowspan="3">a1</td><td>b1</td><td>c1</td><td>d1</td></tr> <tr><td>b2</td><td>c2</td><td>d2</td></tr> <tr><td>b3</td><td>c3</td><td>d3</td></tr> <tr><td colspan="4">a4</td></tr> </thead> </table> <br><br> <table border="1"> <caption>테이블2</caption> <thead align="center"> <tr><th>a</th><th>b</th><th>c</th><th>d</th></tr> <tr><td rowspan="4">a1</td><td colspan="3">b1</td></tr> <tr><td>b2</td><td>c2</td><td>d2</td></tr> <tr><td rowspan="2">b3</td><td>c3</td><td rowspan="2">d3</td></tr> <tr><td>c4</td></tr> </thead> </table> </body> </html>이미지 태그
- <img> 태그
- 인라인 태그로 이미지 바로 옆에 다른 요소가 나란히 배치
- 여러 개의 <img> 태그를 사용하면 계속해서 오른쪽에 표시
- <img> 태그 속성
이미지 + 테이블 연습문제
이미지 파일 경로
- HTML 파일과 같은 폴더에 있는 경우
- 이미지 파일명만 적으면 됨
- <img src=”사진.jpg”>
- 하위 폴더에 있는 경우
- 폴더명/이미지 파일명
- <img src=”images/사진.jpg”>
- html 폴더와 동격의 다른 폴더에 있는 경우
- ../폴더명/이미지 파일명
- <img src=”../images/사진.jpg”>
이미지 맵
- 하나의 이미지에 여러 개의 링크를 만들어 놓고
- 각 영역마다 다른 링크 연결
- <img> 태그의 usemap 속성
- 이미지 맵 지정
- 사용 방법
- <map> 태그를 이용해 이미지 맵을 만들고
- <img> 태그의 usemap 속성으로 이미지 맵 지정
- imageMap.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>이미지 맵</title> </head> <body> <div id="wrap"> <img src="image/메인.png" border="1" usemap="#cityMap"> <map name="cityMap"> <area shape="rect" coords = "60, 90, 250, 150" href="뉴욕.html"> <area shape="rect" coords = "310, 90, 500, 150" href="파리.html"> <area shape="rect" coords = "560, 90, 750, 150" href="로마.html"> <area shape="rect" coords = "810, 90, 1000, 150" href="베이징.html"> </map> </div> </body> </html>문서 삽입 태그 : <iFrame> 태그
<iframe> 태그
- 현재의 html 문서 내에 다른 문서 포함
- <iframe> 태그 만들어서 영역 만들어 놓고
- iframe의 위치 설정 중요 : css로 크기, 위치 등 속성 설정
- <map>의 <area>에서 target=”iframe이름” 지정
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>iframe 태그</title> <style> #bigBox { margin:0 auto; width:1024px;} #box2 { position:absolute; margin-left:250px; top:270px;} iframe {width:580px; height:480px; border:none;} </style> </head> <body> <div id="bigBox"> <div id="box1"> <img src="image/메인.png" border="1" usemap="#cityMap"> <map name="cityMap"> <area shape="rect" coords = "60, 90, 250, 150" href="뉴욕.html" target="iFrameArea"> <area shape="rect" coords = "310, 90, 500, 150" href="파리.html" target="iFrameArea"> <area shape="rect" coords = "560, 90, 750, 150" href="로마.html" target="iFrameArea"> <area shape="rect" coords = "810, 90, 1000, 150" href="베이징.html" target="iFrameArea"> </map> </div> <div id="box2"> <iframe name="iFrameArea"></iframe> </div> </div> </body> </html>오디오 태그 : <audio>
- 오디오 파일 재생
- <audio> 태그 속성
- src : 오디오 파일 경로
- preload : 재생하기 전에 오디오 파일을 모두 다운로드
- autoplay : 자동 재생
- loop : 반복 재생
- controls : 재생 도구 출력
- <audio src=”audio.mp3” preload=”auto” controls loop>
- <source> 태그
- 미디어 파일 지정
- 여러 미디어 파일을 한꺼번에 지정
- 브라우저에 따라 지원하는 오디오 코덱이나 비디오 코덱이 다르기 때문에
- 한 가지 파일만 사용했을 경우 일부 브라우저에서 지원하지 않는 경우 발생
- 따라서 여러 유형의 미디어 파일 지정
- <audio>
- <source src=”a.ogg” type=”audio/ogg”>
- <source src=”a.mp3” type=”audio/mpec”>
- </audIo>
- audio.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>오디오 태그</title> </head> <body> <div> <audio src="media/audio.mp3" preload="auto" controls loop></audio> </div> </body> </html>비디오 태그 : <video> 태그
- 비디오 파일 재생
- mp4, ogv, webm 파일 형식
- 속성 : src, preload, autoplay, loop, controls, poster
- poster : 비디오 준비 중일 때의 이미지 파일 경로 지정
<track> 태그
- 자막 표시
- WebVTT 형식 파일 (.vtt)
- Web Video Text Tracks
video.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>비디오 태그</title> </head> <body> <div> <video poster="media/poster.jpg" width="640" height="360" controls> <source src="media/Wildlife.mp4" type="video/mp4"></source> <track src="media/track.vtt" kind="captions" srclang="ko" label="Korean"></track> <track src="media/track2.vtt" kind="captions" srclang="eng" label="English"></track> <track src="media/track2.vtt" kind="captions" srclang="chn" label="Chinese"></track> <track src="media/track2.vtt" kind="captions" srclang="jp" label="Japanese"></track> </video> </div> </body> </html>'프론트엔드 프로그래밍 > HTML' 카테고리의 다른 글
HTML5 시멘틱 구조 태그 (0) 2022.01.26 공간 분할 태그 (0) 2022.01.26 입력 양식 태그 <form>, <label>, <input> ... (0) 2022.01.26 HTML 문서 구조 (0) 2022.01.26 HTML이란 + 태그에 대해 (0) 2022.01.26