반응형
⭐ 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 |
댓글