strpos()와 strrpos() 함수는 strstr()과 유사한 방식으로 동작한다. 하지만 strpos()의 실행 속도가 더 빠르기 때문에 strstr()대신 strpos()의 사용을 권장한다고 한다. 문장이나 특정 변수에서 특정 문자가 있는지 체크하려면 strpos(), strrpos() 함수를 사용하면 된다. strpos([대상 문자열], [조건 문자열]) strpos([대상 문자열], [조건 문자열], [검색시작위치(숫자)]) strrpos([대상 문자열], [조건 문자열]) strrpos([대상 문자열], [조건 문자열], [검색시작위치(숫자)]) 둘의 차이는 strpos 함수는 영문자의 대소문자를 구별하여 검색한다. 영문자 대소문자를 구별하지 않고 검색하려면 strrpos()함수를 사용하면 ..

브랜드 홈페이지에서 로고를 무한으로 회전시켜서 임팩트 있는 UI를 만드는것이 최근 자주 보이는 것 같다. 무한 회전하는 이미지를 CSS로만 구현이 가능하다는 사실! 코드는 매우 간단하다. .img {animation: rotate_image 6s linear infinite;transform-origin: 50% 50%;} @keyframes rotate_image{ 100% { transform: rotate(360deg); } } animation: rotate_image 6s linear infinite; rotate_image 라는 이름을 가진 키프레임을 실행시켜라 6s : 6초에 한번씩 (animation-duration) linear : 동일한 속도로 (animation-timing-funct..

회원가입이나 폼 입력시에 해당 항목에 대한 상세한 설명이 필요한 경우, 상세하게 설명을 넣을수도 있지만 필요에 따라 볼 수 있게 툴팁으로 안내가 가능하다. 생일 옆에 느낌표 아이콘에 마우스를 대보면 해당 항목에 대한 상세 설명을 툴팁으로 띄워준다. 툴팁의 배경색상이나 폰트 컬러도 변경가능하다. jquery ui 파일 로드 일단 관련된 jquery ui파일을 로드한다. html 툴팁이 나오게할 아이콘 또는 요소를 넣는다. 툴팁 설명은 title=""안에 넣으면 된다. 여기서는 Font Awesome 을 활용하였는데, 꼭 Font Awesome이 아니더라도 input, img 등 다양하게 활용이 가능하다. 스크립트 삽입 위에 넣은 툴팁 아이콘 클래스명을 알맞게 넣어주고 tooltip() 스크립트를 넣어주면 ..

Adobe XD로 앱 화면을 60페이지 넘게 작업을 마치고... 이 많은 내용을 어떻게 하면 개발자에게 잘 전달할 수 있을까 고민을 많이 했다. XD에서 프로토타입을 바로 만들어볼 수도 있지만, 개발자나 기획자에게 유저플로우를 한번에 이해시키기에는 한눈에 도식화 할 필요가 있었다. 여기저기 알아보다가 알게된 툴이 있는데 아주 좋은 것 같다! Overflow 툴 소개 The world's first user flow diagramming tool tailored for designers. Build and present beatiful user flow diagrams that tell a story. 오버플로우는 세계 최초 디자이너에게 최적화된 유저플로우 도식화 툴이다. 스토리를 말해주는 아름다운 유저플..

티스토리 자체에도 코드를 넣을 수 있는 기능은 있지만 결과를 실시간으로 보여줄수가 없는데, jsfiddle은 코드결과도 공유 가능하고, html, script, css를 나누어서 한눈에 잘 보여줘서 아주 유용하게 활용이 가능하다. 티스토리 외에도 html 입력이 가능한 블로그 어디에서나 jsfiddle를 통해서 코드를 공유가 가능하다. JS피들이란? JSFiddle은 사용자가 만든, 협업형 HTML, CSS, 자바스크립트 코드 스니펫을 테스트하고 알리기 위한 온라인 커뮤니티이다. (출저:위키백과) 블로그에 jsfiddle 코드 공유 하는 방법 1. jsfiddle.net 사이트에 접속 해서 로그인을 한다. 2. 코드를 입력한다. jsfiddle 사이트에 처음 들어가면 아래와 같이 왼쪽 상단에 HTML, ..

예전에 한 때 홈페이지에 항상 퀵메뉴가 있던 시절이 있었는데, 없어지는 듯 하다가 요새 다시 보이는 듯 하다. 아무래도 쇼핑몰이나 고객의 요구에 빨리 응해야하는 사이트에서는 퀵메뉴가 필수불가결한 요소인 것 같다. 보통 오른쪽에 완전히 고정해두는 형태(position:absolute)로 넣을 수도 있지만 완전 고정해두면 좀 유연성이 없어보이고(?) 너무 큰 사이즈로 넣는다면 사이트의 다른 구성요소보다 더 이목이 집중되는 느낌... 요새는 아래처럼 작은메뉴를 만들어 스크롤 내릴때 마다 부드럽게 따라오는 형태로 많이 사용하는 것 같다. jquery를 활용하면 부드럽게 따라오는 메뉴를 만들 수 있다. 일단 결과물은 아래 HTML 퀵메뉴를 구성하고 클래스값(quickmenu)이나 아이디를 지정한다. 등급별혜택 1..

작업을 많이 하다보면 레지스트리나 불필요한 파일들이 조금씩 생겨나면서 컴퓨터 용량을 잡아먹는다. 컴퓨터 파일 정리 프로그램이 무척이나 다양한데 최근에 알게된 깔끔한 프로그램을 소개하려고한다. Wise Disk Cleaner 와이즈 디스크 클리너 추천하는 이유 - UI가 깔끔하고 한눈에 보기 쉬움. 따로 사용 방법이 필요 없음 - 광고가 없음 - 한국어버전 지원 일반정리 일반정리를 하면 Windows시스템, 웹브라우져 캐시, 쿠키 등을 정리해준다. 요새 틈만나면 정리를 해줘서 한번 할 때마다 확보되는 용량은 적은데, 처음에 이 프로그램을 실행했을 때는 몇 기가씩이나 확보가 되었다. 그만큼 용량확보를 잘해주는 편! 고급정리 디스트별로 정리를 할 수 있다. 주기적으로 청소해주면 쾌적한 하드를 사용이 가능하다...

간혹 스킨을 편집하다 보면 가격이 제대로 표기가 안되는 경우가 있다. 이 경우 스마트디자인 편집 창에 들어가서 product > detail.html 파일을 수정해주어야한다. {$product_price}을 찾아서 {$disp_product_price} 로 변경해주기만 하면 끝! detail.html 파일안에 여러군데에 {$product_price}가 있는데 모두 찾아서 바꿔주면 된다. 주의할 점은 앞 부분의 {$product_price_display|display}는 $disp_를 추가하지 않고 그대로 두어야 한다는 점! {$disp_product_price} [적용 결과] 세자리마다 콤마가 찍히고 화폐단위(원)이 같이 나오게 된다.

placeholder="아이디를 입력하세요">이런식으로 태그에 직접 속성을 지정해주면 간단하지만 간혹 직접 지정이 어려운 경우가 있다. ex) 카페24에서는 자체 모듈(변수)로 회원가입 인풋항목을 생성하기 때문에 인풋 태그 안에 placeholder를 직접 지정해줄수가 없다.또는 제이쿼리 스크립트에 따라 속성이 추가되거나 삭제되어야하는 경우 등  이런 경우 아래의 스크립트를 넣어 해결이 가능하다.$( document ).ready( function() { $("input#member_id").attr("placeholder", "아이디를 입력하세요");}); 그러면 직접 placeholder="아이디를 입력하세요"를 넣지 않고도 동일한 결과를 얻을 수 있다.  attr()의 다양한 활용 방법제이쿼리의..

티스토리 글 단에 [구독버튼]이 작게 기본 UI로 들어가지만 실질적으로 눈에 잘 띄지는 않아서 구독하기 버튼을 조금 더 잘 노출하고 싶다면 포스팅 중간중간 삽입해주는 것이 좋다. 글 중간에 구독 버튼 넣는 방법 1. 티스토리 설정에서 [꾸미기] > [메뉴바/구독설정]페이지에 들어가 구독 버튼이 설정되어있는지 확인해야한다. 구독버튼을 '표시합니다', 구독버튼을 '오른쪽상단'에 위치합니다로 설정한다. 2. 내 티스토리 블로그 빈 화면 아무데나 데고 오른쪽 마우스를 클릭해 [페이지 소스보기]를 클릭한다. 익스플로러의 경우에는 메뉴명이 [소스보기]이다. 3. 소스보기를 하면 티스토리 코드를 확인할 수 있는데, Ctrl + F를 누르고 btn_subscription 를 검색한다. 4. btn_subscriptio..

기본 sql 구문 $sql = " select * from 테이블명 where wr_is_comment = '0' and wr_id = '{$view['wr_id']}' "; $row = sql_query($sql); 이 기본 구문은 배열로 보여주기 때문에 보통 for 문과 함께 많이 사용한다. 아래와 같이 for문과 함께 사용하면 해당되는 값을 모두 불러온다. [for문과 함께 사용 예시] $sql = " select * from 테이블명 where wr_is_comment = '0' "; $result = sql_query($sql); for ($i=0; $row=sql_fetch_array($result); $i++) { echo $row['id']; } where 조건절에 해당하는 값이 딱 한개만..

어느 분야에서든 활용하실 수 있는 직접 만든 깔끔한 견적서 양식 공유합니다. 무단 재배포는하지 말아주세요. 파일다운로드 (엑셀, pdf) #물건납품견적서 #홈페이지제작견적서 #깔끔한견적서 #견적서양식

하나의 회사 도메인으로 홈페이지 주소로도 사용하고 이메일 주소로도 사용하는 경우가 많다. 이렇게 사용하기 위해서는 몇가지 설정이 필요해서 정리해보려고한다. STEP 1. 도메인 네임서버 설정 도메인의 네임서버를 홈페이지 서버의 네임서버로 설정해준다. STEP 2. 대표도메인 설정 홈페이지 및 메일 서버의 대표 도메인을 설정한다. 예) 둘다 모두 abc.com으로 설정 STEP 3. 도메인 설정 이용하는 서비스 홈페이지의 도메인 DNS 설정에 들어가 메일 서버의 A레코드, MX값, SPF값을 넣어준다. 카페24 서비스에서는 직접 설정이 가능하다. (나의서비스관리 > 도메인 관리 > 도메인 부가서비스 > DNS관리) 혹시 직접 설정할 수 있는 부분이 없다면 도메인 업체에 전달하면 설정해준다. [일반 메일서버..

이전글 - [네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ① 메타태그 설정 [네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ① 메타태그 설정 네이버에 사이트 등록하기 (네이버 웹마스터도구) STEP 1. 메타태그 삽입 네이버 또는 다른 포탈사이트에 내 홈페이지를 등록하기 위해서는 몇가지 설정을 해야하는데 그 중 가장 먼저 해야할 일 hongpage.kr 이전 글에 이어 네이버 웹마스터 도구를 통해 네이버에 홈페이지를 등록 하는 방법을 안내하려고한다. 홈페이지/블로그에 메타태그 설정하는 방법은 이전 글을 참고하면 된다. 홈페이지 파일 내에 메타태그를 설정했다면 이제 네이버 웹마스터도구에 등록할 차례이다. 네이버 웹마스터도구에 사이트 등록하기 1. 네이버에 로그인 한 후, 네이버 서치어드바이처 홈페..

FontAwesome(폰트어썸)이란? 폰트어썸(Font Awesome)은 웹상에 많이 사용하는 아이콘을 벡터 형태로 제공해주는 서비스이다. 무료버전, 유료버전이 있는데 무료버전에서 제공하는 아이콘만해도 1609가지라 활용도가 높아서 홈페이지에서 많이 사용하고있다. 홈페이지를 만들 때 아이콘을 하나하나 만들지 않고, 코드를 가져다 쓰면 바로 사용할 수 있어서 아주 편리하다. Font Awesome 사용방법 1. 가입후 키트 코드 복사하기 1. https://fontawesome.com/에 접속해서 회원가입 후 로그인한다. Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More ..