반응형
1. 하이퍼링크 태그
1) <a>
- 클릭 이벤트로 웹프로그램(웹문서)을 요청하기 위한 정보를 제공하는 태그
- 클릭 이벤트를 이용하여 페이지 이동을 위해 사용 - 하이퍼 링크(Hyper Link) 기능
- a 태그의 내용( 텍스트 또는 이미지 )을 클릭한 경우
- 웹브라우저 주소창의 URL 주소가 href 속성값으로 변경되고,
- URL 주소의 웹프로그램(웹문서)을 실행하여 응답결과를 제공받아 출력 - 페이지 이동
target 속성
- 웹자원을 요청하는 브라우저를 속성값으로 설정
- 속성값
- _self (현재 브라우저 - 기본)
- blank (새로운 브라우저)
- _top (최상위 브라우저)
- _parent (부모 브라우저)
- _child (자식 브라우저)
- iframe 태그의 name 속성값 (내장 브라우저) 등
특징1. 값 전달
- 요청 URL 주소에 값 전달 함께 가능
- 웹프로그램에게 값 전달 가능
- 질의문자열(QueryString)을 이용한 값 전달
- 요청 URL 주소에 뒤에 ? 기호를 붙이고 이름=값&이름=값&... 형식으로 요청
특징2. 앵커기능#
- <a>의 앵커(Anchor) 기능 : 출력 페이지에서 특정 위치로 스크롤되는 기능
- a 태그의 href 속성값으로 URL 주소를 설정하면 클릭 이벤트에 의해 페이지로 이동
- URL 주소 뒤에 # 기호를 사용하여 태그 식별자를 설정하면 해당 식별자의 태그로 출력위치 이동
- 형식
<!-- 동일한 웹문서 : 동일한 웹문서에서 위치만 이동할 경우는 URL 주소 생략 가능 -->
<a href="#ID"></a>
<!-- 다른 웹문서 -->
<a href="URL#ID"></a>
2) a태그 사용 예시
태그의 내용 - 텍스트
- 텍스트 클릭 시 해당 URL 주소로 이동함
<a href="<https://www.daum.net>">다음</a>
<a href="<https://www.naver.com>">네이버</a>
<a href="<https://www.google.com>">구글</a>
a 태그의 내용 - 이미지1
- 이미지 클릭 시 해당 URL 주소로 이동함
<!--이미지의 절대경로표현-->
<a href="/web/html/07_kor.html?name=kim" target="_blank"><img alt="한글" src="/web/html/images/kor.png"></a>
<!--이미지의 상대경로표현-->
<a href="07_eng.html" target="_blank"><img alt="영어" src="images/eng.png"></a>
a 태그의 내용 - 이미지2
- a 태그를 이용하면 이미지에 링크 딱 하나만 연결 가능
- 클릭시 해당 URL로 이동
<a href="<https://twitter.com>" target="_blank">
<img alt="이미지링크" src="/web/html/images/map.png">
</a>a태그의 앵커(Anchor) 기능
- 클릭 시 동일한 웹문서의 특정 위치로 스크롤
- 스크롤에 상관없이 상단에 고정할 수도 있음!! (CSS 이용 혹은 JS 이용)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1 id="top">a 태그</h1>
<hr>
<!-- a 태그의 href 속성값으로 URL 주소를 설정하면 클릭 이벤트에 의해 페이지 이동 -->
<!-- => URL 주소 뒤에 # 기호를 사용하여 태그 식별자를 설정하면 해당 식별자의 태그로 출력위치 이동 - 앵커 -->
<!-- 앵커(Anchor) : 출력 페이지에서 특정 위치로 스크롤을 이동하는 기능 -->
<!-- => 형식) URL#ID - 동일한 웹문서에서 위치만 이동할 경우 URL 주소 생략 가능 -->
<a href="/web/html/08_anchor.html#product">제품소개</a>
<a href="08_anchor.html#review">구매후기</a>
<a href="#message">주의사항</a>
<hr>
<!-- id 속성 : 태그를 구분하기 위한 식별자(고유값)를 속성값으로 설정 -->
<h3 id="product">제품소개</h3>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<p>아주 좋은 제품입니다.</p>
<a href="#top">[처음으로]</a>
<hr>
<h3 id="review">구매후기</h3>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<p>아직 사용하지 않았지만 좋은 것 같아요.</p>
<a href="#top">[처음으로]</a>
<hr>
<h3 id="message">주의사항</h3>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<p>알아서 잘 사용하면 됩니다.</p>
<a href="#top">[처음으로]</a>
</body>
</html>
3) <map>
- 이미지 영역에 대한 하이퍼링크 기능을 설정하기 위한 태그
- 반드시 이미지 파일 이용하여 링크를 거는 태그
- 하나의 이미지 내 영역마다 다른 페이지를 이동시키려면 map태그 이용하기
- 과거에 팝업 창에서 제한된 공간 내에 링크를 걸기 위해 사용했음
- 현재 사용 잘 안함
usemap속성
- map 태그의 이름을 속성값으로 설정해서 이미지 영역에 대한 하이퍼링크 기능 제공받을 수 있음
- usemap 속성값에 #을 붙여 태그 표현
4) <area>
- 이미지 영역의 범위를 설정하기 위한 태그
name속성
- 태그의 이름을 속성값으로 설정
- 태그의 이름은 중복 가능
shape 속성
- 영역의 범위를 설정하기 위한 모양을 속성값으로 설정
- 속성값 : rect(기본) , circle , poly 등
coords 속성
- 영역 모양의 범위를 설정하기 위한 좌표값을 속성값으로 설정
5) map태그, area태그 사용 예시
- 클릭시 해당 URL로 각각 이동
<img alt="이미지링크" src="/web/html/images/map.png" usemap="#favorites">
<hr>
<!--사용자 눈에 보이지는 않지만 클릭 시 해당 URL로 이동하게 해줌-->
<map name="favorites">
<area alt="트위터" shape="rect" coords="0,0,128,117" href="<https://twitter.com>" target="_blank">
<area alt="페이스북" shape="rect" coords="129,0,248,127" href="<https://facebook.com>" target="_blank">
</map>
2. 기타 태그
1) <iframe>
- 브라우저에 내장 브라우저를 생성하여 다른 웹문서를 출력하기 위한 기능을 제공하는 태그
src속성
- 내장 브라우저로 요청할 웹프로그램(웹문서)의 URL 주소를 속성값으로 설정
- 내장브라우저로 요청 시 무조건 요청에 대한 결과를 다 주지는 않음
- ex) naver는 접속 거부
width속성
- 박스모델의 폭을 속성값으로 설정
height속성
- 박스모델의 높이를 속성값으로 설정
name속성 & target속성
- <iframe>의 name속성에 값을 주어, <a>의 taget속성을 이름명으로 변경 가능
<iframe> 예시 1
<!-- 10_iframe.html -->
<!-- daum은 접속 가능 -->
<iframe src="<https://www.daum.net>" width="600" height="500"></iframe>
<!-- naver는 접속 거부 -->
<iframe src="<https://www.naver.com>" width="600" height="500"></iframe
<iframe> 예시 2
- 클릭이벤트 시 내장브라우저에 출력됨
<!-- 10_iframe.html -->
<div>
<iframe name="view" width="500px" height="500px"></iframe>
</div>
<a href="<https://www.daum.net>" target="view">여기를 누르세요!!</a>
<iframe> 예시 3
- 클릭이벤트 시 내장브라우저의 오른쪽페이지에 출력됨
<!-- 10_iframe.html -->
<iframe src="10_left.html" width="600" height="500" name="left"></iframe>
<iframe src="10_right.html" width="600" height="500" name="right"></iframe>
<!-- 10_left.html -->
<body>
<h1>왼쪽 페이지</h1>
<hr>
<p><a href="<https://www.daum.net>" target="right">다음</a></p>
<p><a href="<https://www.apache.org>" target="right">아파치</a></p>
</body><!-- 10_right.html-->
<body>
<h1>오른쪽 페이지</h1>
<hr>
</body>
2) <details>
- 자세한 설명을 제공하기 위한 태그
하위태그
- <summary> : 요약한 내용을 제공하기 위한 태그
<details>
<summary>Hello</summary>
<p>안녕하세요.</p>
</details>
<details>
<summary>bye</summary>
<p>안녕히가세요.</p>
</details>
3) <meter>
- 값을 제공받아 백분율로 변환하여 이미지로 출력하기 위한 태그
vlaues 속성
- 태그의 저장값을 속성값으로 설정
max 속성
- 태그의 최대값을 속성값으로 설정
<h3>투표결과</h3>
<p>1번 후보 : 전체 100명 중 60명 선택</p>
<p>2번 후보 : 전체 100명 중 10명 선택</p>
<p>3번 후보 : 전체 100명 중 30명 선택</p>
<hr>
<p>1번 후보 : <meter value="60" max="100" style="width: 300px;"></meter></p>
<p>2번 후보 : <meter value="10" max="100" style="width: 300px;"></meter></p>
<p>3번 후보 : <meter value="30" max="100" style="width: 300px;"></meter></p>
4) <progress>
- 진행률을 이미지로 출력하기 위한 태그
- 동적인 페이지 구현 시 사용함 (자바스크림트와 함께)
<!-- 60중에 50이 지났다! -->
<p>남은 시간 : 10초 <progress value="50" max="60"></progress></p>
<!-- 100중에 30이 지났다! -->
<p>진행률 : 30% <progress value="30" max="100"></progress></p>
5) <button>
- 버튼을 출력하기 위한 태그
type속성
- button(일반) , submit(제출 - 기본) , reset(초기화) 중 하나를 속성값으로 설정
- button : 아무런 효과도 없음
- submit : form태그 이용 시에만 사용 , 제출이벤트가짐
- reset : form태그 이용 시에만 사용 , 초기화이벤트가짐
onXXX 속성
- 태그의 이벤트 속성으로 이벤트가 발생될 때 실행될 명령을 속성값으로 설정
onclick속성 - 클릭이벤트
- 클릭 이벤트 발생시 실행될 이벤트 처리 명령(Javascript)을 속성값으로 설정
<!-- 다운로드라는 함수를 호출해주세요!! -->
<button type="button" onclick="download();">다운로드</button>
<progress id="bar" value="0" max="100" style="width: 200px;"></progress>
<span id="message"></span>
//<!-- script 태그 : 스크립트 프로그램을 작성하는 영역을 제공하는 태그 -->
//<!-- type 속성 : 스크립크 프로그램 작성을 위한 파일형식(MimeType)를 속성값으로 설정 -->
<script type="text/javascript">
function download() {
//bar변수에 태그 담기
var bar=document.getElementById("bar");
//message변수에 태그 담기
var message=document.getElementById("message");
//loaded 변수에 초깃값 0 설정
var loaded=0;
//load() 함수는 5씩 증가해 출력하는 함수 - bar,message ,loaded 변수 이용
var load=function() {
loaded+=5; //loaded에 5씩 증가해 담기
bar.value=loaded;
message.innerHTML="진행률 = "+loaded+"%"; //비어 있는 메세지 태그에 동적인 값 함께 출력
if(loaded==100) { //만약 loaded 값이 100이면 dummyLoad 멈춰
clearInterval(dummyLoad);
}
}
//dummyLoad()함수는 0.5초마다 load()함수 호출됨
var dummyLoad=setInterval(function() {
load();
},500);
}
</script>
3. 문장강조 태그
1) <mark>
- 형광색을 이용하여 문장 강조하기 위한 태그
2) <strong>
- 굵게 출력
- (publishing) 객관적인 강조
- <b>
3) <em>
- 기울어져 출력
- (publishing) 주관적인 강조
- <i>
<p>
<strong>2022년 11월 09일 수요일</strong>입니다. 오늘 최고 기온은 영상 <mark>16°C</mark>입니다.
<em>오늘은 기분이 좋습니다.</em>
</p>
4. 인용문 출력 태그 - 저작권 문제 때문
1) <blockquote>
- 한 단락 인용
- 블럭 레벨 태그
cite 속성
- 인용문을 제공받은 웹문서의 URL 주소를 속성값으로 설정
<h3>HTML 이란?</h3>
<p>웹문서를 만드는 데에 이용되는 문서 형식으로, 웹 문서에서 문자나 영상, 음향 등의
정보를 연결해 주는 하이퍼텍스트를 만들 수 있도록 해 준다.</p>
<h3>HTML 이란?</h3>
<blockquote cite="<https://100.daum.net/encyclopedia/view/24XXXXX74664>">
웹문서를 만드는 데에 이용되는 문서 형식으로, 웹 문서에서 문자나 영상, 음향 등의
정보를 연결해 주는 하이퍼텍스트를 만들 수 있도록 해 준다.</blockquote>
2) <q>
- 한 단락 내 일부분만 인용
- 인라인 레벨 태그
- " " 표시되어 출력
<h3>웹접근성 이란?</h3>
<p>월드 와이드 웹(World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는
<q cite="<https://www.wah.or.kr:444/Accessibility/define.asp>">웹이란 '장애에 구애 없이
모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제작할
때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다</q>고 하였다.</p>
5. 멀티미디어 태그
1) <embed>
- 플래시 파일 재생 (과거에 많이 사용)
<embed src="">
2) <object>
- 멀티미디어 파일 재생 (소리파일, 동영상파일 - 단, 제한있음 몇가지만 재생 가능)
- 웹브라우저에 따라 재생할 수 있는 것들이 제한적!
<object></object>3) <audio>
- 웹서버에 저장된 소리파일을 전달받아 재생하는 태그
소리파일
- mp3파일 (라이엔스지불필요, 음질이 가장 좋음)
- ogg파일 (라이센스지불없음, 압축기술 누구든지 사용가능) 등
src속성 (필수)
- 소리파일의 URL 주소를 속성값으로 설정
autoplay속성
- 자동재생 , 속성값 생략 가능
- 크롬(webkit방식 - 브라우저 엔진 방식)에서는 속성 사용 불가능
- webkit방식 : 크롬, 사파리 .. 등등
- Gekko방식 : 파이어폭스 .. 등등
controls 속성
- 재생 관련 제어판 제공 , 속성값 생략 가능
loop 속성
- 반복재생 , 속성값 생략 가능
preload속성
- 아래 중 하나를 속성값으로 설정
- none: 웹문서가 전달,해석,파싱,렌더링할 때 -> 소리파일 다운 안받음
- matadata: 웹문서가 전달,해석,파싱,렌더링할 때 -> 소리파일에 대한 메타데이타만 다운
- auto(기본): 웹문서가 전달,해석,파싱,렌더링할 때 -> 소리파일도 미리 다운받아짐
<!-- 속성값 생략 가능 -->
<!-- <audio src="audio/horse.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio> -->
<audio src="audio/horse.mp3" autoplay controls loop preload="auto"></audio>
<!-- ogg: 크롬 가능하지만 인터넷익스플로러 불가능 -->
<audio src="audio/horse.ogg" autoplay controls loop preload="auto"></audio>
4) 크로스브라우징을 이용한 <audio> & <source>
- 크로스 브라우징 : 다양한 소리파일들을 여러개 만들어두어 어떤 브라우저에서든지 다 재생할 수 있도록 하는 기능
type속성
- 파일 형식(MimeType)을 속성값으로 설정
- 서버가 사용하는 MimeType을 모르면 overview에서 확인하기
<!-- <source> : 멀티미디어 파일을 제공하기 위한 태그 -->
<audio controls>
<source src="audio/horse.ogg" type="audio/ogg">//이 파일은 ogg타입이야
<source src="audio/horse.mp3" type="audio/mp3">//이 파일은 mp3타입이야
</audio>
5) <video>
- 웹서버에 저장된 동영상 파일을 전달받아 재생하는 태그
동영상파일
- mp4파일 , ogv파일 , webm(웹무비)파일 등
<video src="video/movie.mp4" controls width="600"></video>
<video src="video/movie.ogv" controls width="600"></video>
6) 크로스브라우징을 이용한 <video>& <source>
<video controls="controls" width="600">
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.ogv" type="video/ogv">
</video>
6. 이미지설명제공태그
1) <figure>
- 이미지에 대한 설명을 제공하기 위한 태그
하위태그
- <img>(1개 이상)
- <figcaption>(1개)
<figcaption>
- 이미지에 대한 설명을 출력하기 위한 태그
<figure>
<img alt="천혜향 2인실" src="images/che.png">
<figcaption>천혜향은 동성 2인실입니다.</figcaption>
</figure>
<figure>
<img alt="동백방 4인실" src="images/dong.png">
<img alt="유채방 4인실" src="images/yu.png">
<figcaption>동백방과 유채방은 4인실 동성 또는 가족 1팀이 묶을 수 있습니다.</figcaption>
</figure>
반응형
'web > html' 카테고리의 다른 글
| [css] 9. 뷰포트 (0) | 2024.05.22 |
|---|---|
| [html] 7. <a> VS <form> | 입력 폼 태그 (0) | 2024.04.29 |
| [html] 5. 시맨틱태그 | 텍스트태그 | entity | 박스태그 | 이미지태그 | 리스트태그 | 테이블태그 (0) | 2024.04.28 |
| [html] 4. 기본 태그 | head | body (1) | 2024.04.28 |
| [html] 3. 웹 통신 프로토콜 (HTTP/TCP/IP) (0) | 2024.04.27 |
