🐧anchor 태그
◈ a 태그의 href 속성값으로 URL 주소를 설정하면 클릭 이벤트에 의해 페이지 이동
→ URL 주소 뒤에 # 기호를 사용하여 태그 식별자를 설정하면 해당 식별자의 태그로 출력위치 이동 - 앵커
📌앵커(Anchor) : 출력 페이지의 특정 위치로 스크롤을 이동하는 기능
형식) URL#ID - 동일한 웹문서에서 위치만 이동할 경우 URL 주소는 생략 가능
🌠id 속성 : 태그를 구분하기 위한 식별자(고유값)를 속성값으로 설정
<h3 id="product">제품소개</h3> <h3 id="review">구매후기</h3> <h3 id="message">주의사항</h3>
📃08_anchor.html
<!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> <a href="#top">[처음으로]</a> <hr> <h3 id="review">구매후기</h3> <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> <a href="#top">[처음으로]</a> </body> </html>
🐧map 태그
📌map 태그 : 이미지 영역에 대한 하이퍼 링크 기능을 설정하기 위한 태그
→ 하위태그 : area
🌠name 속성 : 태그의 이름을 속성값으로 설정 - 태그의 이름은 중복 가능
<map name="favorites">
🌠usemap 속성 : map 태그의 이름을 속성값으로 설정
→ usemap 속성값에 # 을 붙여 태그 표현
<img alt="이미지 링크" src="/web/html/image/map.png" usemap="#favorites">
📌area 태그 : 이미지 영역의 범위를 설정하기 위한 태그
🌠shape 속성 : 영역의 범위를 설정하기 위한 모양을 속성값으로 설정
→ 속성값 : rect(기본), circle, poly 등
🌠coords 속성 : 영영 모양의 범위를 설정하기 위한 좌표값을 속성값으로 설정
<area alt="트위터" shape="rect" coords="0,0,128,117" href="https://twitter.com" target="_blank"> <area alt="페이스북" shape="rect" coords="129,0,249,117" href="https://facebook.com" target="_blank">
📃09_map.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>map 태그</h1> <hr> <!-- usemap 속성 : map 태그의 이름을 속성값으로 설정 --> <!-- → usemap 속성값에 # 을 붙여 태그 표현 --> <img alt="이미지 링크" src="/web/html/image/map.png" usemap="#favorites"> <!-- map 태그 : 이미지 영역에 대한 하이퍼 링크 기능을 설정하기 위한 태그 --> <!-- → 하위태그 : area --> <!-- name 속성 : 태그의 이름을 속성값으로 설정 - 태그의 이름은 중복 가능 --> <map name="favorites"> <!-- area 태그 : 이미지 영역의 범위를 설정하기 위한 태그 --> <!-- shape 속성 : 영역의 범위를 설정하기 위한 모양을 속성값으로 설정 --> <!-- → 속성값 : rect(기본), circle, poly 등 --> <!-- coords 속성 : 영영 모양의 범위를 설정하기 위한 좌표값을 속성값으로 설정 --> <area alt="트위터" shape="rect" coords="0,0,128,117" href="https://twitter.com" target="_blank"> <area alt="페이스북" shape="rect" coords="129,0,249,117" href="https://facebook.com" target="_blank"> </map> </body> </html>
※ 이미지 클릭시 각 사이트로 이동
🐧iframe 태그
📌iframe 태그 : 브라우저에 내장 브라우저를 생성하여 다른 웹문서를 출력하기 위한 기능을 제공하는 태그
🌠src 속성 : 내장 브라우저로 요청할 웹프로그램(웹문서)의 URL 주소를 속성값으로 설정
🌠width 속성 : 박스모델의 폭을 속성값으로 설정
🌠height 속성 : 박스모델의 높이를 속성값으로 설정
<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_iframe.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>iframe 태그</h1> <hr> <!-- iframe 태그 : 브라우저에 내장 브라우저를 생성하여 다른 웹문서를 출력하기 위한 기능을 제공하는 태그 --> <!-- src 속성 : 내장 브라우저로 요청할 웹프로그램(웹문서)의 URL 주소를 속성값으로 설정 --> <!-- width 속성 : 박스모델의 폭을 속성값으로 설정 --> <!-- height 속성 : 박스모델의 높이를 속성값으로 설정 --> <!--<iframe src="https://www.daum.net" width="600" height="500"></iframe> <iframe src="https://www.naver.com" width="600" height="500"></iframe> --> <iframe src="10_left.html" width="600" height="500" name="left"></iframe> <iframe src="10_right.html" width="600" height="500" name="right"></iframe> </body> </html>
📃10_reft.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <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> </html>📃10_right.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>오른쪽 페이지</h1> <hr> </body> </html>
🐧details
📌details 태그 : 자세한 설명을 제공하기 위한 태그
→ 하위태그 : summary
🌠summary 태그 : 요약한 내용을 제공하기 위한 태그
<details> <summary>Hello</summary> <p>안녕하세요.</p> </details>
📃11_details.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>details 태그</h1> <hr> <!-- details 태그 : 자세한 설명을 제공하기 위한 태그 --> <!-- → 하위태그 : summary --> <details> <!-- summary 태그 : 요약한 내용을 제공하기 위한 태그 --> <summary>Hello</summary> <p>안녕하세요.</p> </details> <details> <summary>Good Bye</summary> <p>안녕히 가세요.</p> </details> </body> </html>
