HTML 이미지 관련 태그

• <img> 태그 : 웹 문서에 이미지를 삽입할때 사용하는 태그
  • <img src="경로" width=숫자 height=숫자 alt="이미지파일"> 
  • src : 이미지 파일 경로 지정하기 
  • alt : 이미지를 설명해주는 대체 텍스트
  • width : 너비지정
  • height : 높이지정 
• <figure>,<figcaption> : 이미지에 설명 글 쓰는 태그
  • <figure> : 설명글을 붙일 대상 지정
  • <figcaption> : 설명 글 붙이기 

<figure> <img src="tea.jpeg" width=300 height=200 alter="가봉반과"> <figcaption>경주의 카페 '가봉반과'</figcaption> </figure>

• <a>, href : 링크 태그

<h1>텍스트링크</h1> <a href="https://salangdung.tistory.com/">사랑둥이 티스토리</a> <h1>이미지링크</h1> <a href="https://salangdung.tistory.com/"><img src="logo.jpeg" width="300" height="100"></a>

• target 속성
  • target="_blank" : 링크의 내용이 새창이나 새탭에서 열린다.
  • target="_self" : target의 속성의 기본 값으로 링크가 있는 화면에서 열린다.
  • target="_parent" : 프레임을 사용했을 떄 링크 내용을 부모 프레임에 표시한다.
  • target="_top" : 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체화면에 표시한다.
• 앵커(anchor) : 한 페이지내에서 링크를 이동하는 것 

<h1>노래별 가사 찾기 앵커</h1> <ul id="menu"> <li><a href="#content1">Autumn Breeze</a></li> <li><a href="#content2">To You</a></li> <li><a href="#content3">what2do </a></li> </ul> <h2 id="content1">Autumn Breeze</h2> <pre>It's like walking through the sky Where the stars come and go It's the light within my reach Not as distant as it seemed Dreams are moments, night is long Yet, we linger in the past Tell me, do you feel the same I can take you far, far away Far enough for us to disappear Should you feel a little scared, Know that I'm still right here It will be a little bittersweet It might even</pre> <p><a href="#menu">메뉴로</a></p> <h2 id="content2">To You</h2> <pre>그래, 헤어질 줄은 알았어 처음이란 이유로 부족한 게 많았겠지 나에겐 잊지 못할 기억인데 함께한 시간의 마지막이 겨우 그런 이유가 됐어 이렇게라도 네게 맘을 전하고 싶어 힘들긴 했지만 고마운 마음 뿐이라고 널 마주한 그 처음을 기억해 눈을 감고 떠올리면 아직도 내 맘이 설레와서 수 많은 밤 함께한 시간들이 너무 아련해서 떠올릴 수 없어도 기억할게 그래, 변명 하잔 건 아닌데 끝이 너무 쉬워서 하지 못한 말이 있어 너를 정말 사랑했었어 결국 헤어졌지만 다시 돌아가도 널 만나 사랑했을거야 널 마주한 그 처음을 기억해 눈을 감고 떠올리면 아직도 내 맘이 설레와서 수 많은 밤 함께한 시간들이 너무 아련해서 떠올릴 수 없어도</pre> <p><a href="#menu">메뉴로</a></p> <h2 id="content3">what2do </h2> <pre>하루가 지나도 울리지 않는 폰 이젠 이런 기다림이 더 익숙해진 걸 모래 시계처럼 쌓이는 한 숨과는 반대로 너에 대한 내 기대는 서서히 줄어들어 믿었었어 바빴다면서 어색한 핑계를 늘어놓는 널 봐도 몰랐었어 내심 알았는지도 그저 네가 변했다는 사실을 믿기 싫었을 뿐 Tell me what to do I don't know what to do Your love is just a memory Baby, it's your last time to give me your best try and to give your heart to me. 대체 왜 이래? 그만해 이제 이별 노래의 가사처럼 변해가는 너의 말 It seems like over to us 잦은 다툼 속 의미 없는 상처를 남기고 전부를 되돌리기엔 너무 늦은 듯 해 부질없어 전부를 쏟아도</pre> <p><a href="#menu">메뉴로</a></p> </body> </html>

• <map>, <area>,usemap : 이미지 맵 저장하기
• coords : 링크로 사용할 영역을 시작 좌표와 끝 좌표 이용해 지정

 <map name="insta"> <area shape="rect" coords="0,0,80,100" href="https://www.instagram.com/salangdung_i/" alt="사랑둥이인스타그램"> </map> <img src="salangdung_i.jpeg" width="100" height="100" usemap="#insta">

• (0,0) 에서 (80,100) 위치까지 사각 형태의 영역을 클릭했을때 인스타그램 주소로 이동한다.

참고 서적
http://m.yes24.com/Goods/Detail/85112155?pid=157529

Do it! HTML5+CSS3 웹 표준의 정석 - YES24

(Do it! HTML5+CSS3 웹표준의 정석, 이지스퍼블리징(주), 2017)을 학습하고 개인 학습용으로 정리한 내용입니다.

"Icon made by Pixel perfect from www.flaticon.com"