본문 바로가기

메모장

파비콘 ICO 변환을 지원하는 사이트 Convertico.com 확장자 ICO 파일로 변환하기 convertico.com 은 png 파일을 ico 파일로 변화해주는 사이트입니다. browse 버튼을 클릭해서 변환하고자 하는 이미지파일을 선택한 다음 우측의 Go 버튼을 클릭하면 ico 변환된 파일을 다운로드 할 수 있습니다. 유용히 사용하셔용 ㅋ 참조 - http://webdir.tistory.com/337 2015.6.15
[jQuery] 제이쿼리를 사용한 드래그, 터치 이미지 슬라이드 샘플 [jQuery] 제이쿼리를 사용한 드래그, 터치 이미지 슬라이드 샘플 모바일 기기에서 터치로 동작하는 이미지 슬라이더는 이미 한번 작업한 적이 있었습니다. 당시에는 모바일웹 초창기라 그것도 괜찮았었는데... 이제는 반응형 웹이라고 해서 웹상에서 드래그까지 지원하는 이미지 슬라이드가 필요하게 되었네요. 그래서 급 공부(?)를 했습니다. 그 결과로 샘플 페이지를 작업해서 기록의 목적으로 저장해봅니다. 관심있으신 분들은 다운로드 받아서 분석하시면 좋으실 것 같습니다. 2015.3.23.
[CSS] 에릭 마이어의 CSS 리셋, CSS 기본선언, CSS 초기화 에릭 마이어의 CSS 리셋, CSS 기본선언 보통 사이트 CSS 파일을 처음 작업시 여러가지 셋팅값을 초기화(?)해야 합니다. 기본값들을 초기화 하는 것이죠. * {margin:0;padding:0;} 이렇게만 해도 많은 속성들이 초기화가 될 것입니다. 하지만, 브라우저에 쓸데없는 일을 시키는 것일 수도 있습니다. 그래서 CSS 고수(?) 에릭 마이어의 기본선언법을 참고하려 합니다. 이것도 정답이다~! 라는 것은 아니고 유용하니 사람들이 많이 사용하는 것이겠지요. 저 또한 그러한 사람들 중에 하나지요. 아마 제 블로그는 드래그가 안 될테니 파일을 첨부하도록 하겠습니다.^^ 텍스트
유투브 영상 삽입시 가로세로비율을 계산해서 반응형으로 사이즈 조절 완벽해결 유투브 영상 삽입시 가로세로비율을 계산해서 반응형으로 사이즈 조절 완벽해결 유투브에 있는 영상을 퍼올때 보통 고정사이즈로 삽입을 하게 되는데요. 요새 트렌드가 반응형이잖아요. 그래서 보통 인터넷에서 검색하면 가로 사이즈를 100%로 넣어서 해결하는 방법을 제시합니다. 하지만, 이 방법을 적용하면 모바일에서는 세로가 PC버전으로 고정되어 있어 검은배경이 길게 표시되죠. 그래서 찾은 방법은 바로 이 방법입니다. 해당 사이트에 들어가셔서 유투브 동영상의 URL를 입력하면 스타일 시트로 계산해서 스크립트를 제공합니다. 저같은 경우는 아예 CSS 에서 해당 코드를 삽입한 다음 일괄적으로 적용하는 방법으로 사용하고 있답니다 ㅎ 유용하게 사용하시길 바랍니다. ㅎ P.S 아이프레임(iframe) 이나 임베드(embed..
라이트룸 Lightroom 도움말 / 단축키 정리 라이트룸 Lightroom 도움말 / 단축키 정리 패널로 작업하기 위한 키 결과 Windows Mac OS 사이드 패널 표시/숨기기 Tab Tab 모든 패널 표시/숨기기 Shift + Tab Shift + Tab 도구 모음 표시/숨기기 T T 모듈 피커 표시/숨기기 F5 F5 필름 스트립 표시/숨기기 F6 F6 왼쪽 패널 표시/숨기기 F7 F7 오른쪽 패널 표시/숨기기 F8 F8 단독 모드 전환 Alt 키를 누른 채 패널 클릭 Option 키를 누른 채 패널 클릭 단독 패널을 닫지 않고 새 패널 열기 Shift 키를 누른 채 패널 클릭 Shift 키를 누른 채 패널 클릭 모든 패널 열기/닫기 Ctrl 키를 누른 채 패널 클릭 Command 키를 누른 채 패널 클릭 왼쪽 패널 열기/닫기(하향식) Ctrl ..
CSS3로 구현한 여러 애니메이션 효과를 간단하게 구현할 수 있는 Magic Animations CSS3 CSS3로 구현한 여러 애니메이션 효과를 간단하게 구현할 수 있는 Magic Animations CSS3 간결하면서도 다이나믹한 효과들이 여러가지 있네요. 이번에 사용해봐야겠습니다.ㅋ 2015.3.11.
CSS와 jQuery로 구현한 3D 박스효과 Turnbox.js CSS와 jQuery로 구현한 3D 박스효과 Turnbox.js 언제가 기회가 되면 한번 사이트에 적용해보고 싶네요 ^^; 2015.3.10.
CSS3 와 jQuery를 활용한 3D Curtain Template, 커튼효과 사이트 템플릿 3D Curtain Template, 커튼효과 사이트 템플릿 데모를 보시면 좀 다이나믹한 사이트를 제작할 수 있다는 기대감이 들게 되는 템플릿입니다. 소스를 수정해서 응용한다면 꽤 멋진 사이트가 될 것 같네요. 2015.2.2.
CSS3를 활용한 롤오버(호버) 효과 라이브러리, HOVER.CSS CSS3를 활용한 롤오버(호버) 효과 라이브러리 - hover.css 일단 위 링크를 보시면 얼마나 유용한 소스인지 아실 겁니다. ^^ 2015.1.29.
CSS3 버튼 만들어주는 사이트 (한국어버전), CSSGENERATORS CSS3 버튼 만들어주는 사이트(한국어버전) 사이트에서 CSS3 로 여러가지 효과를 자동으로 스크립트 해주는 사이트는 많습니다. 다만, 한국어 지원은 보기가 힘들었지요. 그런데, 이렇게 한국어로 설명해주는 사이트가 있네요. 스크랩해봅니다. ㅎ 아래 링크를 클릭해서 이동하세욥~! 2014.12.29.
[CSS] 텍스트에 특정배경이미지를 마스킹하는 CSS 배경 클립 텍스트 배경 및 그라디언트 h1 { background:url(image_url_here); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 더 자세한 내용은 아래 링크를 클릭하셔서 보세요. 이 CSS 문법의 가장 큰 단점이 하나 있습니다. 바로 웹킷브라우저에서만 작동가능하다는 것~! 아직까지는 익스때문에는 활용되기 어렵겠네요. 하지만, 모바일 전용 사이트라면 충분히 멋진 기법일 것 같습니다. 2014.11.27.
이미지내 지정한 포커스에 따라 이미지사이즈가 변경되는 반응형 jQuery 플러그인 Intelligent cropping for flexible image containers 유연한 이미지 컨테이너 반응형 플러그인 사실 이 기능을 찾기 위해 검색을 한 것은 아니지만, 아주 유요한 플러그인을 우연히 발견하여 이렇게 기록용으로 포스팅합니다. 간략하게 설명하자면, 반응형 사이트에서 사이트내에서 사용하는 이미지가 자동으로 크롭되잖아요. 이때 이미지의 정렬은 보통 left, right, center 인데요. 이 플러그인은 이미지내에 포커스 좌표를 지정하여, 그 포커스를 center로 정렬하는 플러그인입니다. 아래 이미지를 예로 들면, 넓은 창일때의 이미지 좁은 창일때의 이미지 도마뱀의 눈에 포커스를 맞추어 이미지가 반응형으로 크롭된다는 것이지요. 이 기능이 유용한지 안한지에 대해서는 모바일 사이..
특정 단어를 입력하면 컬러를 추천해주는 사이트, Colores Manugarri 컬러추천 사이트, colores.manugarri.com 사이트에 접속하시면 그냥 검색바만 덜렁 있습니다. 그 곳에 특정 단어를 입력하고 검색을 하게 되면, 그 단어의 검색이미지를 통해 어울릴것 같다는 색상을 추천해줍니다. 그나저나 로딩이 약간 느리네요. 하지만, 충분히 유용하다 생각하기에 메모해 둡니다 ㅎ 2014.11.21.
웹디자이너를 위한 2014 가장 인기가 많았던 무료폰트 다운로드, Free Font 35 Most Popular Free Fonts In 2014 예쁜 폰트 많네요 ^^; 그것도 무료임돠 ㅎ 2014.11.12.
핀터레스트 Pinterest 가 도대체 왜 유명한거지? ㅎ 디자이너라면? 스크랩을 좋아한다면? 친구에게 들은 핀터레스트~! 너 핀터레스트 하니? 아니 그게 뭔데? 그때는 그냥 흘려 넘겼었었습니다. 뭔지도 몰랐을 뿐더라...관심도 없었기 때문이지요. 하지만, 어느날 한번 해볼까라는 마음으로 접속을 해보았습니다. 어랏? 이 로고 어디서 많이 봤는데? ㅎㅎ 유명한거였네?^^ 이러면서 시작했습니다. 워낙 직관적인 UI이라 그냥 사이트를 보면 사용법을 대충 알수 있습니다. 이 핀터레스트는 미디어SNS의 한 종류입니다. 이미 외국에서는 페이스북, 트위터, 핀터레스트 3대 SNS라고 하네요? ㅎ 그리고, 워낙 많은 정보와 많은 영감을 주는 미디어들... 디자이너들이 자주 시간을 투자할 만한 사이트인 것 같아요. 그렇다고 무단도용은 금물입니다 ㅎ 여튼, 저도 이제 시작해보려합..
[CSS] input submit 버튼의 텍스트에 font awesome 아이콘 사용하기 겁나 유용한 Font Awesome을 사용하다 input submit 타입에서 막혔다 열심히 사이트 작업을 하던 중 이번 포스팅의 제목처럼 input submit 타입에서 막혔다. 말인 즉, input 타입중 submit 타입은 value 로 버튼 안의 텍스트를 제어 하는데... 이 안에 태그를 사용하지 못하기 때문에 곤란해졌었다. 맨처음에는 스트립트로 제어를 하려 했는나...안되기는 마찬가지... 분명히 나와 같은 문제를 겪었던 사람이 있을텐데... 네이버 검색에서는 일단 font Awesome 에 대한 자세한 내용은 없었다. 온통 그냥 font awesome 어떻게 사용하는 지에 대한 포스팅만 많을 뿐...문제점에 대한 포스팅은 없었다. 그래서 구글링으로 넘어갔다...단박에 찾음...구글링의 위대함을..