본문 바로가기

공부

오늘 하루 그만보기 (상단 배너) 유저의 시선이 많이 머무르는 위치가 웹사이트 상단, 하단이다 보니 띠 배너 형식으로 배너를 자주 넣게 됩니다. 오늘은 상단에 얇은 띠 배너 형식으로 배너를 넣고 브라우저 쿠키를 체크해서 오늘 하루 그만보기 기능을 넣는 소스를 알아보도록 하겠습니다. 1초 만에 회원가입하고 1000원 할인쿠폰 받기 오늘 하루 그만보기 닫기 css, html, script 를 따로 정리해 놓고 간략한 설명글은 주석을 달아 올려 놓았으니 한번씩 테스트해보시면 좋을 듯 합니다. 위 소스를 긁어서 보기 귀찮으신 분들은 하단에 첨부파일을 확인해 주세요~
[cafe24] 카페24 상품 이미지 섬네일 마우스오버 설정하기 카페24 쇼핑몰 제작 시 상품 섬네일에 마우스를 가져갔을 때 다른 이미지를 보여주는 방법을 공유하도록 하겠습니다. ※ 상품관리 1_상품관리 > 상품목록에 들어가서 상품등록 or 진열 상품을 클릭해서 들어갑니다. 2_하단에 이미지 정보로 이동합니다. 3_개별이미지등록을 클릭합니다. 4_이미지 사이즈 변경을 클릭하여 목록 이미지, 축소 이미지 사이즈를 추가하려는 이미지 사이즈에 맞게 수정해줍니다. 5_기본 상품 섬네일 이미지는 목록(medium) 이미지 입니다. 축소(small)에 마우스오버 시 노출될 이미지를 등록해 주세요. ※디자인관리 1_디자인관리에 들어가서 적용 중인 스킨에 수정을 클릭합니다. 2_상품분류 (list.html) 페이지를 열어주세요. 3_상품 이미지 노출 태그를 수정해 줍니다.
제이쿼리 슬라이드 배너 (ulslide) 제이쿼리를 이용한 간단한 슬라이드 배너를 소개해 드리겠습니다. 슬라이더를 검색하다가 간단한 슬라이더가 있어서 가져왔어요~ 버튼을 누르면 화면이 이동하고 마우스를 올려놓지 않으면 자동으로 롤링됩니다. 그럼 소스 나갑니다. 아래는 결과물 화면 캡쳐한 모습이에요.
제이쿼리 달력 달기 (datepicker) 제이쿼리 달력 플러그인 중에 많이 쓰이는 달력, datepicker를 소개해 드릴까 합니다. 먼저 http://jqueryui.com/download 에서 "datepicker"를 검색합니다. 플러그인을 다운받은 후 링크만 시켜주면 되는데요. JQuery Core 파일은 반드시 그 위에 external 시키시고, 안에 태그를 선택할 수 있는 selector를 지정합니다. 그럼 default로 사용 가능하죠. datepicker에 옵션을 추가해 줄 수 있는데 그 방법은 두가지가 있습니다. constructor를 만들고 option을 넣는 법. constructor를 만들때 argument로 {} 안에 option을 넣는 법 *옵션 1.animation animation의 종류에는 "show"."slideD..
제이쿼리 레이어 팝업 (bpopup) 레이어팝업이란? DIV 태그를 이용한 방법으로 사용자가 팝업 수행을 요청하면 DIV 영역을 제외한 부분의 명암이 어두워지면서 팝업이 띄워지는 형태를 말합니다. 대표적으로 아마존닷컴 같은 쇼핑사이트에서 이미지를 표시할 때 많이 사용됩니다. 그럼 샘플 소스를 통해 레이어팝업 예제를 수행해 보겠습니다. X 레이어 팝업이 완성 되었습니다. 팝업에 대한 크기는 content div에서 조정이 가능합니다 결과물 :
[다음 스마트워크] 도메인 이메일 주소 연결 (개인도메인으로 메일 사용이 가능한 무료기업메일) 요즘 저처럼 개인 도메인을 메일 주소로 활용하고 싶으신 분들을 많으실 텐데요! 그런 분들에게 도움이 될만한 무료 서비스를 찾아서 공유해보려고 합니다. 바로 다음(DAUM) 스마트워크 인데요 구글이나 네이버에서도 이런 서비스를 제공해주긴 하는데 유료 혹은 유료 예정 서비스라서 저는 다음 스마트워크를 선택했어요! http://mail2.daum.net/hanmailex/domain.html 다음 스마트워크 사이트에 접속해서 신청하기를 진행하던가 다음 메일에 접속해서도 스마트워크 서비스 신청을 할 수 있는데요 하단에 DAUM 스마트워크 버튼을 클릭하면 위와 같은 화면이 뜹니다! 자신에게 맞는 카테고리의 신청하기 버튼을 클릭해주세요~ 그럼 도메인 입력란에 자신이 소유한 도메인을 기입하고 다음 단계로 넘어가 주세..
[웹버튼] 버튼 종류 웹사이트를 제작하다 보면 빼먹을 수 없는 버튼!! 이 웹버튼에도 속성과 공식이 있는데요~ 아래 내용을 보면서 웹 버튼의 종류, 속성, 팁에 대해서 알아볼까 합니다. 먼저 버튼은 3가지 종류로 나눌 수 있습니다 1. positive : 화면의 변화를 주거나 정보를 추가하는 버튼 ("전송" "확인" "더보기" 등) 2. Neutral: 화면의 변화가 없거나 되돌아가는 버튼 ("취소"버튼 등) 3. Negative: 삭제, 리셋, 추가 정보를 차단하는 버튼 positive action button : positive 버튼은 주목성을 높이는 것이 중요합니다. Negative action button : Negative 버튼은 명암 차 등을 이용해서 positive 버튼보다 눈에 덜 띄게 디자인합니다. Neutr..
[해상도] 아이폰 해상도 오늘은 아이폰 해상도에 대해서 알아볼까 합니다. 아래 내용은 iOS Human Interface Guidelines에서 가져온 표입니다. 링크를 타고 들어가야 하는 부분이 있어서 하단에 Launch file or image 만 따로 정리하였습니다. 자세한 내용은 iOS Developer Library 사이트에서 확인 가능합니다. CLICK ▶ For iPhone 6: •750 x 1334 (@2x) for portrait •1334 x 750 (@2x) for landscape For iPhone 6 Plus: •1242 x 2208 (@3x) for portrait •2208 x 1242 (@3x) for landscape For iPhone 5 : •640 x 1136 For iPhone 4s : •..
[나인패치] 앱 제작 시 디자이너에게 유용한 나인패치 앱 제작 시 수많은 디바이스 별로 이미지를 슬라이스 해줘야 하는데요. 이때 유용한 것이 바로 나인패치 입니다. 예를 들어 아이폰의 문자 기능 중에 말풍선 같은 경우에 가로사이즈가 안에 들어가는 텍스트에 따라서 유동적으로 움직여야 합니다. 이럴 때 나인패치를 사용하게 되는데요. 밑에 이미지를 보면서 설명드리겠습니다. 1번의 배경이 투명한 이미지를 등록한다고 했을 때 가로 사이즈가 늘어나면 2번 이미지처럼 늘어나게 됩니다. 이때 3번 이미지처럼 보기 좋게 늘어나도록 고안된 것이 바로 나인 패치 도구라고 할 수 있습니다. 이때 참고하셔야 할 것이 나인패치로 저장된 파일명은 꼭 "파일명.0.png "여야 합니다. 나인패치 툴로 조작하는 것도 좋지만 간단하게 웹에서 변환 가능한 방법이 있어서 소개해 드릴까 합니다..
[오디오 변환] wav mp3 변환 사이트 wav 파일을 mp3로 전환해야 하는 작업이 필요해서 검색하다가 좋은 사이트를 찾아서 포스팅해보려고 합니다. http://media.io 라는 사이트인데요. 이 사이트는 mp3, wav, wma, ogg 등의 오디오 파일을 프로그램 설치 없이 웹사이트 상에서 확장자를 바꿔줍니다. 사이트에 접속하면 위와같은 화면이 보이실 텐데요. 1번에 select files to upload 버튼을 눌러서 가지고 있는 오디오 파일을 업로드합니다. 그 후에 2번 output format에서 변환하고 싶은 확장자를 설정해 줍니다. 3번 select quality는 음질 설정이니 원하시는 것을 선택해주세요. 숫자가 높을수록 음질이 좋습니다. 설정이 다 끝나시면~ 4번 convert를 클릭하면 끝!!
[닉컬렉션] 사진보정프로그램 무료배포 "구글 닉컬렉션" 사진 보정 프로그램 구글 닉컬렉션 전면 무료화!!!! 닉컬렉션(Nik Collection)은 원래 149달러에 판매되고 있는 유료 사진 보정 프로그램(플러그인)인데요~ 구글에서 인수하면서 현재 무료로 배포 중이에요! 사진 좋아하고 편집해야 하시는 분들은 어서 무브 무브!! (전면 무료화라고 해도 언제 유료로 다시 전환될지 모르니.. 파르르) 무료로 배포한다고 그저 그런 플러그인이라고 생각하실 수 있는데요. 절대 아닙니다! 닉컬렉션은 포토그래퍼나 전문가들이 가장 많이 사용하는 플러그인이라는 사실!! 일단 믿고 경험해 보시는 게 좋을 거 같아요! ※ 닉컬렉션 구성 ∙ 아날로그 Efex 프로 - 클래식 카메라, 필름, 렌즈의 느낌 ∙ 색상 Efex 프로 - 색상 수정, 보정, 특수 효과를 위한 종합 필터 세트..
[움짤만들기] 동영상, 사진으로 설치없이 간편하게 GIF 만들기! 요즘 포스팅을 하다 보니 움짤이 필요한 경우가 슬슬 생기더라고요~ 그래서 편히 움짤 만드는 법이 없나 하고 찾아보다가!! 설치 없이 간편하게 웹에서 만드는 방법이 있어서 포스팅을 해보려고 합니다. http://ezgif.com 이 사이트인데요~ 위 사이트에 가시면 이미지, 동영상 원본을 가지고 바로 움짤 gif 제작이 가능합니다. 먼저, 이미지로 움짤을 만드는 방법!! http://ezgif.com/maker 에 접속하시면 아래와 같은 화면이 나타납니다. 그럼 select images에 찾아보기를 클릭해서 이미지들을 업로드한 후에 파란색 Upload 버튼을 눌러주세요! 이미지를 확인하고 디레이 타임을 조정한 후에~ animate it 버튼을 클릭해주세요!! 완료가 되면 하단 부분에 옵션, 리사이즈, 스피..
[폰트] tiff,eot,woff 변환하기 ttf 파일을 웹폰트로 적용하기 위해서는 eot, woff 파일 과정을 꼭 거쳐야 합니다. 그럼 ttf 파일을 eot, woff 로 간단하게 변환하는 방법을 설명해 드리도록 하겠습니다. 첫 번째, ttf 폰트를 eot로 변환하기 http://eotfast.com 사이트에 접속하면 위와 같은 화면이 나오는데, free dounlode 버튼을 클릭해서 파일을 다운로드합니다. 압축을 풀면 위와 같이 파일들을 볼 수 있는데요. 별도의 설치나 실행 없이 ttf 파일을 EOTFAST-1.exe 에 끌어다 올려놓으면 자동변환이 됩니다. 두 번째, ttf 폰트를 woff로 변환하기 http://people.mozilla.org/~jkew/woff 사이트에 접속하면 위와 같은 화면이 나오는데, 윈도우 사용자는 for W..
[윈머지] WinMerge 프로그램 소스 비교 프로그램 퍼블리싱을 하다 보면 소스 비교가 절실할 때가 옵니다. 이걸 양쪽에 켜놓고 하나하나 눈으로 찾다 보면 찾기도 힘들뿐더러 사시 눈이 되겠죠?! 이럴 때 유용하게 사용할 수 있는 프로그램이 있어서 가져왔어요~ 윈머지 (WinMerge)라는 프로그램인데요. 소스를 불러오는 것만으로도 양쪽 시트의 차이점 분석이 가능하고 카피 기능도 있어 소스 비교가 아주 편리했습니다. 먼저 프로그램은 아래 사이트에가서 다운로드하여 주세요. http://winmerge.org 사이트에 접속하면 위와같은 화면이 보입니다. 녹색의 다운로드 버튼을 클릭하고 다운로드한 후에 설치를 해주세요! 윈머지를 실행하면 위와같은 화면이 나오는데요. 빨간색으로 체크한 폴더 모양 아이콘을 클릭하시면, 위와 같이 파일 선택 창이 나타납니다. 비교할 두..
jQuery 자식요소 내 요소 선택 자식요소를 찾는 메소드로는 find()와 children()이 있습니다. 처음에 두가지 요소에 무슨 차이가 있는지 몰라서 그냥 두개를 하나씩 넣어서 되는걸 사용했던 1인입니다. 그런데 이제 알고보니 children() 메소드가 한단계 아래의 요소중에서 찾는다면 find()는 모든 자식 요소 내에서 찾는점이 다르다고 합니다. (와..뭐..막..알듯말듯..계속 걍 번갈아 넣어볼 것 같은 느낌적인 느낌..) 1 2 이렇게 스크립트를 쓰게되면 btn을 클릭했을때 btn 내부에 p를 찾아서 on 클래스를 추가해주라는 내용이 됩니다. 만약에 btn 클래스가 여러개 있고, 내가 클릭한 btn의 자식요소에만 영향을 주고싶다면 아래와 같이 써주세요. 1 2 1 2 $('.btn').click(function() { $(..
jQuery 선택자 (selector) 1. 선택자 (Selector) 1. 기본 선택자 선택자 기능 태그 HTML 태그로 선택 .class 클래스 속성을 가지는 태그 선택 #id id속성을 가지고 있는 태그 선택 * 모든 태그 선택 2. 속성 선택자 선택자 사용법 기능 $("요소 선택[속성]") $("li[tktle]") 요소 중 속성이 포함된 요소만 선택 $("요소 선택[속성=값]") $("li[title='list']") 요소 중 속성이 값인 요소만 선택 $("요소 선택[속성^=텍스트]") $("a[href^='http://']") 요소 중 속성이 텍스트로 시작하는 요소만 선택 $("요소 선택[속성$=텍스트]") $("a[href$='.com']") 요소 중 속성이 텍스트로 끝나는 요소만 선택 $("요소 선택[속성*=텍스트]") $("a..
jQuery 기본 구조 (작성법) 제이쿼리 입문/시작하기 자바스크립트의 라이브러리 중 하나인 JQUERY(제이쿼리) 입문을 해보려고 합니다. 제이쿼리는 자바스크립트를 간결하게 라이브러리화 시켰다고 보시면 되구요~!! 어마어마한 양의 플러그인이 존재하며. 제이쿼리를 이용해서 제가 작업한 스타일시트 등을 컨트롤하면서 화면을 다양하고 다이나믹하게 만들 수 있어서 퍼블리셔들은 꼭 알아야할 부분이라고 생각합니다. 먼저 안에 위 내용을 삽입해서 jquery를 추가시켜 줍니다. (보통은 작업 시작할때 제이쿼리 파일을 다운받아서 웹에 올리고 그 주소를 링크시켜 주는게 좋습니다) 그리고 아래 기본구조 및 입력 방식을 토대로 제이쿼리에 쿼리함수를 입력해 주면됩닌다. 제이쿼리 기본구조 및 작성기초 위와 같이 .click(); 안에 function(){}을 ..
[해상도] 모바일 사이즈 가이드 모바일 해상도 사이즈 가이드 스마트폰의 보급이 확산되고 무수히 많은 제조사들의 합의가 이뤄지지않은 해상도 덕분에 디바이스의 사이즈가 어마무시하게 다양해지고 있는데요~ 이런 디바이스 문제로 인해 디자이너들은 사이즈 별로 디자인 작업을 따로 하거나 반응형으로 디자인을 하고 있습니다. (아하하하...해상도가 다 재각각이야...아하하...다 달라...하하하하하...하하하) 그래서 오늘은 저 처럼 다양한 디바이스 해상도로 인해서 고생하는 디자이너분들을 위해서 "모바일 작업 사이즈" 및 해상도, 팁을 정리해 보려고 합니다. * 아이콘 사이즈(정사각형) -안드로이드 : 36px, 48px, 72px, 76px, 96px, 144px, 512px -아이폰 : 29px, 57px, 58px, 80px 114px 120p..
[JS 변환] jsbeautifier js파일을 보다 보면. min으로 압축된 파일을 볼 수 있습니다. (전 처음에 그거보고 무슨 암호인 줄;;;;;) 압축을 하는 이유는 용량을 줄여 속도를 조금 더 빠르게 하기 위함인데요~ 저와 같은 까막눈 디자이너는... 이럴 때 눈을 감아버려!!! 완전히 꼭 감아버려!!! (가독률 문제가 아닌... 아예 이해 자체를 못하는 비루한 인간...) 이런 저를 위한 아름다운 사이트를 발견했습니다!!! http://jsbeautifier.org 접속하면 보이는 화면입니다~ 철저하게 디자인을 무시한 화면 때문에 많이 당황하셨죠? 무심코 이 사이트에 접속했다면 아마도 이상한 사이트인 줄 알고 냅다 화면을 껐을 거예요! ㅋㅋㅋ 다른 것들은 딱히 만지실 필요도 없고요~ (사실 다른 건 몰라서 눌러보지도 않았습니다 ㅋㅋ..
[소스] 로딩 GIF 인트로 페이지나 로딩 페이지를 만들 때 로딩을 표현해 줄 GIF 소스가 필요하죠?!! 그럴 때는 포토샵에서 이미지를 제작 후 애니메이션 타임라인에서 프레임을 생성해서 loof로 제작하거나, 에프터 이펙트에서 간단하게 만들어서 GIF로 랜더링을 하는데~ 시간적으로 여유가 없거나, 자체 제작이 힘들때는 아래 사이트를 이용해 보세요. http://www.ajaxload.info 위 사이트에 들어가면 손쉽게 다양하고 이쁜 로딩 GIF를 만들고 다운로드하실 수 있습니다. 사이트에 접속하면 위와 같은 귀여운 화면이 보이실텐데요~ indicator type에서 원하는 로딩 이미지를 선택하고 (원형에서 바형식 등 약 40가지 종류가 있습니다), backfround color에서 배경 칼라를 정하고, foreground..

티스토리툴바