[HTML]태그-아이프레임 활용 :: 구역을 정해서 보이게 하기

2015. 12. 14. 11:33정보/노하우

728x90
반응형

<iframe>

 

아이프레임이 예전에는 많이 사용을 되었는데 지금은 외부페이지로 노출될 가능으로 인해서 아이프레임을 사용을 금지하여 태그입력도 안됩니다.

특히 쇼핑몰에서는 적용이 안되도록 되어 있는데 지금은 이베이(옥션,지마켓)에서 특히 안됩니다.

 

전에는 아이프레임도 막다보니 플래쉬를 사용을 하였는데 어도비(Adobe)에서 모바일에 플래시를 적용을 못하게 하였다고 하여 지금 플래시를 사용을 하면 모바일에서는 안보입니다. 왜 플래쉬가 안보일까 하는데 플래쉬는 안보입니다. 그래서 요즘에는 플래쉬를 한다고 하여 면접에 큰 가산점을 주지 않습니다. 오히려 자바스크립트를 사용하실 수 있는게 더 큰 도움이 됩니다. 플래쉬는 사용을 못하고 이미지는 바꿀 수 있지만 링크는 직접 바꿔줘야 하기 때문에 아이프레임을 사용을 하게 됩니다.

 

아이프레임을 사용하는 이유는 다른 상품을 보이게 하거나 홍보를 위한 목적이 많이 있습니다. 그런데 아이프레임은 이미지 보여지게 하고 링크만 걸 수 있는 것일까요?

 

자바, 자바스크립트등 더 많은 언어가 많이 있는데 이걸 사용하면 좋을텐데 왜 아이프레임을 이야기 할까요? 개인홈페이지나 이러한 소스가 들어가고 거의 대부분은 이것을 적용을 못합니다. 그래서 아이프레임을 사용을 하는 것입니다. 아이프레임이 적용이 되는 쇼핑몰을 알려드리겠습니다.

 

아이프레임이 적용되는 사이트는 거의 다 대부분 됩니다. 하지만 이베이에서는 아이프레임을 사용하기 위해서는 이베이 FTP서버를 사용해야 합니다.

상품코드도 링크가 걸리지 않습니다. 방법을 알고 싶으시면 댓글로 말씀해주세요.

 

그외에는 아이프레임을 쇼핑몰에서 적용할 수 있는데 초보자나 급하게 하시는 분들이 가장 많이 실수를 하는 부분은 타사이트로 링크를 걸어 낭패를 볼 수 있습니다.

 

 

아이프레임을 하기 위해서는 

 

1. 코딩할 이미지 -  아이프레임을 적용하는 목적에 따라 사이즈를 정합니다. 이미지 슬라이스를 하거나 맵으로 링크를 걸 수 있습니다. 편하시는 작업을 하세요.

2. 코딩 HTML페이지 - 코딩할때는 ALT부분에 모델명이나 상품명을 넣어주세요. 이미지 안보여도 헷갈리지 않습니다. 꼭 하세요~!

 

코딩된 페이지를 FTP에 올리고 상품등록시 HTML로 전환하여 넣어주시면 됩니다.

 

<ifame src="FTP경로" width="가로사이즈" height="세로사이즈" scrolling="no">

</iframe>

 

기본 소스는 이렇습니다. 여기서 주의를 할게 있다면 코딩페이지에서 링크를 새창으로 오픈할 수 있도록 해야 합니다. self일 경우 아이프레임 영역에 보여지기 때문에 안됩니다.

 

 

 

 

자 여기까지는 기초적인 아이프레임이였고 특정구역을 보여지기 위해서 하는 방법을 알아보겠습니다.

 

 

 

 

아이프레임 특정구역 보이게 하는 방법

 

 

 

 

 

 

 

이부분을 보여지게 할려고 했는데 전체를 보이게 하는 방법으로 하겠습니다. 수치만 다를뿐 같습니다.

어떻게 보여지게 될지 한번 보겠습니다.

 

위니아 에어워셔 MAPH-S576W  /  딤채 마망 DAR-436TRC / 위니아 에어워셔 스윗캔들 AWC-N226G

 

 

 

 

아래처럼 11번가에서 진행하는 SKT 스마트홈서비스 상품을 링크를 하는 방법을 알아보겠습니다. 이것을 하는 이유는 무엇일까요?

 

쿠폰받기를 다른 페이지에서가 아닌 현재 받게 하기 위함입니다. 쿠폰받기로 이탈하는 고객이 많기 때문에 그렇습니다. 그리고 쿠폰받다가 다른 상품이 눈에 들어옵니다.

 

1. 우선 특정부분을 가져오기 위해서는 아이프레임을 이용하여 해당페이지를 가져옵니다.

2. 해당페이지에서 보여질 부분의 사이즈를 측정합니다. 그리고 보여지기 시작할 부분의 가로 세로 사이즈를 측정해주세요. 캡처프로그램을 이용하여 합니다.

3. 다시 아이프레임을 이용합니다. 그리고 style을 이용하여 만들면 아래처럼 내가 원하는 부분을 보여지게 할 수 있습니다.

4. 이것을 상품정보에 붙이면 되는데 상품정보에서는 미리보기를 할 경우 원하는것처럼 안보일 수 있습니다. 저장을 하고 보시면 연습을 한것처럼 보여집니다.

 

 

 

 

728x90
반응형