본문 바로가기
⭐ 코딩 기초/HTML, CSS

🖼️ 이미지와 링크를 다는 HTML 태그들!

by 뒬탕 2022. 9. 20.
반응형

⭐ HTML에서 이미지 달기

img 태그 기본

<img src="경로" alt="대체 텍스트" width="250" height="250">
  • img 태그를 이용하여 이미지를 단다
  • src 속성에 이미지 경로를 입력한다. 서버에서 불러오거나 아님 웹에서 불러오거나?
  • alt 속성으로 대체 텍스트를 입력해준다. 구글 SEO나 웹 접근성을 위해 필요하다.

 

<figure> <figcaption> - 이미지에 설명 붙이기

<!-- 표에서 하던거랑 똑같다! -->
<figure>
  <img src="경로">
  <figcaption>설명</figcaption>
</figure>
  • 표에서 하던 것과 똑같다!
  • figure 태그로 감싼 후 figcaption 태그 안에 설명을 적는다.

 

⭐ HTML에서 링크 달기

a 태그 기본

<a href="링크할 주소" [속성="속성값"]>텍스트</a>
<a href="링크할 주소"><img src="이미지 파일 경로"></a>
  • a 태그로 링크나 이미지를 감싸 링크로 만든다.
  • href는 hypertext reference의 약자, 링크할 주소를 넣는다.

속성의 종류

속성 이름 뜻
href 링크한 문서나 사이트의 주소를 입력한다
target 링크한 내용이 표시될 위치(현재 창 또는 새 창)을 지정한다
download 링크한 내용을 보여주는 것이 아니라 다운로드한다
rel 현재 문서와 링크한 문서의 관계를 알려준다
herflang 링크한 문서의 언어를 지정한다
type 링크한 문서의 파일 유형을 알려준다.

target : _blank(새창), _self(링크있는 화면), _parent(부모프레임), _top(프레임 벗어나 전체화면)

 

한 페이지 안에서 점프하는 앵커 만들기

<태그 id="앵커이름"> 내용 </태그>
<a href="#앵커이름"> 내용 </a>
  • 앵커하고 싶은 곳의 id를 지정해준다.
  • 그 후 링크의 href 값을 "#id 값"으로 지정해주면 된다.
  • 🐍 목차나 맨 위로가기를 만들 때 유용하다.
  • 다른 사이트에서 불러 올 때도 "http://주소#id"라고 입력해주면 된다.

 

<map>, <area>, usemap 속성 : 이미지 일부에 링크 걸기!

<map name="맵이름">
  <area shape="rect" coords="0,0,10,10" href="https://programming4myself.tistory.com/" alt="내블로그">
  <area>
</map>
 
<img src="링크" usemap="#맵이름">

 

이미지 맵 : 하나의 이미지에 여러 개의 링크를 걸 수 있다. 한 이미지 상에서 클릭 위치에 따라 서로 다른 링크가 열린다.

속성의 종류

속성 이름 설명 속성값
alt 대체 텍스트 지정  
coords 영역의 시작좌표, 끝좌표  
download 클릭시 다운로드  
media 링크 문서 어떤 미디어에 최적화 시킬지  
rel 현재 문서, 링크 문서 사이의 관계를 지정 ltername, bookmark, help, license, next, nofollow, norefer, prefetch, prev, serch, tag
shape 영역 형태 지정 default, rect, circle, poly
target 링크 표시할 대상 지정 _blank, _parent, _self, _top, 프레임 이름
type 미디어 유형 지정  

 

🐍 HTML에서 SVG 이미지 달기

SVG 이미지란?

  • 벡터 이미지, 확대해도 안 깨짐
  • d3.js나 Raphael.js에서 구경하자
  • <img>로 삽입할 수도 있지만 태그를 이용해 직접 만들 수도 있다.

* 나중에 SVG 관련 사이트 정리해놓자

 

SVG 이미지 넣기

지원하는 브라우저에서

<img src="xxx.svg">

일반 이미지를 넣는 방식과 같다.

 

지원하지 않는 브라우저에서

modernizr.com에서 브라우저에서 특정 기능을 지원하는지 여부를 테스트해주는 툴 js 다운받아준 후

<head>
  <meta charset="utf-8">
  <title>Insert SVG</title>
  <!-- 불러옴 -->
  <script src="modernizr-custom.js"></script>
</head>
<body>
  <img src="이미지 주소">
  <script>
    if (!Modernizr.svg){
      $("img").attr("src", "이미지 주소");
    }
  </script>
</body>

이렇게 스크립트를 불러와주면 된다.

반응형
저작자표시 비영리 변경금지

'⭐ 코딩 기초 > HTML, CSS' 카테고리의 다른 글

🎨 CSS 적용 방법 3가지!  (0) 2022.09.21
🎨 CSS 기본 개념, 문법 구조 초간단 요약!  (1) 2022.09.21
📝 표를 만드는 HTML 태그들!  (0) 2022.09.20
📝 목록을 만드는 HTML 태그들!  (0) 2022.09.18
📝 텍스트를 표현하는 HTML 태그들!  (1) 2022.09.18

관련글

댓글

티스토리툴바