-
2013, 2013-2014 2013‧09‧07
2013 Korea Mobile Ad Awards
2013 대한민국 모바일 광고 시상식과 관련된 프로젝트가 진행되어 웹사이트를 제작 및 운영을 진행하였다.반응형웹으로 제작되었으며 디자인 및 html5, css3, jquery를 직접 코딩하였다. 레이아웃은 싱글 페이지에 세로로 스크롤 되는 형식을 취했다.초반 디자인 시안에서 사이트의 성격에 맞춰 클라이언트의 요청으로 많이 걷어낸 상태다. < 디자인 시안 >
-
WP Tip & Tech 2013‧09‧05
포스트에 작성자 정보 노출하기 (프로필 이미지, 이름, 이메일등)
워드프레스 사이트를 공동 운영하다보면 필요에 따라 서브 운영자들의 정보를 노출하여 주는 것도 좋다. 그 들이 작성한 컨텐츠를 존중해주기 위한 배려이기도 하다. (아래 그림의 빨간 박스 참고) 그래서 대부분의 테마에서는 About The Author 란과 같이 코멘트 위에 작성자 정보를 노출하는 것도 있다. 하지만 내가 원하는 정보로 노출해주고 싶거나 기존에 노출하는 코드가 없다면 이 기회에 노출해보자. Single.php 를 […]
-
Tools 2013‧09‧05
Sublime Text 2 - 작업중 브라우저로 미리보기 추가
작업을 하다보면 현재 작업 중이던 문서를 미리 웹브라우저로 보고싶을 때가 있다.드림위버의 경우 저장된 상태에서 F12를 클릭하면 웹브라우저로 미리보기가 가능하지만 서브라임텍스트2에서는 기본 지원이 되지 않는다.그래서 preview 플러그인을 설치하여 사용해보자. 명령 팔렛트(Shift+Ctrl+P)를 열어 Install Package를 선택한 후 Preview 검색하면 아래 그림과 같이 나온다. 설치가 진행되고 난 후 F12키를 누르면 작업중이던 문서가 웹브라우저로 보이게 된다. 단축키 변경 방법 다른 […]
-
WP Tip & Tech 2013‧08‧28
카테고리에 따른 사이드바 위젯 다르게 보이기
사이트를 운영할 때 고정적으로 사용하는 우측의 사이드바 위젯이 있는 반면, 카테고리별로 다르게 보여주고 싶을 때가 있다. 오전에 페이스북에 한 유저분이 올린 글을 보고 정리를 해드려야겠다는 생각이 들었다. 혹시 해외에는 방법이 있나 싶어 워드프레스 서포트 사이트를 뒤져 보았지만 5년전에 올라온 글이라 별로 현재 버전에 맞지도 않았다. 그래서 레퍼런스 사이트를 뒤져보다가 http://codex.wordpress.org/Function_Reference/dynamic_sidebar 위 내용을 조금 읽어보니 문법을 만들면 될 […]
-
Inspiration, UI Design, Web Design 2013‧08‧27
Flat Web & UI Design 관련 자료 모음 (계속 업데이트)
1. Flat UI Kit (free download!) url : http://www.webdesignerdepot.com/2013/05/flat-ui-kit-free-download/?ref=webappersfreebies1 플랫 디자인 UI 킷 psd를 무료로 제공해줍니다. 방법은 아래에 보시면 이메일 주소 입력하는 부분이 있고 그 아래 동의하는 곳이 있는데 뉴스레터를 받겠느냐는 동의입니다. 잘 안쓰시는 메일 주소를 입력하셔서 동의체크하신 후 'download files' 클릭하시면 입력하셨던 메일로 파일이 발송됩니다. 스팸으로 빠질 수 있으니 'Your Webdesigner Depot download'라는 메일 제목이 있나 […]
-
WP Setup 2013‧07‧25
워드프레스 설치 방법
이번 포스팅에서는 워드프레스의 설치 방법에 대.해.서.만. 설명한다. 워드프레스 설치할 서버(호스팅) 신청하는 방법, 도메인 구입 및 연결하는 방법, FTP 사용법, 워드프레스의 소개 또는 활용법등 순수 설치 방법이 아닌 부가 설명이 필요한 것들은 해당 포스팅안에 적혀있지 않다. 1. 설치파일 다운로드 http://wordpress.org/download/ 접속하여 오른쪽에 보이는 Download WordPress 3.5.2 버튼을 클릭한다. (포스팅을 작성할 때 버전이 3.5.2 이므로 타 버전으로 […]
-
Web Design 2013‧07‧15
2013 웹디자인 트렌드에 관한 인포그라픽
온라이프 스타일이란 곳에서 awwards의 책을 읽고 2013 웹디자인 트렌드에 관해 인포그라픽으로 만들었네요. 자세한 내용은 http://onlifestyle.co/2013/05/22/weekly-infographic-web-design-trends-for-2013/ 이 곳을 참고하시면 됩니다. 해당 내용은 이미지가 아래와 같습니다. 정확히 맞는 지는 모르지만 일단 제가 아는 한에서는 이렇습니다. -컨텐츠가 효율적으로 검색이 되고 접근이 되어 중점이 되도록 디자인을 한다. -간결한 레이아웃과 쉽게 읽을 수 있는 디자인을 한다. 네비게이션도 간단해야한다. - 사용자 경험을 중심으로 […]
-
App Design 2013‧05‧20
안드로이드 스케치 템플릿
안드로이드 디자인 할 때 그냥 노트에 하면 디자인하기 좀 곤란할 경우가 있다. 그래서 검색해보니 안드로이드 어플 디자인 스케치용 템플릿이 있었는데 바둑판 라인이 없길래 포토샵으로 조금 추가해봤다. 필요에 따라 이미지를 다운 받아서 인쇄한 다음 어플(앱) 디자인 스케치 할 때 사용하면 된다. (클릭하면 원본 이미지가 보이고 마우스 오른쪽을 눌러 저장하여 사용하면 된다.)
-
Inspiration 2013‧04‧25
모바일 앱, 모바일 웹의 디자인 아이디어를 얻기 위한 사이트
http://pttrns.com/ 이런게 바로 디자이너가 원하는 사이트..다른 앱이나 모바일웹은 어떻게 디자인했는지 확대해서 보고도 싶고 영감도 얻고 싶은데 마땅한 밴치마킹할 곳도 적고..이런 갈망을 해외에서는 조금이나마 해소해주는 사이트.. (해외라고 말했으니 언젠가는 누군가가 국내용 서비스로 만들어 주시겠죠? ㅎㅎ)
-
Html, CSS 2013‧04‧04
이미지에 여백이 생길 때 해결 방법들
이미지 태그를 이용하다보면 이상한 약간의 여백이 발생한다. 위 이미지를 보면 사진틀 이미지를 위아래로 나눈 것인데 아랫부분에 여백으로 인해서 약간의 공간이 생겼다.확대해서 보면 아래와 같다. 약간의 여백이 생겨서 위 아래 이미지가 떨어진 현상을 발견하였다.파이어 폭스로 해당 이미지의 부모 div 요소를 선택하면 아래와 같이 셀렉트 되어진다. 이유는 모르겠지만 해결 방법은 아래와 같다. 1. 이미지 요소에 vertical-align:top;을 […]