자유로운 수짱

블로그 스킨을 오디세이로 변경했습니다! 새로 나왔기도 하고 사이드바가 있는 스킨을 사용하고 싶었거든요. 사용하던 왓에버 스킨에서 피씨만 사이드바를 만들어서 사용하려고 했는데 애드센스가 빨리 로딩되지 않는 거 같아서 그냥 스킨을 바꿔보았습니다. 북클럽이랑 왓에버를 사용해봤는데 오디세이로 설정하니까 체감상 광고 로딩이 빠른 기분이네요. 가로가 좁은 스킨이라 갑갑해서 CSS를 여기저기 손보았습니다. (아직 수정하고 싶은 곳이 꽤 있기는 하지만) 총가로를 40px정도 늘리고 글 내용 컨텐츠를 88px 정도 늘리고 우측 사이드바는 50px 정도 줄였습니다. 그래도 좁은 감이 있지만 요 정도로 만족하기로 했습니다. 사실 처음엔 가로 사이즈를 1200px 정도로 늘리려고 했는데 반응형이다 보니 미디어 쿼리 확인하는 ..

이전 글에서 jQuery hide()와 show() 메서드 그리고 setInterval() 메서드 기본 코드를 공부해보았습니다. [IT·인터넷] - jQuery - 사라짐 hide() 나타남 show() Effects [IT·인터넷] - JavaScript - setInterval() Method 주기적 실행 이번에는 한 단계 업그레이드! 공부했던 코드를 기반으로 98도씨라는 쇼핑몰의 검색창 Hot Keyword 부분의 세로 롤링 배너를 참고하여 기능 구현해보았습니다. 핫 키워드의 텍스트가 세로로 롤링되어 올라오는 스타일입니다. 만들어 볼 기능 참고 코드 구조 HTML과 CSS는 아래와 같이 작성하였습니다. Hot Keyword 1. 리스트 2. 리스트 3. 리스트 4. 리스트 5. 리스트 6. 리스트 ..

요즘 가죽 공방에 다니고 있습니다. 공방 선생님께서 1~2년 전쯤 쇼핑몰 제작을 의뢰했었는데 200~300만 원정도 사기를 당했었다는 이야기를 들었습니다. 쇼핑몰 템플릿을 제작하는 것이 업인지라 그 말을 듣고 너무 놀랐지요! 요즘 세상에 쇼핑몰 제작 사기가 아직 있다는 말이야? 하고 생각해버렸습니다 ^^; 그때는 제가 공방에 다니지 않았을 때지요. 공방에 좀 더 빨리 다녔었다면 도움을 드릴 수 있었을 텐데 아쉬웠습니다. 쇼핑몰 제작에 어느 정도 비용이 발생하는지 모른다면 업체의 말만 믿고 덥석 구매할 수도 있다는 사실을 알게 되었습니다. 쇼핑몰 제작 시 비용은 천차만별입니다. 어떤 호스팅사를 이용할 것인지부터 시작해서 결제 모듈은 어떤 것으로 선택할 것인지 선택해야 할 것이 너무나도 많습니다. 카페24를..

추가)) iOS 14 업데이트시 해당기능 설정 불가능 하게되었다고 합니다 :) 아이폰으로 소리 없이 사진을 찍고 싶은데 앱을 설치하기는 싫고 설치해도 제대로 되는 것 같지 않아서 포기하고 있었습니다. 그런데 저번 주에 아는 동생을 만났더니 대박 아이템이라며 카메라 소리 안나는 방법을 가르쳐 주더라고요. 카페에서 소리없이 사진을 찍을 수 있고 어플 때문에 화질 저하가 되지 않을 수 있다니!! 진짜 최고!! 물론 악의적인 활용을 해서는 안되겠지요. 2020년 최고 발견 TOP 3안에 드는것이 아닌가 생각합니다. (하하) iOS 13.6 단축어의 자동화 기능을 활용한 방법이더라고요. 조건문 작성하는 느낌이네요. 우선 아이폰에서 '단축어'라는 앱을 찾아줍니다. (없으면 앱스토어에서 설치합니다.) 단축어 앱을 켜..

요즘 유튜브 보면 ooo로 돈 벌었어요 시리즈가 워낙 많아서 '어 나도?' 하고 솔깃해지기 쉬운 것 같다. 벌어본 자의 여유를 보다 보면 나도 저런 여유를 어서 빨리 가질 수 있을 것만 같다. 주 직업을 가지고 제2의 뭔가를 성공시킨다는 게 쉬운 일이 아니기 때문에 시작은 했으나 끝이 없었던 경험이 아주 많다. 지금 하는 블로그도 그러한 길을 가지는 않을까 걱정되지만 여태 해본 것 중에 제일 뭐랄까.. 재미라는 것이 있는 편이다. 내일은 뭐 쓰지 어떤 거 쓰지 생각하는 일이 그렇게 싫지만은 않다는 게 나로선 호재다. 티스토리 블로그를 왜 시작했는가 하면 단순하다 투자금 없이 돈 버는 게 최고라고 생각했기 때문이다. 투자 시간이야 뭘 하든 드는 거기 때문에 그리고 글 쓰는 것은 그렇게 시간이 들지 않을 거..

아는 분이 블루호스트에서 워드프레스 기반의 간단한 홈페이지를 운영하고 있습니다. 브랜드명을 변경하면서 도메인 주소를 바꾸기 원해서 그때 제가 도메인 주소를 변경해주었습니다. 하지만 연결하고 보니 도메인 주소를 잘못 샀다고 하더군요^^; (주소의 알파벳을 잘못 보고 샀다고 합니다.) 그래서 이번에 제대로 된 주소로 다시 재연결을 해주었습니다. 저는 주로 국내 호스팅사인 카페24에서 홈페이지 작업을 합니다. 카페24같은 경우는 도메인 주소변경이 너무너무너무 쉽기 때문에 그것만 생각하고 바꿔 주겠다고 말했습니다. 블루호스트라고 뭐 특별히 어렵겠냐 하는 마음으로. 하지만 블루호스트는 사용자가 직접 도메인을 변경하는 것이 불가능합니다. 서비스 센터를 통해서 상담 후 변경이 가능하더라고요. 해외 호스팅사 이므로 영..

hide와 show 메서드 또한 웹에 동적인 느낌을 주기에 유용합니다. click 이나 mouseover, mouseenter 와 같은 이벤트와 자주 함께 쓰이는 것 같습니다. 문법 $( selector ).hide( duration [, easing] [, complete] ); $( selector ).show( duration [, easing] [, callback] ); duration 숨겨지는 또는 나타나는 속도를 지정하며 밀리초 단위입니다. 기재하지 않으면 디폴트값인 400밀리초로 표현됩니다. 숫자 대신 예약어인 'fast' 나 'slow' 를 기재할 수도 있습니다. 'fast'는 200밀리초로 표현되며, 'slow'는 600밀리초로 표현됩니다. easing 애니메이션의 속도표현을 나타내는데..

웹 테스트 중 setinterval 을 사용할 기회가 있어서 공부해보았습니다. 함수를 호출하거나 일정 시간 간격으로 함수를 호출할 때 사용합니다. 웹 제작시 동적인 느낌을 주기에 좋은 메소드 입니다. 문법 setInterval(function, milliseconds, param1, param2, ...) setInterval(함수, 시간간격ms, 매개변수1, 매개변수2, ...) 구성입니다. 함수와 시간은 필수 요구사항이며, 매개변수는 선택사항입니다. clearInterval 메소드를 사용하여 반복을 중지할 수 있습니다. 예제 html 코드 구성 A script on this page starts this clock: Stop time 스크립트 구성 var myVar = setInterval(myTim..

애드센스 승인을 목표로 티스토리 블로그를 시작한 지 대략 한 달 정도 되었습니다. 7월 중순에 블로그를 만들었고 8월 초에 애드센스를 신청했어요. 8월 7일에 신청하고 8월 12일날 구글에서 승인메일이 왔으니 신청에서 승인까지 일주일 정도 소요된 거 같네요 :) 얼른 애드센스를 신청하고 싶어서 기준이라고 생각하는 부분을 나름대로 잘 지켜서 글을 업로드했습니다. 포털을 검색하고 리남님 강의를 듣고 보고 한 결과 제가 생각한 기준이 몇 가지 있어요. 1. 글은 1~2일에 한 번씩 작성했습니다. (최대 3일 텀) 2. 한 포스팅당 공백 제외 1000자 이상 업로드했습니다. 3. 글 작성 시 이미지 개수나 링크 연결은 따로 신경 쓰지 않았습니다. (글에서 필요하다 싶으면 연결함) 4. 스킨은 큰 영향이 있나 싶..

해외사이트를 돌아다니면 이미지 확장자가 webp로 확인되는 경우가 종종 있습니다. webp 이미지는 포토샵에서 지원하지 않는 형식이라 이미지 편집이 불가능합니다. 포토샵에서 편집할 수 있도록 jpg 또는 png 파일로 손쉽게 변환하는 사이트를 소개드릴까 합니다! 우선 webp 가 무엇인지부터 알고 갈게요 :) WebP(웹피, weppy) 구글에서 만든 이미지 포맷입니다. 웹 페이지에서 널리 사용되는 jpeg, png, gif 를 하나의 포맷으로 대체하기 위해 개발되었습니다. 웹사이트의 트래필 감소 및 로딩 속도 단축을 겨냥한 것으로, 주로 사진 이미지 압축 효과가 높은 것으로 알려져 있습니다. 화질 저하를 최소화하면서 파일 크기를 축소(같은 품질의 30%대까지 압축)한다고 합니다. 크롬을 중심으로 지원하..

[img tag - 이미지 태그 구성] img 태그는 웹 페이지에 이미지를 노출하기 위해 사용되며 닫힘 태그가 없는 형태입니다. 두 가지 필수 속성이 있습니다. src : 이미지의 경로를 지정 브라우저는 웹 서버에 저장 된 이미지를 가져와 페이지에 삽입하게 됩니다. 이미지가 저장 된 웹서버의 경로를 정확하게 기재하지 않으면 이미지가 정상적으로 노출되지 않습니다. 엑박 표시가 되어버립니다. alt : 이미지의 대체 텍스트 어떤 이유로 이미지가 정상적으로 표시되지 않는 경우(느린 환경, 이미지 경로의 오류, 스크린 리더를 사용하는 등) 이미지의 대체 텍스트가 노출됩니다. 이미지를 정확히 표현하는 문구를 기재하는 것이 좋습니다. [a tag - 링크 태그 구성] link text or link image 링크..

과정 ① 에서는 자사 쇼핑몰을 구축하기 시작하는 시점과 자사 쇼핑몰의 장점을 안내드렸고, 다섯 가지 큰 틀 중에 카페24 솔루션 가입, 무료 쇼핑몰 만드는 방법 그리고 도메인 구매에 관하여 이야기해보았습니다. 과정 ② 에서는 만들어진 무료 쇼핑몰에 디자인을 입히는 과정(스킨 세팅)에 대하여 이야기를 했습니다. [카페24 쇼핑몰] - 카페24 쇼핑몰 제작 구축 과정 ① - 솔루션 가입, 도메인 구매 [카페24 쇼핑몰] - 카페24 쇼핑몰 제작 구축 과정 ② - 쇼핑몰 스킨세팅 이제 쇼핑몰 구축 과정의 막바지입니다. 상품을 업로드하고 PG사 가입하는 부분에 대하여 이야기하려고 합니다. 4. 상품 업로드 통합결제 PG(Payment Gatewqy) 가입 전 상품을 먼저 업로드하는 것이 좋습니다. 모든 상품을 ..

카페24 쇼핑몰을 제작하려고 마음먹었지만, 어디부터 어떻게 시작해야 하는지 몰라 어려움을 겪는 분들을 위해 카페24 쇼핑몰 제작과정에 대해서 안내드리고 있습니다 :) 과정 ① 에서는 자사 쇼핑몰을 구축하기 시작하는 시점과 자사 쇼핑몰의 장점을 안내드렸고, 다섯가지 큰 틀 중 카페24 솔루션 가입과 무료 쇼핑몰 만드는 방법 그리고 도메인 구매에 대해서 이야기 해보았습니다. [카페24 쇼핑몰] - 카페24 쇼핑몰 제작 구축 과정 ① - 솔루션 가입, 도메인 구매 카페24의 무료 쇼핑몰은 제작되었고, 도메인 주소까지 확보되었습니다. 그렇다면 이번에는 쇼핑몰의 디자인을 느낌있게 바꾸는 과정이 필요합니다. (카페24의 기본 쇼핑몰의 디자인을 이용해도 상관없다 하시면 이 부분은 뛰어넘어도 무관합니다.) 3. 쇼핑몰..

사업 초기 자사 쇼핑몰을 구축하려면 초기 비용이 부담되고, 제작한다고 해도 쇼핑몰에 트래픽이 없다면 쇼핑몰을 만들어도 무용지물이라 하겠습니다. 때문에 ①다른 곳에 입점, ②블로그 마켓 운영, ③스마트 스토어를 운영, ④인스타그램으로 판매하는 방식 등으로 사업을 시작하게 됩니다. 이러한 시작으로 가능성을 확인하고 나면 최종적으로 자사 쇼핑몰을 구축하기 시작합니다. (물론 자사 쇼핑몰부터 제작해도 무관합니다.) 자사 쇼핑몰을 구축하면 다른 곳에 입점했을 때 발생하는 수수료를 내지 않을 수 있고, 고객 데이터 관리가 가능합니다. 또한 자체 프로모션을 진행하여 직접적인 소통 할 수 있다는 장점이 있습니다. 카페24 쇼핑몰을 제작하려고 마음먹었지만, 무엇부터 시작해야 하는지 몰라 어려우신 분들이 계실 듯합니다. ..

[반드시 표시해야 할 정보] 쇼핑몰 운영시 메인 페이지에 반드시 표시해야 할 정보가 있습니다. 전자상거래법, 정보통신망법 및 개인정보보호법에서 쇼핑몰에 반드시 표기해야 하는 정보를 명시합니다. 1. 사이버몰 이용약관 2. 개인정보처리방침 3. 상호 및 대표자 성명 4. 사업자등록번호 5. 공정거래위원회 통신판매업자 정보공개 페이지 링크 (통신판매 신고번호) 6. 전화번호와 이메일 주소 7. 영업소가 있는 곳 주소 (소비자 불만을 처리할 수 있는 곳의 주소) 8. 구매안전 서비스 (배송 상품 등 선지급식 통신판매의 경우에 해당) 8-1) 구매안전서비스의 제공사업자명 또는 상호 (결제대금 예치에 가입한 경우에는 결제대금 예치 제공사업자의 전자금융거래법에 의한 등록번호 포함) 8-2) 신용카드가 아닌 무통장 ..