티스토리

Readiz - Read easy
검색하기

블로그 홈

Readiz - Read easy

blog.readiz.com/m

Read everything in the world easily. http://readiz.com/

구독자
3
방명록 방문하기
공지 마음의 평화가 왔다 모두보기

주요 글 목록

  • [jQuery] 누르면 크기가 늘어나는 검색창 jQuery로 구현하는 눌렀을 때 크기가 늘어나는 검색창 항상 느끼는 것이지만 웹에서 마음에 딱 드는 컨셉의 디자인을 찾기는 힘이 드는 것 같습니다. 하나하나 찾기는 어렵지 않은데, 이러한 것들이 모여 이루어지는 디자인이라는 것은 개개인의 취향에 따라 마음에 들고 안들고 하기 때문인데요.. 그래서 이번에도 크기가 늘어나는 검색창을 찾다가.. 마음에 다 안들어서 그냥 jQuery로 한번 구현해보았습니다. jQuery자체가 그렇게 어렵지가 않아서 쉽게 구현이 가능합니다. blur 이벤트와 focus 이벤트를 사용하여 구현합니다. 모습은 아래와 같습니다. 구현 모습 위쪽 그림이 누르기 전의 모습이고, 아래쪽 그림이 눌렀을 때 크기가 늘어난 모습입니다. 공간도 적게 차지하면서 애니메이션과 함께 커지기 때문에 재.. 공감수 1 댓글수 9 2014. 5. 4.
  • [CSS3] box-shadow 속성 box-shadow 속성 자주 쓰는 속성인데 매번 찾기가 귀찮아 한번에 정리해봅니다. 옛날 옛적 호랑이가 산속에 돌아다니던 시절에는 이런 효과를 주려면 포토샵에서 작업해서 이미지를 잘라 붙여넣었어야 됐습니다만 이제는 옛말이죠. 속성 하나로 간단하게 적용하는 그림자 효과입니다. 적용 방법 div { box-shadow: #888888 10px 10px 5px; } 브라우저 호환성 최대화 div { -moz-box-shadow:#585858 0px 0px 1px; -webkit-box-shadow:#585858 0px 0px 1px; box-shadow:#585858 0px 0px 1px; } 문법 box-shadow: none|h-shadow v-shadow blur spread color; 종종 colo.. 공감수 1 댓글수 11 2014. 5. 4.
  • CSS Grayfilter with crossbrowsing Grayfilter makes image gray. With CSS, any images are turned into gray simply. It's easy to apply, and cool. Many websites have already apply this filter. Here is the trick: img.grayscale { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ } Source: http://.. 공감수 0 댓글수 16 2014. 4. 17.
  • Offcanvas가 있는 반응형 스킨의 구조 설계 Offcanvas가 있는 반응형 스킨의 구조 설계 반응형 스킨이 지금은 그렇게 많지는 않지만.. 앞으로 반응형 스킨 제작 하실 분들에게 도움이 되시라고 이런 글도 한번 포스팅 해봅니다. 도움이 되셨으면 좋겠어요. 이런 구조를 그려놓는걸 뭐라고 하는지는 잘 모르겠습니다. 전개도? 설계도? 아무튼 이것을 꼭 그리고 작업하실 필요는 없습니다만, 큰 그림이 머리속에 있는 것이 좋더군요. 빨간색 칠해진 부분이 유저가 처음에 보게되는 부분입니다. 처음에는 네비게이션, 콘텐츠, 사이드바의 일부만 보게 됩니다. 이 이후에 Offcanvas가 동작하게 되면, Offcanvas가 우측으로 밀려나오게 됩니다. 아래 그림처럼요. 이 구조는 실제로 Offcanvas가 우측으로 이동하는 구조입니다. 실제로 컨텐츠와 Navigat.. 공감수 0 댓글수 14 2014. 3. 30.
  • Bootstrap Customize - Boost your bootstrap Yeah, Bootstrap is a big library. It's useful and powerful, but its loading time is a dilemma. It is inevitable because it includes many features. Fortunately, Bootstrap gives you a choice. Less default of bootstrap. It is great and very powerful function. For me, there is a very big change. Focus on the size of files. Default bootstrap.min.css: 101KB Customized bootstrap.min.custom.css: 66KB (a.. 공감수 0 댓글수 7 2014. 3. 16.
  • Make bootstrap dropdown menu Let's make bootstrap dropdown menu Bootstrap has many great features. Easy and great-looking dropdown menu is one of the things. At first, look at the reference in the page of http://getbootstrap.com/. ActionAnother actionSomething else hereSeparated link Dropdown Action Another action Something else here Separated link Dropdown is a 'Component' of bootstrap. How we can make a dropdown menu? Fir.. 공감수 2 댓글수 4 2014. 3. 9.
  • 부트스트랩의 col-push와 col-pull 속성 Bootstrap의 col-push와 col-pull 속성 이해하기 이해하면 간단한 내용입니다. 부트스트랩에서 col-md-9과 같이 생긴 것은 md사이즈를 기점으로 횡으로 배치되는 요소들의 폭을 100%로 바꿔주면서 전체 폭을 12로 놓고 봤을 때 9만큼의 폭을 차지하게 요소를 놓겠다는 뜻이죠. 그런데 만약에 왼쪽에 1만큼의 공백을 남겨두고 싶다면? 두가지 방법을 생각해볼 수 있습니다. 1. 왼쪽에 폭 1만큼의 요소를 넣어서 떨어지게 하기 object_1은 실제로 출력되지 않게 비워두면 되겠습니다. 이 방법도 가능하지만.. 2. col-push 속성 활용하기 이렇게 object 하나로도 간단하게 만들 수 있습니다. 이를 한번 응용해볼까요? 실제로 FastBoot 티스토리 블로그 스킨에서 사용된 기법입니.. 공감수 2 댓글수 1 2014. 3. 5.
  • [CSS+Javascript] 간단한 Back to top 버튼 넣기 티스토리 / 웹페이지에 간단한 Back to top 버튼 넣기Insert 'Back to top' button on your tistory blog or webpage 이번 포스팅에서 소개할 것은 어느정도 페이지가 내려가면 나타나는 Back to top 버튼입니다. 버튼을 누르면 페이지 최상단으로 이동하구요. jQuery + Fontawesome을 사용하고 계시면 페이지에 바로 적용 가능하시고, Fontawesome을 사용하지 않으신다면 대체 이미지를 넣으시면 됩니다. In this posting, I introduce the Back to top button showing up when you scroll down the document. One click can drive you to the top... 공감수 6 댓글수 6 2014. 2. 26.
  • [CSS] 구글 애드센스 노란색 뒷배경 제거하기 구글 애드센스 노란색 뒷배경 제거하기How to remove the yellow background on google adsense? 애드센스가 광고 로딩 전까지는 보기 싫은 노란색 배경을 내보냅니다. 눈도 아픈 색깔이라 좀 짜증이 날 수밖에 없는데 이를 해결하려고 구글링을 해보니.. 한글로 된 문서는 없고 어찌어찌 외국사이트만 줄줄 나오는데 이마저도 제대로 작동하지 않더군요. 티스토리를 쓰신다면 CSS부분에 코드 한줄만 추가해주시면 되고, 기타 다른 사이트를 운영중이시라면 css파일 중 하나에다가 아래 코드를 넣으시면 됩니다. 해결하고 나니 코드가 간단하네요. Google adsense probably shows ugly background style: the yellow. It is kind of h.. 공감수 1 댓글수 1 2014. 2. 26.
  • [CSS] CSS로만 만든 배경 / 그레디언트 들어간 배경 쓰기 정말 유용한 사이트 두개를 가져와 봤습니다. CSS로만 만들어진 패턴들http://lea.verou.me/css3patterns/ CSS로 만든 Gradient (대부분의 브라우저 사용가능, CSS Hack사용)http://www.colorzilla.com/gradient-editor/ 웹 제작시 위 사이트들과 같은 사이트들이 얼마나 큰 단비인지 모릅니다.. 첫번째 사이트도 유용하구요. 특히 두번째 사이트는 그럴듯한 Gradient를 쉽게 만들 수 있게 해줄 뿐더러, 대부분의 브라우저와 호환이 가능하게 코드를 생성해줍니다. 사용하는 사람이 할 일은? Ctrl+C, Ctrl+V하는 것 뿐이겠죠.. 저도 언젠가 이런 사이트를 만들어서 공유할 수 있었으면 좋겠습니다. 공감수 1 댓글수 5 2014. 2. 24.
  • [폰트] 구글 Fonts이용, 영문 웹폰트 적용시키기 http://www.google.com/fonts/ Google Fonts를 이용하여 영문글꼴 웹폰트 적용시키기 구글은 참 훌륭한 서비스를 많이 제공하고 있습니다. 제 블로그는 지금 돋움글꼴로 설정이 되어 있는데(나눔글꼴 적용결과 페이지 로딩이 너무 심하더군요) 이게 싫어서 구글 Fonts에 들어가보니 한방에 적용가능하게 구현되어 있습니다. 위 홈페이지 들어가셔서 원하는 폰트에 보면 그림처럼 ->버튼이 있는 부분이 보이시죠? 이걸 누른다음에.. 내려가다보면 3번항목이 있는데, 여기서 Javascript로 삽입을 하셔야 페이지 로딩에 지장을 덜 줄 수 있습니다. 꼭 이걸로 선택하신 다음에 코드를 전체 복사 합니다. 그다음 티스토리의 경우 위에서 복사한 스크립트를 페이지 최하단에 넣으시고, 글꼴이 적용되는 .. 공감수 2 댓글수 9 2014. 2. 22.
  • [CSS] 원형 이미지 마스크 & transform 속성으로 회전시키기 CSS는 HTML5가 되면서, 그리고 IE6이 퇴출되면서 웹 디자인에 새로운 가능성을 열어주고 있습니다. 원형 이미지 마스크 & transform 속성으로 마우스 오버시 회전시키기 다른 말 필요가 없을 듯 합니다. 이 블로그 상단부에도 이러한 속성을 적용시킨 이미지들이 있지만, 모바일에서 오시는 분들을 위해서 한번 밑에다가 보여드리겠습니다. 어때요? 마우스를 올리면 180도 회전합니다. 그리고 원형으로 마스크를 씌워서 실제로는 원형이지 않은(소스 확인해보세요) 이미지를 원형으로 만든 것입니다. 실제 적용 코드는 아래와 같습니다. img.rotate { width: 100px; border-radius: 50em; -webkit-transition: all 0.3s ease-in-out; -moz-tran.. 공감수 5 댓글수 2 2014. 2. 19.
  • [CSS] 웹폰트 로딩중에도 본문 나오게 하기 폰트 로딩중에 본문이 안나오는 문제 해결하기 블로그의 서체를 나눔고딕으로 바꾸면서, 문제가 생겼습니다. 데스크탑의 경우에는 그나마 낫지만 모바일에서 보게 되면 서체가 로딩되는 동안 글이 보이지 않는 문제가 생겼기 때문입니다. 글이 아무것도 뜨지 않는다면 그것이 잠시라도 매우 답답하게 느껴질 것입니다. 이를 한번에 해결해주는 사이트가 있어서 소개합니다. http://fontface.kr/ 사이트 이름도 재밌는데요 (font-face는 글꼴을 지정하는 css속성입니다). 사실 어느정도 사전지식이 있는 분들은 여기까지만 설명드려도 되겠지만, 설정하는 데에 추가적인 설명을 드리겠습니다. 1. Javascript 삽입하기 google.load( "webfont", "1" ); google.setOnLoadCall.. 공감수 3 댓글수 4 2014. 1. 13.
  • 플랫 디자인 색상 예제 / 색상코드(색상표) http://flathemes.com/docs/color-swatches.html 플랫 디자인 색상 샘플입니다. 링크한 사이트로 들어가시면 mouseover에 대한 색상도 보실 수 있습니다. turquoise#5eddd8#4cd1cb#4fbeba#1ba5a0 artichoke#87eb41#79d738#64b92a#50a118 peter river#3da8e3#3598ce#2986b9#1b71a0 sun flower#fece10#f1c40f#d7af0d#b1900b alizarin#e74c3c#d44637#c0392b#a5281b wet asphalt#82b6ea#5e84aa#34495e#263544 clouds#f9f9f9#ecf0f1#d3d7d7#aeb1b1 concrete#a0b2b3#95a5a6#7.. 공감수 1 댓글수 3 2013. 12. 23.
  • 텍스트 편집기 Sublime Text 2의 기초 설정부터 FTP 연결까지 Sublime Text 2 Sublime Text 2의 간단 사용법 나에게는 Notepad++가 동반자였다. Sublime Text라는 강력한 툴을 만나기 전까지는 말이다. 물론 Notepad++도 훌륭한 프로그램임에는 이견이 없으나, Sublime Text라는 툴을 간단한 설정만 해줘도 참 편하게 사용이 가능하단걸 깨닫았다. 그런데 검색을 해보면, 은근히 이 툴을 처음 사용하는 사람들이 참고할 만한 글은 없었다. 나 역시 그런 경우중 하나라서 고생아닌 고생을 하다가 이거 그냥 쓰지 말까라는 생각까지 했었는데, 이런 훌륭한 툴을 나와 같은 경우로 인해서 포기하게 되는 사람들이 생길까봐 A to Z로 간단한 설치 및 사용법을 올려본다. 1. Sublime Text 설치 및 글꼴 설정 Sublime Text.. 공감수 22 댓글수 16 2013. 12. 19.
  • [CSS] 브라우저 캐시 때문에 CSS 수정이 반영이 안될 때 최근 Readiz.com 공사를 다시 재개했는데, CSS를 수정해도 바로 반영이 안되는 문제를 겪었다. 핵심은 브라우저가 똑똑해서 이미 받은 CSS파일을 다시 받지 않기 때문에 발생하는 현상인데, PHP를 통해 꼼수로 이 문제를 해결 할 수 있다. 핵심은, 다르지 않은 파일인데 다른 파일로 인식시킴으로써 파일을 브라우저에게 강제로 다시 받도록 만드는 것이다. 이 꼼수에 사용되는 것이 TimeStamp라는 것이다. 가령, 아래처럼 하면 된다. 공감수 4 댓글수 2 2013. 12. 18.
  • [CSS] CSS의 핵심 2편 - 속성(Attribute)값 알아보기 이 글은 연재물입니다.2013/11/21 - [Web/Programming/Design] - [CSS] 웹디자인, 페이지 구성, CSS 처음 배워도 할 수 있다. CSS의 핵심 1편 CSS는 다룰 수 있게 되는 순간 웹 개발의 강력한 툴이다. CSS는 저번 편에서도 이야기 했었지만, 페이지를 일괄적으로 처리하는 것에 엄청난 도움을 준다. 저번 시간에는 Selector까지 이야기를 해 보았는데, 이번에는 중요한 Attribute(속성)을 알아보도록 하자. 내가 개발자의 입장에 있기 때문에 중요하다고 생각되는 부분들을 다룰 것이고 여러가지 깊게는 다루지 않을 것이다. 어디까지나 빠르게 CSS를 훑고 싶은 분들에게 권하는 글이다. 1. Margin, Padding Margin과 Padding.. 무슨 의미일까.. 공감수 0 댓글수 0 2013. 12. 1.
  • [CSS] 웹디자인, 페이지 구성, CSS 처음 배워도 할 수 있다. CSS의 핵심 1편 CSS는 다룰 수 있게 되는 순간 웹 개발의 강력한 툴이다. 나는 그냥 컴퓨터를 만지는 것을 좋아하는 일개 학부생일 뿐이다. 제대한지 아직 한달도 안됐고, CSS는 물론 그 전까지 만져본 적도 없다. 그런데 이번에 Tistory 블로그를 시작하고, 스킨을 수정하면서 처음 만져본 CSS가 Bootstrap을 만나니 너무나 쉽다는 것을 느끼게 되었다. 완전 초보자의 입장에서 바라본 CSS에 대해 내가 까먹기 전에 한번 이야기를 해보려고 한다. 설명하는 과정에서 정식 용어가 아닌 것들이 많이 등장할 것이라 생각되고, 내가 바라본 관점이 틀릴 수도 있다. 그렇지만 좀 틀어진 관점이라도 아예 모르는 사람한테는 쉽게 접근하는데 도움이 될 수도 있을 것이라 생각하여 약간 고민한 뒤 글을 올린다. 1. CSS란? 용어.. 공감수 3 댓글수 0 2013. 11. 21.
  • [JQueryMobile] Grid 사용방법 / Grid 개념 JQueryMobile은 참 매력적이다. JQuery도 그렇지만 Javascript의 복잡성을 줄이고 직관적으로 바꿔주는 능력은 엄청나다.거기다가 JQueryMobile은 기본 CSS와의 결합이 강력하다. CSS를 잘 몰라도 웹페이지를 충분히 생성할 수 있다. 오늘은 JQueryMobile의 Grid System에 대해 알아보자. 1. 기본 Grid 골격??1234567 A B C D E 위의 코드처럼 우선 GridType (몇 단으로 나눌 것인지)에 대한 div가 하나 있어야 하고, 그 하위에 그 몇단으로 나눌 것인지에 대한 하위 div가 들어간다. 즉 위와 같은 경우에는 5단으로 나누어져 있는 경우이며, GridType은 d Type이 되며 class는 ui-grid-d가 된다. GridType의 종.. 공감수 0 댓글수 0 2013. 11. 11.
  • [JQuery] JQueryMobile을 이용한 Simple Index Page 초기화면 보러가기 : http://readiz.com/ Readiz IndexReadiz - I serve, and you just take.Tistory BlogNaver BlogContect: readiz@readiz.com JQueryMobile을 이용해서 3분만에 작성가능한 초기화면이다.딱히 설명이 필요 없을 정도로 간단해서.. 뭐라 추가할 말이 없는듯 하다.Mobile에서도 접속이 가능한 개인페이지를 만들고 싶다면 위처럼 간단간단하게 즐겨찾기 식으로 만들어도 활용도가 매우 높을듯하다. 공감수 0 댓글수 0 2013. 11. 6.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.