37. 연결하기 - ④ 작은그림 누르면 큰그림 뜨기

▒ 요 약

작은그림 누르면 큰그림 뜨기 그림에 링크 걸기를 가장 많이 써먹는 것이 배너광고, 두번째로 젤 많이 써먹는건? 그렇지요. 웹 갤러리나, 사진관 등 들어가면 작은 그림으로 쭉 정리해 놓고 작은그림을 클릭하면, 큰그림이 뜨는것 많이 보셨죠? 이 또한 그림에 링크를 건 것 입니다. 이 작은그림 클릭, 큰그림 띄우기는 두가지 방법이 있습니다. 그 첫번째는 그림 사이즈를 조절하는 방법으로, ①원하는 그림을 wjdth=숫자 hight=숫자 를 이용하여 원하는 %로 줄입니다. ②링크태그 <a> 와 </a>를 그림에 감싸고 ③<a href= "이동할 주소" > 에서, 이동할 주소 대신 ④"그림주소"를 넣어주면, 그림으로 이동하겠죠? <a href= "그림주소" > <img src="그림주소" wjdth=숫자 hight=숫자> </a> 두번째 방법은 같아 보이지만 사이즈가 다른 각각의 그림 2개를 준비하여 ①A그림(큰그림) 과 B그림(작은그림)을 서버에 올리고 ②링크태그 <a> 와 </a>를 B그림(작은그림)에 감싸고 ③<a href="A그림(큰그림) 주소"> 으로 링크를 걸면 ④작은그림을 눌러 큰그림이 열리게 되겠죠? <a href= "A그림주소" > <img src="B그림주소" > </a>

▒ 요 약

첫번째 방법 예제 두번째 방법 예제 소스를 가지고 실습해 보세요. 이렇게 작은그림 눌러서 큰그림 띄우기로 나만의 멋진 갤러리를 만들 수 있답니다. ^___^*