워드프레스 웹사이트 개발을 하다보면 코드를 수정하고 웹브라우저에서 확인하는 과정을 수 없이 반복하죠. 주로 구글 크롬을 사용하는데 웹브라우저를 그냥 새로고침하면 적용된 것이 나타나지 않는데 이것은 캐시 때문입니다. 브라우저 캐시 기능은 현재의 웹 페이지를 있는 그대로 브라우저(내 컴퓨터)에 저장합니다. 이를 제거하면서 새로고침하려면 매번 Ctrl+F5 또는 Ctrl+Shift+R 키를 눌러야 캐시가 제거되면서 새로고침됩니다.제경우는 개발자 도구를 항상 열어놓고 작업하기 때문에 마우스로 새로고침 아이콘을 우클릭하고 "캐시 비우기 및 강력 새로고침"을 클릭합니다. 그런데 찾아보니 캐시를 저장하지 않고 새로고침만 눌러도 되는 기능이 있더군요.F12키를 눌러 개발자 도구를 열고 Network 탭에서 Disabl..

이 글은 아주 오래된 글의 업그레이드 버전입니다. 아래의 글에서 제이쿼리와 CSS를 이용해 버튼을 클릭하면 좌우로 애니메이션 되는 기능을 설명했는데 제이쿼리에 사용된 toggle function이 1.8 버전에서 폐기예정 선언이 있으면서 1.9 버전에서 완전 폐기됐습니다. 따라서 최근 버전의 제이쿼리를 사용하면 작동하지 않습니다. https://martian36.com/523 CSS가 발전하면서 CSS3의 애니메이션 기능을 이용하면 더욱 다양하고 간단하게 이용할 수 있습니다. 자바스크립트의 사용도를 줄이고 CSS의 사용도를 늘리는 추세이므로 적합하다고 할 수 있습니다. 예제는 위 파일에 있습니다. 상하좌우 4면에 버튼이 배치돼있습니다. 기능은 이전 버전과 똑같습니다. 좌측에 있는 버튼을 클릭하면 우측으로..

이전 글에서 transform 속성을 이용한 이미지 애니메이션 효과를 알아보았는데 무한반복을 위해 제이쿼리 코드를 사용했습니다. 이번에는 순수한 CSS만을 이용해 애니메이션 효과를 만드는 방법을 알아보겠습니다. 이번에는 애니메이션이 동작되는 도중 중지할 수도 있습니다. 이미지를 추가하고 .image-container로 감싸줍니다. 이미지는 상하로 긴 이미지입니다. 스타일을 추가하기 위해 style.css를 연결해줍니다. .image-container { width: 600px; height: 400px; overflow: hidden; border: 1px solid #ddd; border-radius: 7px; position: relative; } .image-container img { max-wi..

이미지에 마우스를 올렸을 때 긴 이미지를 상단으로 이동시키는 효과를 CSS3의 transform 속성을 이용해 만들어보겠습니다. 일반적으로 이런 효과는 gif 애니메이션 기능을 이용해 만드는데 그러자면 이미지의 용량도 늘어나고 이미지 품질도 좋지 않습니다. head 태그에 style.css 파일을 추가하고 body에 이미지를 추가한 다음 .image-container로 감싸줍니다. .image-container { width: 600px; height: 400px; overflow: hidden; border: 1px solid #ddd; border-radius: 7px; position: relative; } style.css에 위처럼 이미지의 폭과 높이를 지정해줍니다. 이미지는 상하로 긴 이미지를 ..

바로가기 위 버튼을 클릭하면 위 그림이 나오는 사이트로 이동합니다. 노란색의 Download the Source 링크를 클릭해 압축 파일을 다운로드 합니다. 압축해제하고 폴더로 들어가면 위와 같이 나옵니다. html 파일을 클릭하면 눈내리는 효과가 나옵니다. 티스토리에 설치를 위해 필요한 파일은 하나입니다. js 폴더에 들어가 snowfall.jquery.js 파일을 티스토리에 업로드 합니다. 관리자 화면의 HTML 편집 화면에서 태그 바로 이전에 위와 같이 코드를 추가하고 저장하면 완료입니다. 눈송이의 최저 크기는 1, 최대 크기는 8입니다. 눈송이 수를 늘리려면 250이라는 숫자를 조정합니다. 2016년 12월 22일 현재 제 블로그에 나타나는 눈내리는 효과입니다.

아주 옛날에 웹개발의 기본인 HTML, CSS를 배우던 시절이 있었습니다. 가장 절실했던 것은 간단한 편집기이면서 작성한 코드를 바로 확인할 수 있는 편집기였습니다. 내가 작성한 코드가 어떻게 보이는지 일일히 저장하고 웹브라우저에서 확인하는 것이 너무 불편했죠. 오늘자 웹디자이너 뉴스 기사에 이런 편집기가 나타났습니다. 이 편집기는 웹브라우저인 파이어폭스의 제작사로 모질라에서 만든 것이더군요. 그래서 신뢰성이 더합니다. 설치할 필요도 없고 회원가입만 하면 바로 사용할 수 있고 퍼블리싱도 가능해서 간단한 웹사이트도 만들 수 있습니다. https://thimble.mozilla.org/en-US 홈 화면에서 "Start a project from scratch" 버튼을 클릭하면 편집기가 열립니다. 우측에서 ..

아래 링크로 가면 색상 조합이 만들어져 있는 사이트가 있습니다. http://www.colorion.co/ 색상 버블을 클릭하면 색상 코드가 복사되고 Info 버튼을 클릭하면 아래와 같은 페이지가 나옵니다.

CSS에서 cursor 속성에 따른 모양을 일일히 입력해서 확인해야 하는데 아래 그림을 참고하면 바로 적용할 수 있습니다. 제 참고용으로 만들었습니다. 일부 커서는 희미해서 잘 안보입니다. http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=default

부트스트랩 문서 파일을 필요에 의해 내 컴퓨터에서 볼 수 있도록 만들었습니다. 부트스트랩 공식 최종 버전인 Bootstrap 3.3.6과 부트스트랩 4 알파 버전 2입니다. WAMP 서버나 오토셋으로 웹서버 환경을 만들어 놓고 WAMP의 경우 www 폴더에, 오토셋의 경우 public_html 폴더에 붙여넣고 열어야 합니다. 부트스트랩 3의 경우 웹브라우저에서 http://localhost/bootstrap3/를 입력하고 엔터키를 누르면 됩니다. 부트스트랩 4버전이 알파 버전 단계인데 아직 베타 단계도 들어가지 못하고 있어서 언제 공식 버전이 나올지 소식이 없는 상태입니다. 작년 8월에 알파 1버전이 나온 이후로 개발 속도가 아주 느립니다. 부트스트랩의 인기는 아직 시들지 않고 있습니다. 씸포레스트에서 ..

요즘 한국은 신경숙의 표절 시비로 난리가 아닙니다. 남이 작성한 콘텐츠를 제것인양 사용하는 국내의 정서가 불러온 결과입니다. 제 블로그의 글도 많은 복사가 이뤄져 이를 방지하고자 구글을 검색해봤더니 좋은 자바스크립트가 있어서 소개합니다. http://bavotasan.com/2010/add-a-copyright-notice-to-copied-text/ 위 사이트로 가면 아래와 같은 코드가 있습니다. 290 291 function addLink() { 292 var body_element = document.getElementsByTagName('body')[0]; 293 var selection; 294 selection = window.getSelection(); 295 var pagelink = " ..

Roboto는 구글의 안드로이드 디자인 웹사이트에서 2012년 1월부터 사용하던 폰트입니다. 그 이전에는 Droid라는 폰트를 기본 폰트로 사용했습니다. Roboto의 개발자는 폰트 디자이너인 Christian Robertson이고 2010년부터 구글의 직원으로 일하고 있습니다. 2014년 구글이 머티리얼 디자인을 발표하면서 폰트를 재디자인해 머티리얼 디자인의 기본 폰트로 사용하고 있습니다. 그러던 중 2015년 1월 다시 업데이트 됐습니다. Roboto 폰트는 영문만 있으므로 한글이나 기타 국가의 폰트는 Noto 폰트를 호환 폰트로 지정했습니다. 이전 버전과 개정된 버전의 가장 큰 두드러진 차이는 R에 있습니다. 이전에는 하단 부분이 곡선으로 돼있지만 현 버전은 직선입니다. 이전 버전은 다폰트나 폰트 ..

구글이 작년에 머티리얼 디자인(Google Material Design) 가이드 라인을 발표했습니다. 구글용 웹사이트나 앱에 적용할 통일화된 디자인으로 레이아웃, 스타일, 애니메이션, 등 웹 디자인에 필요한 모든 요소에 대해 정의를 하고 이에 따를 것을 요구하고 있습니다. 바로가기 여기에는 아이콘도 포함되며 700여개의 아이콘이 있습니다. 세세한 부분까지 규격을 만들어놓고 있습니다. 바로가기 색상에 대해서도 정해놓고 있습니다. 바로가기 가능한 디자인과 불가능한 디자인까지 아주 광범위하게 가이드라인을 정해놓아서 앞으로 구글 관련 사이트를 방문하게 되면 통일된 모양을 볼 수 있을 것입니다. 다만 획일적이라는데 문제가 있겠죠. 아이콘은 흑백으로 돼있는데 컬러로 만들어 무료로 배포하는 곳까지 생겼습니다. 128..

부트스트랩 템플릿 중 쓸만한 것이 나타나면 계속 소개하고 있습니다. 이번 템플릿은 컨택트 폼 스크립트까지 포함돼있습니다. 요즘은 HTML 템플릿을 검색하면 거의 부트스트랩으로 만들어진 것만 나타나고 있습니다. 그만큼 부트스트랩의 사용도가 높아지고 있습니다. 세계 최대의 템플릿 사이트인 씸포레스트에서 부트스트랩으로 검색하면 전체 19,000 여개의 템플릿 중 6천여개가 검색됩니다. 거의 3분의 1에 해당합니다. 2년전만해도 엄청 적은 숫자였습니다. 여기에는 워드프레스 테마 등 각종 테마도 포함됩니다. 최근에는 구글의 머티리얼 디자인을 적용한 부트스트랩 테마도 나오고 있습니다. 현재 개발 중인데 디자인이 상당히 좋습니다. https://github.com/FezVrasta/bootstrap-material-..

부트스트랩 템플릿 6종입니다. 이전의 템플릿보다는 퀄리티가 좀 나은 것 같습니다. 부트스트랩에서 테마란 디자인의 변경을 위한 CSS 파일을 말하는데 우리나라에서는 템플릿을 테마로 부르고 있더군요. 이 테마의 변경만으로 간단하게 디자인이 변경됩니다. 이미 만들어진 부트스트랩 사이트를 위한 파일은 정식으로 말하자면 템플릿으로 해야 합니다. 일부는 다운로드 하려면 SNS에 공유해야 합니다. Seven - HTML Single Page Creative Portofolio Template 다운로드 사이트 데모 사이트 Pluton - Free Single Page Bootstrap Html Template 다운로드 사이트 데모 사이트 Smak - Free HTML single page template 다운로드 사이..

부트스트랩 템플릿 12종입니다. 일부 템플릿은 자바스크립트 에러 메시지가 나오고 구글 맵이 나타나지 않습니다. 위 코드에서 key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc& 부분을 제거하고 저장하면 됩니다. Barrier- a business template 다운로드 사이트 데모 사이트 Blue OnePage HTML5 Business Template 다운로드 사이트 데모 사이트 없음 Bondy — Free Multipurpose Bootstrap 3 One Page 다운로드 페이지 데모 사이트 Oleose — Eye Catching Mobile App Landing Page 다운로드 페이지 데모 사이트 SevenApp — Free Beautiful Mobile App La..

웹사이트에서 아이콘은 주로 이미지를 사용해왔습니다. 몇 해 전에 폰트 아이콘이 등장하면서 이미지 아이콘이 사라지는 듯 싶더니 다시 이미지로 전환되고 있는 추세입니다. 이미지도 그냥 이미지가 아닌 SVG 이미지입니다. 폰트 아이콘은 폰트로서의 기능을 그대로 구현합니다. 즉 색상이나 크기 변경이 가능한 것이죠. 아무리 크게 해도 흐려지거나 깨지는 일이 없습니다. 가장 큰 단점은 하나의 아이콘으로 다양한 색상을 만들 수 없다는 것입니다. 한가지 색으로만 아이콘이 만들어지는 것이죠. SVG는 Scalable Vector Graphics의 첫 글자로 크기 변경이 가능한 벡터 이미지를 의미합니다. 벡터는 그래픽 디자인에서 크기가 변경되면 수학적 계산에 의해 이미지를 재생성하는 역할을 합니다. 보통의 이미지는 크기가..