정보는 공유되어야 한다

가끔씩 상품설명을 위해 오픈마켓 페이지에 동영상을 넣어야 할때가 있습니다. 이때 사용할 수 있는 태그 입니다. 동영상파일을 넣기 위해서는 태그를 사용합니다. 기본형식은 이미지를 넣을때 사용하는 형식과 비슷합니다. 다만 이미지가 들어가느냐 동영상이 들어가는냐 그 차이겠죠.. 단, 확장자가 avi, wma, mp4등의 동영상 파일은 사용자의 PC환경에 따라 재생이 안될때가 있습니다. 사용자 컴퓨터에 코덱(Codec)이 없다면 플레이가 안되거나 아래 그림과 같이 나와버립니다... 또한 동영상파일을 통으로 오픈마켓에 올린다면 트래픽도 많이 나옵니다. 예를들어 10MB짜리 동영상을 올렸는데, 하루 방문자가 50명이라면?.. 벌써 500MB라는 트래픽이 나와버립니다. 감당이 안되겠죠.. 그래서 되도록 오픈마켓에 동..

이미지 맵(image map)이 뭘까요? 이미지 맵이란 이미지를 링크하는 방법 중 하나로 이미지의 특정 영역에만 링크를 할 수 있는 기능입니다. 오늘은 이 이미지 맵을 이용한 새창띄우기를 하려고 합니다. 어려운게 아니니 쉽게 접근할 수 있을겁니다. 나모웹에디터의 기능중에 하나인 이미지 맵은 "하나의 이미지에 여러개의 링크"를 걸때 사용합니다. 각각 개별이미지로 만들어 링크하는 것보다 시간이 많이 절약됩니다. 쇼핑몰,오픈마켓,옥션,지마켓,11번가,새창띄우기,팝업 아래는 샘플 이미지구요.. 미리보기 먼저 나모웹에디터를 실행시켜 이미지를 불러옵니다. 아래 그림과 같이 빈문서에서 마우스 오른쪽버튼을 눌러 "그림 넣기(I)"를 선택해서 불러오면 됩니다. 한개의 통 이미지에 그림과 같이 새창 링크1, 새창 링크2 ..

새창띄우기 두번째 방법입니다. html에서 자바스크립트로 새창을 띄우려면 window.open 이라는 명령어를 줍니다. 아래도 마찬가지로 window.open을 이용한 새창띄우기 소스 입니다. 새창의 크기를 가로 800픽셀, 세로 1,000픽셀, 스크롤바와 주소창이 보이게 하려면 아래와 같습니다. 링크를 클릭하면 새창이 뜨게하는 방법 새창띄우기 웹접근성 평가기준에 의거 onclick (마우스 이벤트) 와 onkeypress (키보드 이벤트)를 함께 사용해야힙니다.(중요) 중간에 "small"은 상황에 맞게 변경 가능하며, 문자열속성으로 글씨를 작게합니다. 그렇다면 이미지에 링크를 걸어 새창을 띄우려면 어떻게 해야될까요? 이미지를 넣는 방법은 입니다. 이 소스를 위 소스 마지막줄에 새창띄우기 글씨자리에 넣..

옥션,지마켓에서 제품을 클릭하면 메뉴바나 상태바 없이 새창이 뜨는걸 본적이 있을겁니다. 가로세로 사이즈도 일정하구요. 단순히 링크만으로는 그렇게 할 수 없겠죠.. 오픈마켓 새창띄우기는 단순 링크가 아닌 자바스크립트를 사용하여 새창을 띄웁니다. 그렇다면 자바스크립트란 뭘까요? 자바스크립트는 객체 지향 스크립트 언어로 HTML문서 사이에 직접 들어가 사용자가 마우스를 클릭하거나, 키보드를 입력하는 것과 같은작업을 즉시 처리할 수 있도록 도와주는 언어입니다. 예를들어 회원가입이 끝나면 나타나는 "회원가입을 축하합니다!" 라는 작은 창이라던지, 비밀번호를 잘못 입력했을때 "비밀번호가 틀렸습니다."의 문구등이 자바스크립트로 만들어졌습니다. 자바스크립트의 여러가지 용도가 있겠지만.. 여기서는 자바스크립트를 이용한 ..

오픈마켓 상품수정 쇼핑몰 상세페이지를 작성하다 보면 일일히 수정해야 할 경우가 있습니다. 여간 번거로운일이 아닌데요... 아이프레임 속성만 제대로 알고 있어도 많은 시간을 절약할 수 있습니다.(시간=돈) 물론 이미지만 ftp로 덮어쓰기 해도 변경은 되지만 내용이 추가됐거나 이미지의 크기가 변경됐을 때는 덮어쓰기로는 안되기 때문에 이때 아이프레임을 사용하면 정말 유용합니다. 쇼핑몰(옥션,지마켓,11번가등)같은 오픈마켓의 경우 대부분 아이프레임(iframe)이 적용됩니다. 요세는 제품수가 많아지고 다양해지다보니 한페이지에 쭉~ 나열하기에는 스크롤 압박으로 쉽지 않은게 사실입니다. 여러개의 제품이 한꺼번에 나열되다보니 트래픽도 무시를 못하겠죠. 그래서 의류를 시작으로 종류가 다양한 제품들은 소비자 입장에서는 ..