이미지와 하이퍼링크

차명미·2020년 3월 3일
가웹사
1

2주차스터디

목록 보기
1/1

1.이미지

웹에서 사용하는 이미지 형식

  • GIF : 256가지의 색상만 지원, 파일 형식에 비해 파일 크기가 작기 때문에 작은 이미지에 주로 사용
    투명한 배경, 움직이는 이미지를 만들 수 있다.
  • JPG/JPEG : GIF보다 다양한 색상과 명암을 표현할 수 있다.
  • PNG : 투명 배경을 만들면서 다양한 색상도 표현 가능, 주로 로고이미지로 많이 사용.

img 태그(닫는태그없음)

**기본형** <img src="경로" alt="" [속성="값"]>

src속성 : 이미지 파일 경로 지정

내 컴퓨터의 이미지 파일 경로 지정하기

  *내부 css
        <img src="logo.png">
  *외부 css
      	body {
      		background-image: url("../images/logo.png");
        }

웹 상의 링크를 복사해 이미지 경로 지정하기

인터넷에 이미 올라와있는 이미지 링크를 복사해 이미지 경로 지정 방법.
웹 페이지에 넣고 싶은 이미지를 마우스 오른쪽버튼 클릭하고 [이미지 주소 복사] 선택하면 이미지 경로를 알 수 있다.
복사한 웹 이미지 파일 경로를 src 속성의 값으로 지정하면 된다. 다만 웹 이미지는 인터넷에 접속할 수 있어야 화면에 표시 된다.

<img scr = "https://img.velog.io/images/velog/post/ebf87853-b6b7-47af-a659-d97fb39e66b0/velog_logo.png?w=1024">

*주의사항
다른 사람이 블로그나 사진 공유 사이트에 올린 사진,이미지는 저작권자의 허락없이 다른 곳에 옮기거나 다운로드해 사용하면 안된다.

alt속성 : 이미지를 설명해 주는 대체 텍스트

  • 웹 문서에 삽입한 이미지는 시각적인 요소이기 때문에 시각 장애인들은 내용을 알 수 없다. alt 속성을 이용하면 이미지에 대한 설명을 넣을 수 있고, alt속성의 텍스트를 화면 낭독기가 시각장에인에게 읽어줄 수 있다.
  • 이미지를 제대로 표시할 수 없는 상황에서 이미지 자리에 alt속성에 쓴 내용이 표시되어 어떤 이미지가 사용되었는지도 짐작이 가능하다.

width, height 속성으로 이미지 크기 조정

<img src="logo.png" alt="로고" width="100px" height="100px">

width,height 속성을 사용하지 않으면 원본 이미지 크기 그대로 브라우저 화면에 표시 되기때문에 이미지 크기 조절이 필요하다.
*주의사항
작은 이미지를 크게 표시할 경우 화질이 나빠질 수 있다.

<figure>,<figcaption>태그 - 이미지에 설명 글 붙이기

<figure> 태그 - 설명 글을 붙일 때 대상 지정

기본형
<figure></figure>
설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오 같은 멀티미디어파일을 비롯해 사진이나 표, 소스코드 등 웹 문서안에서 한 단위가 되는 요소를 묶을 때 사용한다.
이미지만 삽입하면 <figure> 태그를 사용하지 않아도 되지만 이미지에 설명글을 넣으려면 이미지를 <figure> 태그로 묶어줘야 한다.

<figcaption> 태그 - 설명 글 붙이기

설명 글이 필요한 대상은 <figure> 태그로 묶고 설명 글은<figcaption> 태그로 묶는다.

<figure>
	<img src="imges/img.png" alt="">
    	<figcaption>설명 글 입니다.</figcaption>    
</figure>

2.링크 만들기

<a> 태그, href 속성 - 링크 만들기

기본형
<a href="링크 할 주소" [속성="속성값"]> 텍스트 </a>
<a href="링크 할 주소" [속성="속성값"]>
	<img src="이미지 파일 경로" alt=""> 
</a>

<a></a> 링크를 만드는<a>태그는 텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 된다.

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

텍스트 링크의 밑줄과 글자 색 바꾸기

<style>
	text-decoration: none;
    	color: black;
</style>

텍스트 링크는 기본적으로 밑줄이 있는 파란색 글자로 표시된다.
밑줄과 글자 색을 바꾸기 위해서는 css를 이용해 텍스트 링크의 색을 바꾸고 밑줄을 없앨 수 있다.

target 속성 - 새 탭에서 링크 열기

<a href="#" target="_self">홈페이지 새 창 또는 새 탭</a>
속성값 설명
_blank 링크 내용이 새 창이나 새 탭에서 열린다.
_self target 속성의 기본 값. 링크가 있는 화면에서 열린다.
_parent 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다.
_top 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시한다.

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

**기본형**
<태그 id="앵커이름"> 텍스트 또는 이미지 </태그>
<a href= "#앵커이름"> 텍스트 도는 이미지 </a>

이 기능은 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한 번에 이동하도록 도와준다.

아래의 예제는 <a> 태그와 href 속성을 사용해 각 앵커로 연결하는 링크를 만들어 연결한 예제이다.
<ul> 태그를 이용해 간단한 메뉴를 만들고 각 메뉴마다 내용이 있는 부분으로 연결하는 앵커를 지정한다. 그리고 내용 단락으로 이동했을 때 [메뉴로]를 크러릭하면 메뉴항목으로 즉시 이동한다.

<ul id="menu">
	<li><a href="#content1">메뉴1</a></li>
    	<li><a href="#content2">메뉴2</a></li>
    	<li><a href="#content3">메뉴3</a></li>
</ul>
<h2 id="content1">내용 1</h2>
<p>
	<a href="#menu"> [메뉴로]
		이 기능은 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 
		그 위치로 한 번에 이동하도록 도와준다.
	</a>
</p>
<h2 id="content2">내용 2</h2>
<p>
	<a href="#menu"> [메뉴로]
		이 기능은 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 
		그 위치로 한 번에 이동하도록 도와준다.
	</a>
</p>
<h2 id="content3">내용 3</h2>
<p>
	<a href="#menu"> [메뉴로]
		이 기능은 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 
		그 위치로 한 번에 이동하도록 도와준다.
	</a>
</p>

<map>태그, <area>태그, usemap속성-이미지 맵 지정하기

<map name="맵이름">
	<area></area>
</map>

<img src="이미지 파일" usemap="#맵이름">
속성 설명
alt 대체 텍스트를 지정한다.
coords 링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정한다. (0,0,0,0)
download 링크를 클릭했을 때 링크 문서를 다운로드한다.
media 링크문서를 어떤 미디어에 최적화시킬지 지정한다.
rel 현재 문서와 링크 문서 사이의 관계를 지정한다. 속성값 alternate,author, bookmark, help, license, next, nofollow, noreferer, prefetch, prev, search, tag
shape 링크로 사용할 영역의 형태를 지정한다. 속성값 default, rect, circle, poly
target 링크를 표시할 대상을 지정한다. 속성값 _blank, _parent, _self, _top, 프레임 이름
type 링크 문서의 미디어 유형을 지정한다.

- rel속성의 속성값 -

속성값 설명
alternate 프린트 페이지나 번역된 페이지와 같이 해당 문서의 대체 버전에 대한 링크를 제공함.
author 해당 문서의 저자에 대한 링크를 제공함.
bookmark 즐겨찾기(bookmark)에 사용하는 고유 주소(permanent URL)를 제공함.
help 도움말 문서에 대한 링크를 제공함.
license 해당 문서의 저작권 정보에 대한 링크를 제공함.
next 연관된 문서들의 모음 중 다음 문서에 대한 링크를 제공함.
nofollow 유료 링크와 같이 검색 엔진이나 봇(bot) 등이 추적해서는 안 됨을 명시함.
noreferrer 사용자가 하이퍼링크를 클릭할 때 브라우저가 HTTP 리퍼러 헤더(referer header)를 전송해서는 안 됨을 명시함.
prefetch 해당 문서를 캐시(cache)해야만 함을 명시함.
prev 연속된 문서들 중에서 이전 문서를 제공함.
search 해당 문서를 위한 검색 도구를 제공함.
tag 현재 문서를 위한 키워드를 제공함.

- shape속성의 속성값 -

속성값 설명
default 영역을 이미지 전체를 지정함.
rect 사각형 모양의 영역(rectangular region)을 지정함.
circle 원 모양의 영역(circular region)을 지정함.
poly 다각형 모양의 영역(polygonal region)을 지정함.
예를들어 (0,0)에서(80,100)위치까지 사각 형태의 영역을 클릭했을 때 페이스북 사이트로 연결되게 하려면 다음과 같이 사용하면 된다.

하나의 이미지에 두 개 이상의 링크를 만드는 것을 '이미지 맵'이라고 한다.

<map name="fd">
	<area shape="rect" coords="0,0,80,100"
    	href="www.facebook.com" alt="페이스북">
</map>

3.SVG이미지

원본이 작은 크기였던 GIF, JPG/JPEG, PNG 파일을 카게 확대해 나타내면 이미지 테두리 부분이 울퉁불퉁해진다. 이런 이미지를 비트맵 이미지라고 하는데 반면, 이미지를 아무리 확대하거나 축소시켜도 원래의 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지라고 하는데 그런 이미지가 SVG이미지다.

SVG이미지 삽입하기

SVG이미지는 어도비 일러스트레이터 프로그램에서 벡터 이미지를 만든 후 svg 파일로 저장해서 만든다.이렇게 저장한 파일은 웹 문서에서 <img>태그를 이용해 웹 문서에 삽입할 수 있다.

<img src="images/img.svg">
profile
차명미
안녕하세요~

0개의 댓글