워드프레스 웹사이트 개발을 하다보면 코드를 수정하고 웹브라우저에서 확인하는 과정을 수 없이 반복하죠. 주로 구글 크롬을 사용하는데 웹브라우저를 그냥 새로고침하면 적용된 것이 나타나지 않는데 이것은 캐시 때문입니다. 브라우저 캐시 기능은 현재의 웹 페이지를 있는 그대로 브라우저(내 컴퓨터)에 저장합니다. 이를 제거하면서 새로고침하려면 매번 Ctrl+F5 또는 Ctrl+Shift+R 키를 눌러야 캐시가 제거되면서 새로고침됩니다.제경우는 개발자 도구를 항상 열어놓고 작업하기 때문에 마우스로 새로고침 아이콘을 우클릭하고 "캐시 비우기 및 강력 새로고침"을 클릭합니다. 그런데 찾아보니 캐시를 저장하지 않고 새로고침만 눌러도 되는 기능이 있더군요.F12키를 눌러 개발자 도구를 열고 Network 탭에서 Disabl..
이 글은 아주 오래된 글의 업그레이드 버전입니다. 아래의 글에서 제이쿼리와 CSS를 이용해 버튼을 클릭하면 좌우로 애니메이션 되는 기능을 설명했는데 제이쿼리에 사용된 toggle function이 1.8 버전에서 폐기예정 선언이 있으면서 1.9 버전에서 완전 폐기됐습니다. 따라서 최근 버전의 제이쿼리를 사용하면 작동하지 않습니다. https://martian36.com/523 CSS가 발전하면서 CSS3의 애니메이션 기능을 이용하면 더욱 다양하고 간단하게 이용할 수 있습니다. 자바스크립트의 사용도를 줄이고 CSS의 사용도를 늘리는 추세이므로 적합하다고 할 수 있습니다. 예제는 위 파일에 있습니다. 상하좌우 4면에 버튼이 배치돼있습니다. 기능은 이전 버전과 똑같습니다. 좌측에 있는 버튼을 클릭하면 우측으로..
이전 글에서는 페이지빌더인 브리지 프로에 대해 대략적으로 알아봤는데 이번 글에서는 주로 사용하는 페이지 빌더인 WP Bakery 페이지 빌더와 요즘 인기있는 페이지 빌더인 엘리멘터 프로와 브리지 프로의 작업 플로우에 대해 알아보겠습니다. 1. WP Bakery 페이지 빌더 워드프레스 페이지빌더는 WP Bakery에서 제작한 페이지 빌더가 주로 사용됩니다. 이 페이지 빌더는 엔바토의 코드캐년에서 판매되는 플러그인으로 테마 판매 사이트인 같은 엔바토의 씸포레스트의 테마에 번들로 포함시킬 수 있기 때문에 거의 대부분의 테마에 이 페이지 빌더를 사용하고 있습니다. 번들 플러그인은 테마 제작자가 적은 비용만 지불하고도 자신의 테마에 포함시킬 수 있어서 어쩔 수 없이 사용하고는 있지만 기본적으로 기능도 많지 않기 ..
워드프레스 보안을 위해 취할 수 있는 기본적인 방법을 이전 글에서 알아봤습니다. 워드프레스 설치 하기 전 단계에서 관리자의 비밀번호를 강화해야 하고 로그인 URL을 변경해야 웹사이트가 기본적으로 안전하다고 할 수 있습니다. 이번 글에서는 워드프레스 설치 후 최초의 방문자가 누구이며 이들이 어떤 작업을 하는지에 대해 알아보겠습니다. 워드프레스를 설치하고나면 바로 방문하는 것이 인터넷 로봇입니다. 인터넷 로봇(Internet Robot)은 간단하게 말해서 봇(Bot)이라고 합니다. 이들은 양호한 봇(Good Bot)과 불량 봇(Bad Bot)으로 크게 두 가지로 분류할 수 있는데 양호한 봇에는 검색엔진을 예로 들 수 있습니다. 검색엔진은 자신의 사이트에 노출하기 위해 각 사이트를 돌아다니며 콘텐츠를 수집합니..
최근 필자가 관리하고 있는 사이트에서 해킹을 당해 모든 파일을 스캔해 악성코드를 제거하고 깨끗히 정리한 사례가 있습니다. 이 사이트는 회원관리 사이트로서 사이트 담당자에게 관리자 비밀번호를 어렵게 만들어줬습니다. 그런데 별도로 두 계정을 만들어 관리자로 등록했더군요. 이들 관리자가 워드프레스가 제안하는 어려운 강한 비밀번호를 사용했을 리가 만무합니다. 관리자 비밀번호는 항상 해킹하기 어려운 강한 비밀번호를 만들어야 합니다. 이러한 외우기 쉬운 관리자 비밀번호는 해킹하기 쉽습니다. 구글 검색하면 워드프레스 사이트에서 사용자 아이디를 찾아내는 방법과 비밀번호를 무차별대입 공격(Brute Force Attack)을 이용해 알아내는 방법을 알 수 있습니다. 이런 사례를 보여줌으로서 워드프레스의 보안을 얼마나 철..
엔바토는 호주 소재 세계적으로 유명한 디자인 템플릿 판매 사이트입니다. 매월 디자인 소스를 무료로 공개하는데 이번 달 무료 소스에 대해 알아보겠습니다. 회원가입을 해야 다운로드 가능하며 각 버튼을 클릭해 우측 상단에서 간단하게 가입할 수 있습니다. 1. Elisyam - Web App & Admin Dashboard Template 바로가기 관리자 화면 개발용 템플릿입니다. 일반 디자이너는 거의 필요가 없고 개발자에게는 아주 유용합니다. 2. Dandelion illuminated by the rays of the setting sun 바로가기 민들레가 있는 고화질 저녁 노을 풍경사진입니다. 3. The Beauty Of Asia 바로가기 동양적 색채가 물씬 나는 오디오입니다. 듣다보면 "오디오 정글"이..
워드프레스로 페이지나 블로그 글을 작성하려면 페이지 빌더는 필수입니다. 클릭 드래그 작업의 반복으로 간단하게 복잡한 구조의 콘텐츠를 만들 수 있기 때문입니다. 워드프레스는 2018년 11월 5.0 버전의 발표를 앞두고 있는데 기본 편집기가 구텐베르그 편집기로 전환됩니다. 이 편집기 또한 페이지 빌더에 속합니다. 워드프레스는 기본적으로 기능을 추가할 때 이미 존재하는 플러그인의 기능을 도입합니다. 콘텐츠를 작성할 때 필요한 페이지 빌더는 이미 상당히 많은 플러그인이 존재하고 필수요소로 됐으며 이제서야 기본 편집기로 도입되는 것입니다. 최근에 출시된 페이지 빌더인 브리지(Brizy)는 무료버전이 있고 아직 출시되지는 않았지만 현재 개발중이며 평생 지원 버전(Life Time Support)인 프로버전이 있습..
이번 프로젝트의 특징은 쇼핑몰에서 판매하는 상품인 개별 일반상품과 정기구매 상품을 일련된 플로우에서 구매할 수 있도록 한 것입니다. 주방 세제를 정기구매 상품으로 선택하고 추가적으로 필요한 수세미 등을 개별상품으로 추가할 수 있는 것입니다. 다음 정기구매에는 추가한 개별상품은 배송되지 않습니다. 고객님이 급하게 필요하여 1주일만에 완성됐습니다. 1. 정기구매 선택 2. 정기구매 플로우 설명 3. 플랜 선택 4. 일반상품 선택 5. 정기구매 기간 선택 6. 장바구니 7. 주문요약 8. 로그인 9. 배송정보 입력 및 회원가입 10. 결제
엔바토 그룹의 씸포레스트에서 3개의 유료 테마를 2018년 11월 1일까지 무료로 공개합니다. 테마는 라이센스가 있어야 지속적인 업데이트가 가능하므로 일시적인 무료 다운로드는 큰 의미는 없습니다. 다만 테마를 연구하시려는 분이나 유료 테마를 무료로 사용하고 싶은 분에게는 좋은 기회가 될 수 있습니다. 회원가입을 해야 다운로드가 가능합니다. 1. Minishop - Multipurpose, Minimal, e-Commerce, Marketplace WordPress Theme 바로가기 2. Yozi - Multipurpose Electronics WooCommerce WordPress Theme 바로가기 3. Onliest - Creative Portfolio One Page WP Theme 바로가기
유료 템플릿 사이트인 엔바토에서 2018년 10월 19일 현재 1주일간 무료 아이템을 공개합니다. 바로가기 회원가입 해야 다운로드 가능합니다. 1. Flat logo intro 로고를 사용한 애프터 이펙트(After Effect) 인트로 템플릿입니다. 20개의 아이콘 포함입니다. 유투브 인트로에 사용하면 좋습니다. 2. 35 Flat User Icons 35개의 사용자 아이콘(아바타)입니다. 3. Emotional 배경 음악 파일입니다. 이런 무료 파일은 무조건 받아놓으면 언젠가는 쓸데가 있습니다. 엔바토 계정 만들기는 아래의 글을 참고하세요. https://martian36.tistory.com/1436
이번의 회원관리 사이트는 이전의 회원관리 사이트와 비교해서 전체적으로 구조는 비슷합니다. 특이사항을 보면 다음과 같습니다. 1. 학회 참가신청 폼 참가신청을 하고 참가비까지 신용카드로 결제하는 구조입니다. 2. 콘텐츠 빌더 이 사이트는 자료 업로드가 상당히 많습니다. 관리자가 콘텐츠를 손쉽게 업로드할 수 있도록 사용자 정의 필드를 이용해 간단한 구조의 콘텐츠 빌더를 만들었습니다. 사실 첨부파일을 추가하는 기능이 없기 때문에 페이지 빌더의 버튼 기능을 이용하지만 초보자는 사용하기 어렵죠. 여러 종류의 콘텐츠 형태에 따라서 간편하게 추가할 수 있고 동일 형태의 콘텐츠라도 계속 추가할 수 있습니다. 콘텐츠가 있는 곳을 클릭 드래그해서 위치를 변경할 수도 있습니다. 같은 종류의 콘텐츠는 레이블을 추가해 구분할 ..
유료인 1개의 3D 폰트와 2개의 아이콘 세트를 무료로 다운로드 받을 수 있는 사이트를 알려드립니다. 조건은 이메일을 입력해서 구독해야 합니다. 3D 폰트는 웹폰트도 포함됩니다. 아이콘은 AI, png, eps, pdf, svg 파일등이 포함됩니다. 라이센스는 스탠다드 라이센스로 하나의 프로젝트에서 500개의 판매 상품에 포함시킬 수 있습니다. 폰트는 프로젝트에 무제한입니다. Items purchased under the Standard License may be used to create End Products for Sale where lifetime sales of the End Product for Sale do not exceed 500 units. Items purchased under the..
이런 도구가 국내에 있는지는 모르겠지만 없으면 아마도 개발되리라고 봅니다. 이야기를 쓰는 사람이라면 이런 도구 하나쯤 있어야 하지 않을까 생각해본 적이 있을 겁니다. 이야기에는 수많은 인물이나 장소가 등장합니다. 복잡한 이야기라면 인물에 대한 캐릭터와 장소의 특징을 정해놔야 할 것이고 글 쓰는 도중 등장인물이나 장소에 어떤 성격이 있는지 확인이 필요할 때 체크해야 전체 이야기가 모순에 빠지지 않고 체계화될 것입니다. 천재적인 작가는 이런 것을 모두 머리 속에 넣어 놓고 있을지는 몰라도 메모해두지 않으면 나중에 앞뒤가 안맞아 독자로 하여금 "이게 뭐야"하는 소리를 듣지 않게 될 것입니다. https://www.pencilapp.io 우연히 둘러봤는데 워드프로세서보다는 좋을 것 같습니다. 베타버전인지 이용가..
이번에 티스토리에서 보안인증서를 설치하면서 여러 가지 에러가 발생하고 썸네일 이미지가 Mixed Content로 나타나는 등 문제가 발견됐습니다. 현재 제 블로그의 스킨을 업데이트 하기위해 티스토리에서 제작한 반응형 스킨(#2)을 참고해 썸네일 이미지 부분을 수정하면서 #2 스킨을 핀터레스트 스타일로 수정해봤습니다. 사이드바 3단 사이드바 2단. 사이드바 1단 사이드바 2단, 1단은 위젯이 많아지면서 스크롤바가 나타나는데 보기에 좋지않아 크롬에서만 보기좋게 나타나도록 수정했습니다. 설치하고 나면 홈화면과 카테고리 화면이 위처럼 그리드 형 메이슨리 레이아웃으로 나옵니다. 에러가 발생할 수도 있으므로 아직 공유 페이지에는 등록하지 않았습니다. 며칠 테스트해보고 문제가 없으면 공유 페이지에 등록하겠습니다. 공..
몇 년전 비주얼 스튜디오 코드가 처음 등장했을 때 서브라임 텍스트를 베낀 텍스트 에디터라는 오명을 달아줬습니다. 이 글을 보면 이에 대한 이야기가 나옵니다. 며칠전 매일 구독하는 웹디자이너 뉴스에서 비주얼스튜디오 코드에 관한 이야기가 있어서 둘러봤습니다. 새로 설치하고 테마를 변경하려고 봤더니 1,500여개의 테마가 개발돼있더군요. 이전 글에서는 겨우 3개만 있었는데 말이죠. 테마를 검색해 설치하는 방법을 알아보겠습니다. https://code.visualstudio.com/ 위 화면에서 OS별로 다운로드 받을 수 있습니다. https://marketplace.visualstudio.com/ 위 화면에서 theme으로 검색하면 다운로드 받을 수 있습니다. 어마어마한 커뮤니티입니다. 커뮤니티가 잘 형성돼야..
