[HTML] 이미지와 하이퍼링크 정리+연습

Do it! HTML5 + CSS 03장 복습

 

1. 이미지

웹에서 사용할 수 있는 이미지 파일 형식 : GIF, JPG/JPEG, PNG<img src="경로" [속성="값]>

공유할 때 이미지파일 폴더도 함께 전달해야 함

src 속성 : 이미지 파일 경로 지정 "(하위폴더/)이름.jpg" 또는 "이미지주소"alt 속성 : 이미지를 설명해주는 대체 텍스트(시각장애인)width, height 속성 : 이미지 크기 조절<figure> : 이미지에 설명 글 붙일 대상 지정(<img> ~ <figcaption> 묶기)<figcaption> : 설명 글 붙이기

 

 

 

2. 링크

- <a href="링크할 주소" [속성="속성 값]>

href 속성 : 링크 문서 또는 주소 입력

target 속성 : 표시될 위치

-> (기본)현재 창_self  새창 _blank 부모 프레임에 표시 _parent 프레임 벗어나 전체 화면에 표시 _top

download 속성 : 링크 내용 다운로드

rel : 현재 문서와 링크 문서의 관계

hreflang : 링크 문서 언어 지정

type : 링크 문서 파일 유형

</a> 닫기 전에 <img> 넣으면 이미지 링크를 만들 수 있음

 

앵커 : 한 페이지 내에서 한 번에 그 위치로 이동

<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그> -> 이동하고 싶은 위치에

<a href="#앵커 이름"> 텍스트 또는 이미지 </a>  -> 앵커

 

<map> 하나의 이미지에 여러 링크 걸기 (설명 생략)

 

3. SVG 이미지

기존 웹에서 사용하는 이미지는 비트맵 이미지라 확대하면 테두리가 깨짐

SVG 파일 형식은 벡터 이미지라 크기 조정해도 그대로 유지됨

로고, 아이콘, 차트, 다이어그램, 지도 등에 사용됨

 

4. 실습

프란츠 리스트 설명 페이지 만들기

메인 페이지에서 리스트 누르면 연결되게 링크 설정하기

 

<프란츠 리스트>

 

2023. 08. 06. 작업물