-
Html, CSS 2014‧06‧11
css - 텍스트에 그림자와 그라데이션 함께 넣는 코딩
코드 미리 보기 : http://jsfiddle.net/2GgqR/2/ 텍스트에 그림자 효과와 그라데이션 효과를 함께 넣고 싶을 때가 있다.물론 정식으로 코드를 제공하진 않지만 많은 사용자들이 이 효과를 위해 여러가지 방법을 동원한다.그 중에서 가장 효율적인 방법은 아래와 같다. h1 { font-size: 72px; background-image: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position:relative; } h1:after { background: none; content: attr(data-text); left: 0; position: absolute; […]
-
Javascript, jQuery 2014‧05‧23
현재 보이는 페이지의 파일명 가져오기
현재 위치한 페이지 파일명을 가지고 특정 액션을 취할 때가 있다.document.URL 이 전체 경로와 파일명을 포함한 경로이다.여기서 마지막에 걸려있는 폴더 / 구분을 기준으로 시작과 끝 문자열을 정의해서 가져온다. var CurrentFileName = document.URL.substring(document.URL.lastIndexOf("/") + 1, document.URL.lastIndexOf("/") + 30); //console.log(CurrentFileName); 위 코드를 보면 30이라는 숫자는 파일명이 확장자 포함 30자 정도까지 가져오란 것인데 혹 파일명이 길 경우 파일명을 가져올 […]
-
Javascript, jQuery 2014‧05‧22
Return false 대체하기
예전에는 <a href="#">을 사용해서 스크립트로 버튼을 구현하게 되었는데, 이 상태로 클릭하면 항상 맨 위 페이지로 올라가기 때문에 return false를 이용하였었다.하지만 이제 return false는 버리자! 아래와 같이 함수화 해놓고 활용하면 좋다. function eventClick(event){ if(event.preventDefault){ event.preventDefault(); //FF } else { event.returnValue = false; //IE } } //return false 대신용 #링크 사용시 꼭 넣을 것 그리고 사용할 때는 […]
-
Html, CSS 2014‧05‧20
CSS3 - 이미지 또는 div 회전
회전 시킬 이미지의 클래스를 .spinimage라고 가정하고 4초동안 한바퀴 돌아가는 애니메이션을 구현한다고 할 때 아래와 같이 만들면 된다. .spinimage{ -webkit-animation: spin 4s infinite linear; -o-animation: spin 4s infinite linear; -moz-animation: spin 4s infinite linear; animation: spin 4s infinite linear; } @-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} } @-moz-keyframes spin { 0% {-moz-transform: rotate(0deg);} […]
-
WP Tip & Tech 2014‧04‧18
워드프레스 db 테이블 접두어(table prefix) 변경 방법
워드프레스를 이용하다보면 호스팅을 이전해야하거나 여러 개의 워드프레스를 한 호스팅안에 설치할 경우가 생겨납니다. 그런데 이렇게 하나의 DB안에 여러 개의 워드프레스를 설치하기 위해서는 워드프레스 설치 당시 접두어인 wp_ 라고 입력되어있는 부분을 다르게 입력하고 설치하면 되지만 이미 다른 호스팅에서 설치되어있는 워드프레스를 옮겨와서 접두어(prefix)만 변경해서 이전하고 싶을 때가 있습니다. 워드프레스를 위한 DB 테이블 접두어 변경 방법 1. […]
-
WP Tip & Tech 2014‧04‧12
목록이 여러 페이지일 때 첫페이지와 나머지 페이지 다르게 구성하기
워드프레스로 제작한 사이트에서 메인 또는 카테고리 목록에서 포스팅들이 많아 페이지 번호로 구성되어 여러 페이지로 나뉘어 있을 때가 많습니다.접속 페이지 경로를 보면 ~/page/2/ 이렇게 표시되는 경우를 말합니다. 그런데 목록 첫번째에서만 배너나 슬라이드를 보여주고 나머지 페이지에서는 다르게 구성하고 싶을 때 활용합니다. 사용 방법은 아래와 같이 조건문을 사용하고 계신 테마 폴더의 index 구성 파일이나 category 구성 파일에 넣으시면 […]
-
Memo 2014‧04‧11
WERTY2014 바탕화면 아트웍
오래전에 만든 아트웍을 조금 변형해서 바탕화면용으로 만들었습니다.사이즈 : 1280 x 720 pixel , 이미지에 마우스 오른쪽을 눌러 다른이름 저장하시거나 클릭하여 원본을 확인하셔도 됩니다. 아래는 위 이미지를 만들기 위해 리터칭하기 전에 자료들입니다.
-
Web Design 2014‧04‧08
원페이지 웹사이트
요즘 마이크로 사이트에서 조금씩 유행이 되어가고 있는 원페이지는 하나의 페이지 안에 스크롤링을 하여 컨텐츠를 정리해 놓은 사이트를 말합니다. 먼저 해외부터 볼까요? We Are Visual Animals 비주얼 디자인 중심의 기업 또는 그룹인듯한 WAVA 사이트입니다.첫페이지에서 클릭하여 내려가거나 우측에 네비게이션 UI를 이용해서 위아래로 이동합니다.눈 모양은 그 해당 페이지에 사람과 관련된 상세 페이지가 열립니다.상세 페이지 또한 세로 스크롤이며 반응형에 […]
-
WP Tip & Tech 2014‧04‧01
각 카테고리별로 노출되는 포스트 갯수 설정하기
워드 프레스는 [대시보드] → [설정] → [읽기]에서 '페이지당 보여줄 글의 수'에 입력한 숫자만큼 카테고리나 첫 페이지에 보여지게 된다. 그러나 카테고리에 따라 갯수를 다르게 보여주고 싶을 때가 있다. 다음과 같이 예를 들어 A라는 카테고리의 경우는 10개, B라는 카테고리의 경우는 20개, C라는 카테고리의 경우는 30개를 보여주고 싶다면 일단 가장 적게 보여줄 갯수를 [대시보드] → [설정] → [읽기]에서 '페이지당 보여줄 글의 […]
-
Tools, Web Design 2014‧04‧01
디자이너들에게 추천하는 크롬 브라우저 앱기능
실무자 중에서도 크롬이나 파이어폭스를 이용해서 웹을 서핑하는 분들이 많이 계실꺼라 생각합니다. 그 중에 크롬에는 크롬 웹스토어를 통해 새로운 기능들을 추가할 수 있는데요. 이 앱들로 인해서 작업하기도 수월하고 간단합니다. 1. 창 크기를 조절하여 반응형웹을 테스트하기 적합한 'Window Resizer' 다운로드 경로 : https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh 크롬 브라우저로 위 경로를 접속해서 설치하게 되면 브라우저에 아래와 같이 아이콘이 생깁니다. 이렇게 추가된 […]