본문 바로가기
  • We are looking for banner advertisers Please refer to the email below

HTML14

HTML 카페24/고도몰 버튼 클릭시 레이어 팝업 띄우기 [장바구니] 특정 클래스의 버튼을 클릭시 레이어 팝업을 띄우는 방법에 대해 알아보도록 하겠습니다, 레이어 팝업 호출시 뒤의 백그라운드에 흑백처리하여 레이어팝업만 강조하는 방법과, 일반적인 레이어팝업만 호출하는 형태 각각 알아보도록 합니다. HTML 영역 일반 팝업레이어 장바구니 상품명 : ITEMNAME 판매가 : ITEMPRICE 수량 : QTY 장바구니 이동하기 주문하러 가기 close 딤처리 팝업레이어 장바구니 상품명 : ITEMNAME 판매가 : ITEMPRICE 수량 : QTY 장바구니 이동하기 주문하러 가기 close CSS 영역 자바스크립트 영역 적용화면 일반 팝업레이어 클릭시 화면 딤처리 레이어팝업 적용 전체 로컬 소스 2021. 10. 3.
HTML 레이어 팝업 모바일 오늘 하루 보지 않기 쿠키+뒷배경 음영넣기 레이어팝업은 특정 영역의 위치에 원하는 사이즈의 레이어를 만들어 냄으로써 사이트를 방문하는 방문자에게 특정 정보를 안내하거나, 공지하는 등의 역할을 하며 일반 팝업창의 경우 특정 브라우저에서의 차단기능으로 팝업창이 뜨지않거나 하는 등으로 방문자라면 반드시 확인할 수 있도록 안내할 수 있는 장점이 있어 근래 가장 많이 사용되는 레이어중 하나 이다. 해당 레이어가 특정 페이지를 접근한 경우 메인레이어들을 흑백 음영처리하고, 방문자에게 고지하거나 안내하고싶은 내용을 전달하는 방법에 대해 알아 보도록 한다. 자바스크립트 영역 CSS 영역 HTML 영역 오늘그만보기 닫기 적용된 소스를 로컬에서 확인시 아래의 파일을 다운받도록 하자. 로컬에서의 확인시 쿠키값의 추가는 추가되지않으므로 실제 사이트에 적용하면 확인이 .. 2021. 8. 27.
HTML 이미지맵 반응형 적용 방법 이미지의 영역별로 링크를 넣을 땐 이미지맵(image map) 을 사용하게 되는데, 이 이미지 맵을 일반적인 소스로 작성시 모바일같이 화면의 영역에 맞춰 사이즈가 조정되는 반응형에는 정상적으로 링크가 적용되지 않을 때 처리하는 방법에 대해 알아보도록 하겠다. 자바스크립트 삽입 위의 자바스크립트를 삽입하게 되면 이미지의 사이즈가 100%로 기준점이 정상적으로 잡히게 된다. 이미지맵(좌표링크) 사용방법 crone.tistory.com/309 HTML 이미지맵 (image map) 좌표 링크 설정 방법 하나의 이미지내에서 좌표를 설정하여 링크를 설정하기 위해서는 이미지맵(image map) 을 사용하게 되는데, 프로그램을 사용하여도 되지만 소스자체가 워낙 간단하다보니 소스를 이해하여 직접 crone.tisto.. 2021. 3. 19.
HTML 이미지맵 (image map) 좌표 링크 설정 방법 하나의 이미지내에서 좌표를 설정하여 링크를 설정하기 위해서는 이미지맵(image map) 을 사용하게 되는데, 프로그램을 사용하여도 되지만 소스자체가 워낙 간단하다보니 소스를 이해하여 직접 원하는 좌표를 선택하여 링크설정이 가능하다. 이미지맵 기본 사용 소스 이미지맵 사용 예시 위를 해석하자면, www.naver.com/image/test.png 이미지를 불러와 imagemap 이라는 명칭을 부여하고, imagemap 이라는 안에 0,100,100,100 의 좌표에서는 naver.com 새창 으로 100,200,200,200 의 좌표에서는 daum.net 새창 으로 이동시킨다. 기타 옵션설정 shape : 좌표의 모양 (rect : 사각형좌표, circle : 원형좌표, poly : 다각형좌표) coor.. 2021. 3. 19.
HTML 유튜브 영상 자동/반복 재생 하기 (크롬/익스플로러) 자신이 촬영한 영상을 유튜브에 업로드하여, 이 업로드된 영상이 홈페이지나 쇼핑몰에 넣는방법에 대해서 알아보도록 하겠다 우선 소스는 친절히도 유튜브내에서 소스를 간단하게 얻어올수 있다. 먼저 유튜브 영상의 소스를 얻기 위해 유튜브영상 하나를 열도록한다 www.youtube.com/ YouTube © 2021 Google LLC CEO: 선다 피차이 주소: 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA. 전화: 080-822-1450(무료) www.youtube.com 원하는 영상이나 자신의 영상주소를 알고있다면 영상으로 이동하여 우클릭을 한다 영상에 우클릭을 하게되면 소스 코드 복사 라는 기능이 보인다, 소스코드를 복사하게 되면 아래와같다. 위의 소스와.. 2021. 1. 12.
[CSS] 스타일 강제적용 !important css 작업중 많은 스타일을 적용하면서 여러스타일이 반복적용되면, 그중 어떤 스타일이 먼저적용되는지, 또는 적용되는순서를 전부 읽어내기 어려울때 사용되는 !important 에 대해서 알아보고자 합니다. 예를들어 div에 mainbanner 라는 클래스가 명명되어있고, css 에서는 위와같이스타일이 적용되어있습니다. 하지만 위와같이 단순하게 짜여져있는 소스라면 .main_banner 부분을 간단하게 수정하여 스타일을 변경하면 되는데요. 여러개의 css쿼리와, css파일들이 엮여 하나의 클래스에 여러개의 스타일이 적용된다면 일일히 선택자 점수를 계산하여 적용하기에는 어려운데요, 물론 선택자 점수 계산을 하여 원하는방향대로 수정하는것이 가장 올바른 방법입니다. 이럴때 사용되는것은 강제적용으로 !importa.. 2020. 12. 13.
HTML,JSP,PHP,ASP 파일불러오기 (인클루드) 사용하는법 include(인클루드) 란? 기존에 입력한 소스를 불러와 작업 페이지에서 이미작업된 페이지를 가져다 활용함으로 작업했던 내용을 또 작업하는 내용이 없도록 시간적 공간적 절약을 위해 사용된다. include(인클루드) 왜 사용되는가? 코딩시에 프로젝트 전반적으로 자주 사용되는 반복 구간을 매번 새로운 소스를 입력하여 작업하는건 시간적으로도 프로젝트내에서도 좋지않고, 소스를 새로입력하는것보다, 기존에 입력되어있는소스를 리딩하여 해당소스는 공통적으로 통합 관리하기 위함으로 사용됩니다. include(인클루드) 사용법? HTML PHP --상대경로시 --절대경로시 ASP '상대경로시 '절대경로시 JSP 2020. 12. 8.
[자바스크립트] 경고창을 띄운후 링크페이지 이동 시키기 사이트를 만드는중, 특정 페이지에 자바스크립트를 삽입하여 클라이언트에게 경고창을 띄워준 후 페이지를 이동시키는 스크립트에 대해 공유합니다 이미지가 띄워지게되면 자바스크립트로 alert 로 경고문구를 사용자에게 보여준 뒤, https://crone.tistory.com 이동 한다 2020. 11. 13.
홈페이지/쇼핑몰 홈페이지 파비콘 웹페이지 대표 아이콘 만들기 1. 파비콘이란? 2. 파비콘을 만드는 규칙? 3. 파비콘을 만드는요령 - 사이트의 텍스트 - 사이트의 색상컨셉 - 파비콘 모양 결정 파비콘 이란? 즐겨찾기 (Favorite) + 아이콘 (Icon)으로써 홈페이지 주소창에서 표시되는 사이트를 대표하는 아이콘입니다 확장자는 Ico 이며 사이즈는 16x16, 32x32, 48x48, 64x64 픽셀에서 적용됩니다 대표하는 이미지 또는 아이콘으로써 중요하지않은것 같으면서도 중요한 역할을 하는 아이콘입니다. 대부분의 사이트의 이용자들은 파비콘에 익숙해서 사이트에 접속하였을때, 이 사이트에 방문한적이 있다 또는 방문한적이 없다를 구분할 수 있습니다. 예를들자면 사람의 뇌는 글자 텍스트보다 그림을 더 빠르게 읽어 처리하게된다고 합니다 즐겨찾기의 목록을 둘러볼때 나.. 2020. 11. 12.
개발 첫 단계 홈페이지 만들기 1탄 - 윈도우10 Nginx + php 연동 웹 서버중 대표적인 소프트웨어로, 아파치서버, 엔진X 서버 들어는보셨을겁니다 실제 현시점에서 가장 점유율이 높은 웹서버는 Apache 서버로 가장 높은 비율을 차지하지만 아파치의 가장큰 단점으로 클라이언트에서 요청하나당 스레드 하나 처리하는 형태로 구성되어있어 클라이언트가 많으면 많을수록 많은만큼의 스레드가 생성이되고, 그만큼 cpu 자원이 많이 사용됩니다 많은 쓰레드가 사용되므로 자원이 많이 사용되고, 이에 부합한 성능을 준비하려면 만만치않은 서버비용이 지출됩니다 제가 이번포스팅에서 다룰 내용은 첫 시작하는 나만의 서비스를 만드는데에 있어, 대게의 아이디어가 많은 트래픽을 가지고 운영되는 서비스를 생각하고있기때문에 NginX를 선택하였습니다 NginX 의 큰 장점은 비동기 이벤트 기반으로 처리되는 Ev.. 2020. 10. 15.
도메인 구매 부터 등록까지 [홈페이지/쇼핑몰 구축] 홈페이지,쇼핑몰을 구축전 도메인을 구비하는 방법에 대해서 알아보도록 하겠습니다. 도메인이란? 일반적으로 우리는 각각의 집주소를 부여받아 온라인쇼핑몰이나 홈쇼핑을통해 물건을 주문시 집주소로 물건을 수령하곤합니다. 이때 모두가 기억할수있도록 명명하는게 주소라고 합시다. 온라인웹페이지도 동일하게 각 서버에서 웹페이지 서비스가 동작되고, 해당 서버ip는 일반적으로 기억하기 어렵기 마련입니다. 아이피는 보통 xxx.xxx.xxx.xxx 의 형태로 구성이되는데 이걸 위에 도메인명칭을 입혀 누군든지 쉽게 접속할수 있도록 만드는것입니다. 그림으로 설명한번 드리겠습니다. 허접하지만 이미지를 그려봤습니다. 자 가운데있는서버는 전세계에서 같이 공유하는 DNS서버입니다 해당 서버들은 일정시간을 기점으로 동기화하게 되어있습니다.. 2020. 3. 25.
[HTML] 쇼핑몰 상품 이미지 대량 다운받기 (feat.JavaScript)_서버이관 (브라우저 캐시이용) 업무중 사이트의 상품이미지를 대량으로 다운받아야할때가 있습니다. 제경우에는 IT회사를 근무중에 있었고 특정 고객사에서 타 솔루션을 통해 쇼핑몰 및 홈페이지를 호스팅받고있는데, 쇼핑몰을 리뉴얼하여 새로 저희회사를통해 서비스를 받기를 희망하였습니다 현재 운영중인 기존 서버에서의 이미지서버는 오픈이 불가하고 상품데이터는 전부 이관이되어야하므로 기존서버에서 긁어와야했습니다. 방법은 아주 여러가지방법이 있을것으로 추정됩니다, 하지만 저는 이것을 프로그래밍까지 하면서 일을 복잡하게 풀고싶진않았습니다 아주 간단하면서 아주빠르게 처리하고싶었습니다. 물론 고객사에서도 해당내용은 정확히 알고있어서 100% 일치하는 데이터가 이관되지않더라도 이해하겠다라는 내용이 전제가 깔려있어 가능했던방법입니다. 자 방법은 이렇습니다. 특.. 2019. 11. 29.
로컬 DNS 서비스 강제변경 host 파일 수정 내부 host파일은 로컬 DNS 서비스 역할을 합니다. DNS란? - DNS ( Domain Name Service ) 도메인 네임 서비스라고하여 각 서버가 동작시키고있는 서비스를 찾기위해 우리는 해당 서버의 집주소, 즉 ip주소를 알아야합니다. 하지만 우리는 이 각각의 ip주소를 외우거나 또는 기록하기에는 너무 많은 ip주소를 외워야합니다 이때, 각 ip를 이름을 붙여 사이트주소를 만들어 서비스되는것이 DNS라고합니다. DNS서버란? - DNS 서버는 각각의 서버와 도메인이 연결된 서버의 IP를 찾아주는 역할을 담당합니다. 예를들어 네이버(naver.com) 라는 웹사이트를 접속하기위해 주소창에 naver.com 이라는 도메인을 입력합니다. 그럼 컴퓨터는 naver.com 이라는 도메인을 네임서버로 접.. 2019. 11. 28.
[HTML/JavaScript] 쇼핑몰 상품 이미지없는 데이터 골라내기/찾아내기 이번시간에서는 쇼핑몰에 등재되어있는 상품 중, 상품이미지가 없는 데이터를 HTML과 자바스크립트를 이용하여 골라내는 방법에대해서 내용공유드리고자 포스팅합니다. * 방법은 아주여러가지방법이있겠지만 허접한 자바스크립트 지식으로 아주간단하게 만들어봤습니다. 업무내용은 아래와같습니다. 운영중인 상품데이터 중 상품이미지 (썸네일) 이미지가 없는 데이터를 골라서 재 보정해야하는 경우 입니다. 이때, 단일품목으로 운영하는 쇼핑몰이라면 상품가짓수가 몇가지되지않기때문에 바로 눈에띄고, 또 수정해야할 데이터도 바로 확인되기때문에 간단합니다만, 몇백가지, 몇천가지 아니 어쩌면 큰쇼핑몰에서는 몇만가지의 상품데이터를 가지고있는 쇼핑몰도 있을겁니다. 몇천가지,몇만가지의 상품중에서 상품이미지가 엑박(엑스박스) : 서버에서 해당이미.. 2019. 11. 21.

티스토리툴바