[HTML] HTML 이미지, 링크 표현

2022. 3. 4. 20:58· 프로그래밍언어/HTML
목차
  1. 1. 이미지 삽입
  2. 2. 하이퍼링크 삽입

HTML에서 그림과 링크 표현

  1. img 태그 관련 속성 활용
  2. a 태그를 다양한 유형의 콘텐츠에 활용

1. 이미지 삽입

img 태그는 웹 문서에 이미지를 삽입하고 시작태그만 사용한다.
<img>는 인라인 요소로 줄바꿈을 위해서는 <br>을 사용한다.

  • src="이미지파일경로" : 문서에 표시할 이미지 파일 경로 지정
    1. html문서와 동일 폴더에 있는 경우 : "파일명.확장자명"
    2. 절대경로의 경우 : "절대경로\파일명.확장자명"
    3. 상대경로의 경우 : "현재 작업 위치 기준 상대경로\파일명.확장자명"
    GIF JPG PNG
    • Graphics Interchange Format
    • 256개 색상 지원
    • 투명배경 처리 지원
    • 용량이 작음
    • 애니메이션 지원
    • 로고나 클립 아트 형태의 이미지에 적합
    • Joint Photographic coding Experts Groups
    • 트루컬러 지원
    • 압축률이 좋아 용량이 작음
    • 사진과 같은 이미지에 적합
    • Portable Network Graphics
    • 트루컬러 지원
    • 투명배경 처리 지원
    • 웹 전용 이미지 파일 : JPEG보다 훨씬 빠르게 화면상에 표시
    • 애니메이션 지원
    • 클립 아트 같은 적은 색상을 가진 이미지에 적합
  • width="숫자", height="숫자" : 이미지의 폭과 높이 지정(픽셀, %)
    1. % 단위를 사용하면 화면 크기 대비 상대적인 비율로 크기를 설정
    2. width나 height 중 하나의 크기만 지정시 나머지는 원본 크기에 비례해서 자동으로 설정
  • alt="내용" : 이미지가 안나올 때 대체 될 텍스트 지정
    1. 마우스를 사진 위에 올려놓아도 볼 수 있음
    2. 대체 텍스트를 여러 줄 작성하고 싶으면 특수문자 &#13;을 사용
  • usemap="#이름" : 클라이언트 측의 이미지맵을 지정

2. 하이퍼링크 삽입

하이퍼링크는 클릭을 통해 다른 곳으로 이동 할 수 있다.
<a> 태그('anchor')로 HTML문서에 하이퍼링크를 삽입 할 수 있다.
형식 : <a href="이동할 위치"> 추가 정보(텍스트/이미지) </a>

  • href="URL" : 이동하고자 하는 경로나 주소를 지정
    1. hyper reference
    2. 텍스트나 이미지에 마우스를 올리면 커서의 모양이 손모양으로 바뀐다.
    3. 방문하지 않은 링크는 밑줄 친 파란색
    4. 방문한 링크는 밑줄 친 보라색
    5. 활성화 된 링크는 밑줄 친 빨간색
    a 태그 사용 결과
    <a href="http://www.naver.com">네이버<a> 네이버
    <a href="http://www.naver.com" title="네이버">네이버<img src="그림경로"><a> 네이버
    <a href="사진파일명.jpg">클릭시 원본 크기<img src="사진파일명.jpg" width="50"><a> 클릭시 원본 크기
  • target="창의 이름" : 링크 클릭시 내용이 표시 될 창을 지정
    target 속성값 설명 결과
    _blank 새창으로 열기 네이버
    _self 현재창에서 열기 네이버
    _top 모든 프레임 사라지고 하나의 화면에서 열기  
    _parent 부모 프레임에서 열기  
    프레임명 표시할 프레임의 이름을 직접 지정  
  • download : 링크 클릭시 다운로드하여 저장 된다.
    1. 속성값 생략시 원본 파일명으로 저장
    2. 다릉 이름으로 파일 저장하고 싶으면 속성값으로 지정
    3. 압축 파일이나 실행 파일의 경우 download 속성 없이도 파일 다운
    4. 사용 결과 : 클릭시 펭귄 다운
  • id : 특정 위치로 이동
    • 한 페이지의 내용이 길경우 id속성을 사용해 특정 위치로 이동 시킨다.
    • <a href="페이지경로#이동 할 특정 id명">내용</a>이미지 삽입으로 이동
    • <a href="#top">맨위로</a>맨 위로 이동
  • 다양한 링크 설정
    1. 이메일 링크 : <a href="mailto:에메일주소">텍스트/이미지</a>
    2. 자바스크립트 링크 : <a href="javasxript:자바스크립트코드">텍스트/이미지</a>
    3. 다양한 파일(동영상, 음악, 압축 등) 링크 :<a href="파일명.확장자명">텍스트/이미지</a>

'프로그래밍언어 > HTML' 카테고리의 다른 글

[HTML] HTML 멀티미디어(오디오와 비디오)  (0) 2022.03.07
[HTML] HTML 테이블  (0) 2022.03.04
[HTML] HTML 텍스트 표현  (0) 2022.03.04
[HTML] HTML 개요  (0) 2022.03.04
[HTML] semantic 태그  (0) 2021.09.01
  1. 1. 이미지 삽입
  2. 2. 하이퍼링크 삽입
'프로그래밍언어/HTML' 카테고리의 다른 글
  • [HTML] HTML 멀티미디어(오디오와 비디오)
  • [HTML] HTML 테이블
  • [HTML] HTML 텍스트 표현
  • [HTML] HTML 개요
개발원슝이
개발원슝이
꾸준히 개발공부를 합니다.
개발원슝이
꾸준히 개발슝이
개발원슝이
전체
오늘
어제
  • ALL (236)
    • 프로젝트 (34)
      • clone coding (19)
      • mini project (5)
      • Team project(with KIC) (10)
    • 문제 (37)
      • 백준 (7)
      • 프로그래머스 (14)
      • 정보처리기사실기 (16)
    • 설치 (9)
    • 개발 기초 (12)
    • 프로그래밍언어 (120)
      • HTML (16)
      • CSS (17)
      • JavaScript (18)
      • JAVA (13)
      • JSP (10)
      • Python (22)
      • C언어 (24)
    • 프레임워크 (6)
      • Spring (3)
      • Django (3)
    • DB (2)
      • MySQL (2)
    • AWS (1)
    • 오류 (2)
    • 이것저것 (6)
    • 전공자 개발 (2)
    • 비전공자 개발 (5)

블로그 메뉴

  • 네이버블로그(강의노트)
  • GitHub
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 따배씨
  • 생활코딩
  • javascript
  • 코딩테스트
  • 인프런
  • 점프 투 파이썬
  • 백준
  • 파이썬공부
  • 홍정모의 따라하며 배우는 C언어
  • 홍정모교수님

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
개발원슝이
[HTML] HTML 이미지, 링크 표현
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.