TIL #5 - HTML 이미지, 링크

rosarang·2020년 12월 26일
0

HTML

목록 보기
3/6
post-thumbnail

이미지와 하이퍼링크

1. 이미지

이미지 형식

  • gif

    • 색상 수 최대 256가지
    • 다른 형식에 비해 파일 크기가 작아 작은 이미지에 주로 사용
    • 투명 배경이나 움직이는 이미지를 만들 수 있음
  • jpg/jpeg

    • gif보다 다양한 색상과 명암 표현 가능
  • png

    • 투명 배경 가능
    • 다양한 색상 표현 가능
    • 네트워크용으로 개발됨

<img> 태그

<img src="경로" [생략 가능한 속성="값"]>

  • scr 속성
    • 내 컴퓨터의 이미지 파일 경로
      <img src="images/lotus.jpg">
  • 웹 이미지 링크로 경로 지정
    • 이미지 주소 복사
    • 인터넷 익스플로러 - 마우스 우클릭>속성>주소 복사

alt 속성

<img src="" alt="이미지를 표현하는 단어"/>

  • 이미지 로딩 실패 시 설명할 단어로써 쓰인다.

  • 시각장애가 있는 사람들을 위해 이미지를 음성으로 설명해줄 경우 필요하다.

  • SEO에 노출되어 더 잘 검색될 수 있도록 한다.

width, height 속성

  • 조절하지 않으면 원본 크기로 나온다.

<figure>, <figcaption> 태그

<figure>
	<img src="경로" alt="설명글">
	<figcpation>설명글</figcpation>
</figure>
  • <figure>

    • 설명 글을 붙일 대상을 지정하거나 멀티미디어 파일, 이미지, 표, 소스 코드 등 웹문서에서 한 단위가 되는 요소를 묶을 때 사용한다.
  • <figcaption>

    • 설명 글을 감싸기 위한 태그
    • 여러 개의 이미지나 멀티미디어 파일을 묶어 하나의 설명 글을 표시할 수도 있다.



2. 링크

<a> 태그

<a href="링크 주소"> 텍스트 혹은 이미지 <img src=""> </a>
  • 속성

    • href - 링크한 문서나 사이트의 주소

    • target - 링크한 내용이 현재 창 혹은 새 창에서 뜰지 지정

      • _blank - 새 창 혹은 새 탭에서 열림
      • _self - 기본 값. 링크가 있는 화면에서 열림
      • _parent - 프레임 사용한 경우 링크 내용 부모 프레임에 표시
      • _top - 프레임 사용한 경우 링크 내용 전체 화면에 표시
    • download - 다운로드 링크

    • rel - 현재 문서와 링크된 문서의 관계

    • hreflang - 링크된 문서의 언어 지정

    • type - 링크한 문서의 파일 유형

  • <iframe> 태그

    • 문서(부모) 안에 다른 문서(자식)를 넣는 태그
    • parent.html <iframe src="child.html" width="" height=""></iframe>
      child.html <p><a href="" target="_parent(부모 문서 창) 혹은 _top(브라우저 창 전체)"></p>

  • 텍스트 링크 디폴트 디자인 없애기
    a { text-decoration:none; color:black; }

  • 페이지 내에서 링크
    <a href="#id"> 텍스트 혹은 이미지 </a>

<map> 태그, <area> 태그, usemap 속성 - 이미지 맵 지정 (하나의 이미지에 여러 링크 걸기)

기본형
<map name="맵이름">
	<area>
	<area>
	...
</map>
<img src="이미지 파일" usemap="#맵이름">
  • <area> 태그 속성
    • alt - 대체 텍스트
    • coords - 링크로 사용할 영역의 시작과 끝 좌표. ex) "0,0,80,100"
    • download - 링크 문서 다운로드
    • href - 링크 문서 경로
    • media - 링크 문서를 어떤 미디어에 최적화시킬지 지정
    • rel - 현재 문서와 링크 문서의 관계
      • lternate, bookmark, help, license, next, nofollow, noreferer, prefetch, prev, search, tag
    • shape - 링크로 사용할 영역 형태
      • default, rect, circle, poly
    • target - 링크 표시할 대상 지정
      • _blank, _parent, _self, _top, 프레임 이름
    • type - 링크 문서의 미디어 유형



3. SVG

SVG란?

  • Scalable Vector Image
  • 자바스크립트 라이브러리 - http://d3js.org/, http://dmitrybaranovskiy.github.io/raphael/
  • 브라우저가 svg 지원하지 않는 경우 png 파일로 대체할 수 있다.
    • http://modernizr.com/
    • Add your detects > SVG as an <img> tag source > Build > Download 'Build' > 사용할 폴더로 파일 옮기기 > <head>태그 안에 <script> 태그를 이용해 웹 문서에 연결
<head>
	<meta charset="utf-8">
	<title>Title</title>
	<srcipt src="modernizr-custom.js"></script>
</head>
<body>
...

	<script>
		if (!Modernizr.svg) {
			//지원하지 않을 경우
		}
	</script>
</body>

or

<body>
...
	<script>
		if (Modernizr.svg) {
			//지원할 경우
		} else {
			//않을 경우
		}
	</script>
</body>

* 문서에 이미지가 많다면 id 선택자로 다른 이미지와 구별해 주어야 한다.




4. 기타

  • 파일 경로를 표시하는 기호들
    • 하위 폴더 - /
    • 상위 폴더의 하위 폴더 - ../
<script src="js/script.js"></script>
body {
	background-image: url("../images/background.png");
}


출처 : Do it! HTML5+CSS3 웹 표준의 정석

profile
UX에 관심 많은 개발 초보 Front-end Developer

0개의 댓글