-
Html, CSS 2014‧09‧04
CSS - vimeo 영상 높이 값 반응형으로 적용하기
vimeo를 삽입하다보면 iframe을 이용해서 홈페이지에 삽입하게 된다.그런데 이게 아이프레임으로 크기를 잡아버려서 브라우저 창이 조절 될 때 안의 영상은 이상한 비율로 보여질 때가 있다.이는 반응형웹에 적절하지 않은 사항이기 때문에 팁을 하나 얻어왔다.참고로 처음에는 자바스크립트로 엘리먼트를 제어하는 것을 만들어서 사용해 왔으나 순수 css만으로도 충분히 구현해 낼 수 있기에 css로 처리하려고 한다. 아래 설명을 보면서 진행해보자. <iframe src="//player.vimeo.com/video/동영상 […]
-
Javascript, jQuery 2014‧08‧26
IE9에서 script5022 DOM Exception: INVALID_CHARACTER_ERR (5) 오류 났을 때
반응형웹 사이트 프로젝트를 할 때 크로스 브라우징 검수를 할 때가 있다.작업하는 PC의 IE가 10이고 개발자 도구를 이용하여 IE 9 이하를 테스트하는 것과 실제 순수 IE9 이하와는 결과가 틀리게 나오는 경우가 많다. 또한 IE Tester도 비슷하게 구현하는 것인지라 최대한 가상 PC를 설치하여 테스트함을 추천한다. 위에 언급한 것과 같이 개발 도구에서 에뮬레이션으로 IE9로 설정하고 테스트 하여도 자바스크립트 […]
-
Javascript, jQuery 2014‧07‧24
jQuery - a 태그의 href 값 변경하기
이미지 같은 경우에는 attr('src', 변경할 값) 으로 새롭게 속성값을 변경하지만 a 태그의 href는 프로토타입을 수정한다. 예를 들어 linkButton 이라는 클래스를 가진 a 태그가 있다고 할 때 아래와 같이 속성을 변경한다. $('.linkButton').prop('href', 변경할 값)
-
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자 정도까지 가져오란 것인데 혹 파일명이 길 경우 파일명을 가져올 […]
-
Wish become to creative developer with new intelligent and experienceWish become to creative developer with new intelligent and experience
-
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 , 이미지에 마우스 오른쪽을 눌러 다른이름 저장하시거나 클릭하여 원본을 확인하셔도 됩니다. 아래는 위 이미지를 만들기 위해 리터칭하기 전에 자료들입니다.
-
nis@naminsik.com (ง •̀_•́)ง facebook.com/kisniman instagram(@kisniman) ฅ•ܫ•ฅnis@naminsik.com (ง •̀_•́)ง facebook.com/kisniman instagram(@kisniman) ฅ•ܫ•ฅ