유틸리티, 정보/WEB TIP 36

고급스러운 디자인을 위한 윈도우, 버튼 템플릿 FLAT PSD 16종 모음

File By:Big Green Button (PSD) from 365psd.com Graphic By:Off Button from 365PSD.com From:Branding / Identity MockUp Vol.4 from 365psd.com Graphic By:Cute Child Element Vector 3 from 365PSD.com Source:Clean Sign Up Form from 365PSD.com Author:Clean & Usable UI Kit from 365PSD.com Author:Paper Stack Login Form from 365PSD.com Vcard PSD from 365PSD.com From:Flattastic Flat User Interface Kit PSD f..

웹디자인을 위한 빈티지 페이퍼, 구겨진종이 템플릿 180여개

다양한 활용이 가능한 빈티지한 디자인의 종이, 페이퍼 이미지들로 개성있는 웹페이지를 만들어보세요. Grunge Crinkled Paper Download Vintage Paper Texture Pack Download Speckled Grunge Paper Download Plain Yellow Paper Download Destroyed Lined Paper Download Paper Texture Download Yellow Paper Texture Paper Collage Download Old Page Texture 4 High Resolution Old Paper Textures Download Vintage Paper Download Old Ripped Vintage Paper Download..

반응형 웹페이지로 디자인하는 간단한 팁

width: 100%; max-width:1000px; min-width:450px; 반응형 웹페이지라는게 브라우저의 크기에 따라 자동적으로 컨텐츠 크기가 변형하여 브라우저 밖으로 넘어가지 않는것을 말하는데.별다른것 없이 이런식으로 사이즈를 지정하기만 하면 된다. width: 100%; 이렇게 원하는 사이즈를 %로 지정을 해준뒤에max-width: 를 px로 지정하여 컨텐츠의 최대크기를 지정min-width: 로 최소사이즈를 지정하는것이다. 사실 그냥 width사이즈를 퍼센트로만 지정해줘도 되는것이긴 하지만max 사이즈와 min 사이즈를 고정하여 내가 표현하고자하는 적절한 디자인크기를 벗어나지 않게하는것.min 사이즈도 패스해도 되긴하나 이부분을 지정하지않으면 필요이상으로 브라우저를 축소할경우가로로 늘어..

웹에서 간단하게 이미지를 아이콘으로 ico 파일로 만들기

역시나 이번에도 거창하게 쓰잘데기없는 스샷 줄줄이 늘어놓고 설명할것도 없습니다. 그냥 사이트링크를 클릭해서 접속하신 뒤에저기 보이시는 click to browse 박스부분에다가 원하는 이미지를 드래그해서 넣으면아래처럼 다양한 사이즈의 샘플이 준비되고 그 윗부분에 ICO ICNS PNG 이중에 원하는 포맷을 클릭한 뒤아래 이미지를 클릭하면 다운됩니다. 쉽지요? https://iconverticons.com/online/

내 웹사이트에 메타태그 정보를 입력하는 검색엔진 최적화 HTML 마크업 가이드

익스프레스엔진(xpressengine) 에는 자체적으로도 기능이 설정이 되어있고 SEO모듈을 통해 더 자세하게 메타태그 정보가 표현될수있도록 도와주고 있습니다.게다가 통합적으로 한가지 내용만 나오는것이 아니라 게시물마다 제목과 글내용으로 메타태그를 정리해서 표현해주니 잘만 활용하면 방문자를 늘리는데 크게 도움이 될것이라 생각이 됩니다.워드프레스는 기본적으로는 지원이 안되더군요. 플러그인을 찾아보면 구현될수있도록 하는게 있을지도 모르겠네요. (대충 검색해보니 나옵니다.) 요즘 대부분의 블로그들은 기본적으로 소속되어있는 포털에 포함시키기위해 다양하고 자세한 메타태그가 자동으로 삽입되게 되어있거나없어도 자체적으로 쉽게 발행이 되도록 편리한 기능이 있으니 별로 신경안쓰셔도 되지만자신이 집적 구축한 웹사이트에는 ..

웹에서 간단히 CSS,JS코드 압축하는 CSS JS Online CSS Minifier/Compressor 사이트

설명은 역시나 간단하게 합니다. 그냥 왼쪽창에 CSS코드를 붙여넣고 아래 파란버튼을 누르면 우측에 Minifier된 코드가 나오니 복사하면됩니다. 이 작업이 무엇을 의미하는지 모르는분들에게 간단히 설명하자면CSS코드의 모든 공백과 엔터키 입력값을 제거하여 한줄로 코드를 늘려서 문서의 크기를 줄여주는 작업입니다.공백이 모두 제거되어도 CSS를 구현하는데에는 아무런 문제가 없습니다. 문서의 크기가 작아지면 웹페이지 로딩속도가 줄어들고 트래픽도 다소 줄어들게 됩니다.조금이라도 빠른 로딩을 원한다면 중요한 작업입니다. 다만 주석이 모두 제거되고 한줄로 늘어서기때문에 나중에 편집하기가 상당히 까다롭겠죠.수정용 원본은 백업을 잘 해두시기 바랍니다. 물론 JS 파일도 JavaScript Minifier가 됩니다. M..

Google Tag Assistant를 사용하여 구글 에널리틱스(google analytics)가 제대로 설정되는지 확인하기

Google Tag Assistant를 사용하여 설정 확인하기Google Tag Assistant는 Google 애널리틱스 태그가 제대로 실행되는지를 보여 주는 Chrome 브라우저의 확장 프로그램입니다. Google Tag Assistant를 사용하면 웹사이트에서 발생한 사용자의 흐름을 기록한 다음 해당 흐름 동안에 발생한 모든 조회수의 보고서뿐 아니라 Google 애널리틱스에서 이를 어떻게 해석하는지도 볼 수 있습니다.Google Tag Assistant를 통해 추적 코드가 작동하는지 알 수 있으며, 특정 사용자의 구매 여정이 예상대로 Google 애널리틱스에 표시되는지 확인하는 데도 사용할 수 있습니다. 다음 이미지는 Google Tag Assistant를 통해 확인할 수 있는 오류의 유형에 대한 ..

구글검색에서 원치않는 페이지 노출 색인 삭제하는 방법

구글검색에 노출된 이미지나 포스팅. 한번 색인된 문건은 온라인에서 절대로 사라지지않습니다.페이지가 수정되었거나 게시물의 변경이 있다면 구글봇이 크롤링을 다시해가게되면 변경이 되기도 하지만사이트맵을 새로 작성하여 제출해 보아도 하루이틀내에 되지도 않고 저만그런지는 모르겠지만 수일이 지났음에도 계속 링크는 망가져있더군요.이렇게 되고 며칠 추이를 지켜보니 리디렉션된 첫페이지로 연결되어 트래픽만 늘고 사이트 신뢰도만 떨어뜨리게 되는것같습니다. 이렇게 본인의 게시물이 더이상 노출되는것이 싫은때도 있을것입니다. 이때 구글의 검색 결과에서 이미지나 포스팅이 노출되지 않도록 삭제하는 방법을 알아 봅니다. 웹사이트 또는 블로그나 까페등 온라인에 공개로 올린 이미지가 구글에 색인되어 원본을 삭제 했는데도 검색결과에 나타나..