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

2015.12.14 11:33정보/노하우

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

 

 

 

 

  • 프로필사진
    브리딕2016.02.12 18:06

    옥션 아이프레임을 홍보영역말고 상세페이지영역에 넣을수 있을까요?
    이전에 어떤분이 알려주셔서 잘 사용을 해왔는데 최근에는 pc에서는 정상인데 모바일에서 안보이네요ㅠㅠ

    • 프로필사진
      BlogIcon 우루루2016.02.13 00:35 신고

      이베이는 시스템이 종종 변경이 되는데요
      링크가 없다면 상세페이지에도 넣을 수 있어요
      아이프레임내에 링크를 빠면됩니다
      상품링크는 단축URL로하시거나 앵커를 이용하여 사용해야됩니다
      이베이는 자바스크립트도 안되게 해서 효과를 못주는데요
      시스템이 변경될때 미리 소스를 밀어넣어두는게 좋아요
      빈공간으로 넣어두고 필요할때 사용하시면 되요
      얼마전까지 아이프레임 링크가 됐었는데 기다려야될것같네요

    • 프로필사진
      BlogIcon 우루루2018.02.13 15:20 신고

      아이프레임을 사용하시면 영역이 자동으로 풀려서 보여서 사이즈를 설정해야 됩니다. 그런데 이베이에서 아이프레임을 사용못하게 해서 이제 아이프레임을 쓰시믄 안됩니다. 이베이가 상품2.0으로 하면서 링크를 걸 수 없는 정책으로 가기때문에 다른 방법을 사용해야 됩니다.

  • 프로필사진
    이유라2016.03.01 00:18

    안녕하세요. G마켓에서 아이프레임소스로 새창(다른 상품판매하는 단축 URL) 띄우려고 하는데 잘 안되는데 알려주실수 있나요? EBAY이미지호스팅에 올라간 HTML파일만 된다는데 제가 G마켓 판매하고 있는 다른 상품 페이지에 링크걸수는 없는건가요? 혹시 아신다면, 알려주세요^^ 제가 컴퓨터 언어를 전혀 몰라서 쉽게 설명해주시면 감사하겠습니다. EBAY에 올린 이미지호스팅이 아니면 다른 상품 페이지로 링크를 걸 수 없는 건가요?

    아래 글에 미리 소스를 밀어넣어두라는건... 바뀌기 전에 소스를 올려놓으면 그 상품페이지는 나중에 금지되더라도 쓸 수 있다는 말씀이신건가요? 궁금합니다. 아이프리엠 내에 링크를 빼면... 빼도 새창띄우기가 되는건가요? 앵커가 뭔지 검색해봤는데 아나운서와 앵커가 나오네요ㅠ 아래 글 보니까 아이프레임 링크가 금지되어서 이제는 사용이 안된다는건가요? 그럼 제가 새창띄우기 하려는건 안된다는건가요? 너무 초보라 설명을 잘해주셨지만 전체적인 이해가 어려워요ㅠ

    근데 A태크가 되는데 왜 IFRAME을 쓰는건가요? A태그가 안될때 IFRAME을 쓰는건가요?

    • 프로필사진
      BlogIcon 우루루2016.03.01 00:29 신고

      아이프레임을 쓰는 이유는 간단합니다. 한번에 수정이 가능하기 때문입니다. 각 상품마다 상세페이지를 수정하는게 아니라 호스팅에 올라가 있는 HTML파일만 수정하면 전체사이트에 적용되기 때문에 그렇습니다. A태그(하이퍼링크)는 상품이 많이 없거나 크기가 계속 변경될때 편합니다. 아이프레임의 단점은 사이즈 변경시 스크롤을 넣지 않으면 잘리거나 빈여백처럼 보여지기 때문에 불편합니다. 요즘은 상품2.0으로 등록을 하다보니 아이프레임을 잘 안씁니다.
      댓글에 설명이 없는걸 지금봐서 지금 썼습니다.