분류 전체보기 (14) 썸네일형 리스트형 SEO 검색 최적화 하기 <meta> 잘 사용하기 왜 내가 만든 홈페이지가 검색이 잘 안될까? 메타 태그는 웹브라우저 및 검색 엔진이 페이지를 검색할 수 있도록 도와주는 HTML 페이지 요약본입니다. 내가 만든 페이지가 검색엔진을 통해 제대로 노출 될 수 있도록 하는 기본 요소라고 할 수 있습니다. 페이지에 관한 중요한 정보들을 HTML 제작자가 검색이 용이하게끔 설정하여 적절한 검색어에 맞게 우리 사이트가 노출될수 있도록 할 수 있는 아주 중요한 태그입니다. 에 SEO와 관련된 속성에는 아래와 같은 요소들이 있습니다. 지금부터 하나하나씩 확인해 보도록하겠습니다. 네이버는 어떻게 되어있을까? 일단 설명을 돕기 위해 우리나라와 가장 친숙한 네이버를 구글에 검색해 보았습니다. 윈도우의 경우 F12 키를 눌러 개발자 도구를 활성화 시키면 태그 사이에 들어가 .. UI :: 솔루션 사이트 컴포넌트 벤치마킹 - 레이아웃 Caveat font 사용 :: google font의 open font license 이고 다운로드 주소 경로는 여기 링크를 눌러서 들어갈 수 있다. 시각디자인산업기사 :: 디자인 자료화 > 프로젝트 결과보고서 정리 / 디자인 계약서 및 정산서(표준계약서 자료 첨부) 2023년부터 시각디자인산업기사 필기 기출유형이 많이 바뀌었다. 올해 초 연봉협상을 하면서 직무관련 자격증을 따면 돈을 준다기에 출제기준도 읽어보지 않은채 덜컥 기존 책을 구매했는데, 바뀌었다고... 그래서 인터넷에서 자료 찾아 공부할겸 내용이 유용하여 다음에 혹시 필요할때 참고하고자 (아직 바뀐 문제를 본 사람이 없기에 이 공부가 맞는지 틀린지는 알수 없다 - 2023.02.10) 공부내용을 기록해 놓으려고한다. 시각디자인 조사분석 :: 디자인 자료화 > 1. 프로젝트 결과보고서 정리 1-1. 프로젝트 결과보고서 작성 작성 목적:: 클라이언트에게 프로젝트 결과보고서를 제시할 목적으로 작성한다. 작성 내용:: - 각 단계별 데이터 작성 - 진행 중 산출물에 영향을 준 내·외부적 원인들에 대한 설명 - 완.. 디자이너가 알면 좋은 개발자 도구 사용 방법 :: 속도, 불필요한 소스, 나는 IT 중소기업에 다니는 디자이너다. 디자이너가 많은 회사에도 다녀보고, 제조업에 웹디자이너로도 종사해보았는데, 디자이너에 대한 대우가 영... 모두가 아시다시피 그렇다.(우리회사 오기 전 까지는 디자이너의 길을 선택한 것을 후회했다) 특히 디자이너의 수가 많은 회사일수록 (ex 디자이너 에이전시) 더 빡빡했던 것 같다. 그래서 선택한 지금의 회사는 IT 중소기업으로 대다수가 개발자이며 디자이너는 나 혼자다. 디자이너가 혼자이다보니 한가지를 깊이 파기보다 다재다능한 것이 더 어울린다. PSD 파일만 열심히 만지다가 어느덧 HTML파일까지 만지게 되었고, 이번에는 JS를 스터디하며, 간단한 회사 홈페이지를 개발자 손통하지 않고 리뉴얼하였다. 웹 서버에 올리면서 개발자인 팀장님께서 주신 간단한 팁을 공유.. 직장인 부수입 :: 티스토리 잘나가는 블로그 주제 선정 02 - 카카오 키워드 광고 보는 방법 앞선 페이지에서 애드센스 홈페이지에서 수익률이 높은 주제 살펴보는 방법을 알아보았는데요, 이번에는 카카오에서 제공하는 검색 키워드를 확인하는 방법을 알아보려고 합니다. 저도 짧게나마 블로그를 운영해보니 티스토리의 검색유입의 거의 99%가 다음이라는 것을 알게되었습니다. 아마 노출이 더 많이되려면 구글에서 많이 검색되어야 할 것 같습니다. 인터넷트렌드 에서 분석한 데이터로 2023년 1월 기준 국내 검색 엔진 이용률이 네이버 : 64%, 구글 26%, 다음 4.5% 로 매우 검색량이 낮기 때문입니다. 어쨋든! 티스토리의 노출은 일단 다음이 압도적이기 때문에 다음에서 검색 키워드를 객관적으로 잘 볼 수 있는 방법을 알려드리려고합니다. 먼저 카카오 키워드 광고를 클릭하여 이동합니다. 2023년에 새롭게 리뉴얼.. <table><th><td>에 대각선 사선 순수 CSS만 이용해서 넣기 디자인을 하다보면 생각치도 못한 사항을 요청하는 고객사들을 종종 만날 수 있다. 이번에는 HTML 표의 테이블에 사선을 그어줄 수 있냐는 요청을 받았다. 그래서 찾아봤다. 역시나 HTML이나 CSS에서 직접적으로 제공해 주는 부분은 없고 편법을 이용해야하는데, 아래와 같은 3가지 방법을 찾아볼 수 있었다. 1) SVG를 활용하여 백그라운드에 그리는 방법 2) border값을 이용하는 방법 3) background-image의 linear-gradient를 사용하는 방법 1)과 2)번으로도 테스트를 해본 결과 사선을 매우 잘 나타낼 수 있었다. 그중 백그라운드를 활용한 방법은 테이블의 칸 사이즈 조절에 상관없이 대응이 가능하다. 그러나 나는 어떠한 소스도 필요 없이 순수 CSS만을 사용할 수 있는 장점을 .. CSS로 스크롤바 디자인 바꾸는 방법 :: Edge, Chrom, Opera AND Firefox까지! 디자인을 하다보면 우측에 자동으로 생성되는 스크롤의 컬러가 거슬릴 때가 있다. 그레이 색상에 투박한 네모가 기본 디자인이니! 분명 신경쓰이지 않을때는 아무렇지도 않다. 하지만 한번 눈에 밟히면 계속 거슬리는게 디자인이라. 누군가의 눈에 거슬릴 수 있는 회색 색상의 기본 스크롤바 디자인을 수정해보려고 한다. 아래 소스를 보시라. See the Pen Untitled by kihyun (@hidesigner2) on CodePen. 스크롤바 부분별 자세한 명칭 알아보기 디자인을 수정하기에 앞서 명칭을 먼저 파악해 이해력을 쑤욱 올려보자. 스크롤바 디자인 바꾸기 for Edge, Chrom, Opera [ ::-webkit- ] 위 소스에서도 보시다시피 접두어가 붙는 것을 보니, 지원하는 브라우저가 한정적이다.. 움직이는 애니메이션 png, APNG 이란? 요즘 디자인을 벤치마킹하기위해 자주 들어가는 사이트 중 하나인 Toss를 방문하는 중에 신기한 애니메이션을 발견했어요. 웹디자이너로서 개발자도구(F11 혹은 Ctrl + i)를 열어 이것저것 뜯어보는 일이 자주 있는데요. Video 혹은 gif라고 생각했던 이미지가 .png 였습니다. PNG가 움직이다니! 오늘은 움직이는 png에 대해서 알아보고자 합니다. 움직이는 PNG :: APNG APNG(Animated Portable Network Graphics)는 PNG를 확장한 이미지 파일 포맷입니다. 이 포맷은 GIF와 비슷한 방법으로 애니메이션을 구현하면서 기존 PNG 파일과의 하위 호환성을 유지했기 때문에 GIF보다 더 높은 품질을 보여 줍니다. APNG 파일의 첫 프레임을 설정할 수 있으며, APN.. 직장인 부수입 :: 티스토리 잘나가는 블로그 주제 선정하기 01 이제 막 블로그를 시작하려고 하는데.. 어떤 주제를 선정해야할까? 과연 어떤 주제로 글을 써야 유입이 잘 될까? 티스토리 글쓰기 주제 정하는 방법에 대해서 알아봅시다. 내 전문분야가 있는 경우? 내 전문 분야가 있는 경우라면 이런 고민으로 제 블로그를 찾아오지 않으셨을것 같긴합니다. 자신의 전문분야의 글로 통일성있게 작성하면 되겠지요. 저 같은 경우에는 디자인을 업으로 삼고있는 사람인지라 디자인 튜토리얼을 올릴까 생각했습니다. 물론 제가 질 좋은 컨텐츠를 꾸준히 잘 포스팅 한다면 충분히 가치가 있는 블로그가 될 수 있겠지만, 디자인 튜토리얼을 올리는게 지루하다 판단되어 다른 주제를 찾아보기로 했습니다. 내 전문분야가 없는 경우? 얼마나 많은 사람들이 이 주제에 관심을 갖고 있을까? 무슨 글을 작성해야할까.. 직장인 부수입 :: 네이버 블로그 & 티스토리 & 블로거 뭘로 시작할까? 요즘 이슈로 떠오르고 있는 직장인 투잡, 부수입에 관련하여 수익형 블로그를 찾는 사람들이 크게 증가하였는데요. 트렌드코리아 2023에서도 나타나 있듯이 우리 사회에 많은 사람들이 이제 더 이상 직장인으로서의 밝은 전망을 보지 못한다고 판단하여 재태크나 직장인 부수입, 투잡에 대해서 관심을 돌리기 시작했습니다. 2022년도에 블로그 이용률이 또한 크게 증가했다고 하는데요. 아마 취미로 시작하시는 분들도 계시지만 소소한 수입을 위해 시작하는 블로거들이 더 많을 것이라 판단됩니다. 저 또한 이제까지 네이버 블로그를 간간이 유지하면서 애드포스트로 수익을 받아왔는데, 수익을 내려면 애드센스로 갈아타라는 말을 여러군데에서 들어서 도대체 얼마나 차이가 날까 실험해 보기위해 티스토리로 넘어왔습니다. 구글링 검색을 통해.. 이전 1 2 다음
