05 HTML 이미지 태그
이미지 삽입, 이미지 링크, 이미지맵
< 나만의 홈페이지 만들기 >
05 HTML 이미지 태그
안녕하세요?
연구쟁이 입니다.
홈페이지를 보면 먼저 크게 텍스트, 이미지, 동영상 그리고 다른 페이지로 넘어가는 링크로 되어 있어요.
지난 포스팅에서 배운 텍스트 관련 태그와 이미지, 동영상, 링크 관련 태그만 알면 기본적인 html 태그는 다 배운 거예요.
포트폴리오는 여기까지만 배워도 될 것 같아요.
물론 폼 관련 태그들이 남아있어요.
이건 회원가입하고, 검색 창 만들고 하는 거예요. 포트폴리오에 잘 쓰는 태그는 아니지요.
요건 서버 측과 연동이 되어야 해서...저도 보이는 것만 할 수 있어요.
그럼 이미지 태그에 대해서 하나씩 살펴볼까요.
01 이미지 삽입하기
: 이미지 파일형식: jpg, gif, png
<img src="경로" alt="대체 텍스트" />
src="경로" : 이미지 파일 경로 지정 // 폴더 위치나 웹상의 이미지 링크 주소
alt: 시각 장애인을 위해 이미지를 설명해주는 대체 텍스트 입력 // 웹 표준에 맞게 작성하려면 꼭 적는 게 좋다.
ex) <img src="img/bg.png" alt="유대한 유혹자 권시현" />
이미지 관련 태그는 위의 형식대로 하면되는데, 가장 중요한 것은 파일 경로를 지정하는 부분이에요.
html 파일과 이미지 파일이 어디에 위치하느냐에 따라서 경로가 달라지기 때문에 헷갈릴 수 있는 부분이에요.
html 파일과 이미지 파일이 동일한 위치에 있으면 <img src="bg.png" > // 간단하게 파일 이름만 적는다.
이미지 파일이 하위 폴더에에 있으면 <img src="img/bg.png"> // 폴더 이름과 파일 이름을 적는다. 참고로 "/"는 하위 폴더를 지칭
그리고 같은 레벨에 있는 파일을 사용할 경우는 <img src="../img/bg.png" > // ".." 은 1단계 상위 폴더로 올라가는 걸 의미
ex) <h1>이미지 삽입</h1>
<img src="img/bg.jpg" alt="위대한 유혹자 권시현"/>
만약 이미지 경로를 잘못 지정하면 대체 텍스트의 글이 보여요.
이미지 크기 조절은 width, height로 하면 되는데,
html보다는 css로 지정하거나 이미지 크기를 딱 맞게 맞춰서 크기 조절 없이 사용하기도 해요.
위에 이미지는 실제 이미지 조절 없이 실제 이미지 크기대로 나온 거예요.
이미지 크기 값 지정에 대해서는 앞으로 CSS에서 배울 거예요.
02 이미지에 링크 걸기
이미지를 클릭하면 다른 페이지로 넘어가거나 새 창이 뜨게 하고 싶을 땐 이미지에 링크 태그를 쓰면 돼요.
먼저 링크 태그에 대해서 알아볼게요.
<a href="링크 주소" [속성="속성 값]></a>
href="링크 주소": 링크한 문서나 사이트 주소를 적는다. 주소 지정 하지 않고 링크 표시만 할 땐 href="#"이 렇게 적으면 된다. 그리고 링크된 것은 해당 부분에 마우스를 갖다 되면 손가락 모양으로 표시된다.
[속성="속성 값"]: target - 링크한 내용이 표시될 위치 지정
_blank(새 창에서 열기)/ _self(현재 창에서 열기)
ex) <a href="http://www.naver.com" target="_blank">네이버</ a>
// "네이버"란 글자를 클릭하면 새창에 네이버 페이지가 열린다.
download - 클릭 시 해당 파일을 다운로드할 수 있게 된다.
방법은 href="파일경로"를 적고, download를 붙인다.
ex) <a href="img-1.jpg"download>권시현</ a>
// "권시현"이란 글자를 클릭하면 img-1파일이 다운로드 된다.
링크 속성은 이외도 더 있지만, 기본적으로 알아둬야 하는 것만 알면 돼요. 쓰는 속성만 사용하는 경우가 많거든요. 그리고 링크 태그 안에 이미지 태그만 적으면 바로 이미지에 링크 걸기가 되는 거죠.
<a href="링크 주소" [속성="속성 값]><img src="경로" alt="대체텍스트" ></a>
ex)<a href="img-1.jpg"><img src="img.jpg" alt="위대한 유혹자 권시현"/></a>
03 이미지맵 만들기
이미지 맵은 하나의 이미지에 여러 개의 링크를 적용할 때 사용해요.
그리고 이미지 전체가 아니라 특정 부분에만 링크를 걸고 싶을 때 사용하면 되구요.
이미지 맵에서 중요한 건 내가 원하는 위치의 맵 좌표를 표시하는 거예요.
<img src="경로" ait="대체텍스트" usemap="#맵이름" />
<map id="맵이름" name="맵이름">
<area shape="rect(사각형),circle(원),poly(다각형)" coords="맵좌표" href="url" alt="대체텍스트"/>
<map> //usemap과 map id의 이름은 반드시 같아야 한다.
그럼 이미지 맵 좌표는 어떻게 찾을까요?
도형에 따라 조금씩 다른 좌표 값을 가지는데요.
아래처럼 좌표 값을 구하면 되는데... 무슨 말인가 싶죠?
출처: <실전 프로젝트 반응형 웹 퍼블리싱> 책
ㅎㅎ 하지만 이미지 맵을 많이 사용하다 보니, 이미지 맵 좌표 구하는 사이트가 따로 있더라고요.
바로 Online Image Map Editor 이라는 사이트인데요.
http://maschek.hu/imagemap/imgmap/
사이트는 정말 심플하게 생겼어요. 딱 보면 어떻게 사용할지 감이 올 정도로~ ㅎㅎ
간단하게 사용 방법을 말하면 먼저 이미지를 업로드하면 아래에 업로드한 이미지가 나와요.
그런 다음 shape를 선택하고 이미지에 마우스로 위치를 정하면 좌표 값이 나와요.
그걸 복사해서 좌표 값 코드에 붙이면 끝!
좌표 값 뿐 아니라, 이미지 맵 코드 값을 바로 복사 붙이기 해서 사용할 수도 있어요.
href="링크주소" 와 alt="대체택스트"를 입력하고 아래 code클릭하면 쭉~~하고 코드가 나와요.
<map id="imgmap2018426195345" name="imgmap2018426195345"><area shape="circle" alt="다시보기" title="" coords="550,95,44" href="http://www.imbc.com/broad/tv/drama/tempted/" target="_blank" /><area shape="rect" alt="인물소개" title="" coords="38,11,216,64" href="http://www.imbc.com/broad/tv/drama/tempted/cast/" target="" /><area shape="poly" alt="" title="" coords="46,150,181,204,125,258,28,255,7,214,82,210" href="" target="" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
어때요? 쉽죠?
요렇게 코드 생성해주는 사이트만 잘 활용하면 더 빨리 더 편하게 홈페이지 작업을 할 수가 있어요.
이미지 맵뿐 아니라, 동영상 코드 생성해주는 것, 아이콘 코드 생성해주는 것 등 다양한 사이트들이 있어서 전 종종 활용하는 편이에요. 기회가 되면 그것들 사이트들로 정리해서 올리게요.
오늘은 이미지 태그 img에 대해서 알아봤어요.
이미지를 삽입하고 링크를 걸고 이미지 맵을 만드는 방법까지~
다음에는 동영상 태그에 대해서 정리해볼게요. 내가 가진 MP4 동영상 올리기. 유튜브 동영상 연결하기, 배경에 동영상 넣기 등
말이죠.
그럼 오늘도 열공 하세요. 파이팅^^
