본문 바로가기

IT 블로그/웹 개발·SEO19

Viewport의 개념 - 해상도와 뷰포트(Viewport size)를 구분하자 * * 뷰포트(Viewport)란 디바이스에서 그래픽을 노출하는 영역의 크기를 말하며, 해상도와는 다른 개념입니다. Html에서 작성하는 width, height 그리고 그것을 바라보는 vh, vw 등의 단위는 모두 viewport에 준거합니다. 케이스를 통해서 뷰포트에 대한 이해를 조금 더 명확히 해볼 수 있습니다. 1. 디바이스별 해상도/스크린 크기/뷰포트 비교 디바이스 해상도 스크린 크기 뷰포트 iPhone 13 mini 1080x2340 5.4" 360x780 iPhone 13 Pro 1170x2352 5.4" 390x844 iPhone 13 Pro Max 1284x2778 6.7" 428x926 Huawei Mate 20 Lite 1080x2340 6.3" 360x780 Huawei Mate 2.. 2023. 3. 19.
[CSS/jQuery] hover/mouseover/mouseenter 실습 예제 * * MouseHover, Hover, mouseover, mouseenter 모두 '마우스 커서가 객체에 올라갔을 때' 이벤트를 발생시키는 메서드라고 볼 수 있습니다. 1. 먼저 언어에 따라서 사용하는 표현이 어떻게 달라지는지 간단히 알아보고 2. 특히 CSS와 jQuery에서는 각 메서드가 어떻게 다른지 예제로 실습해보겠습니다. 예제 링크는 아래와 같습니다. https://codepen.io/noa-xyz/pen/KKBmKqq hover/mouseover ... codepen.io 1. 언어에 따라서 사용하는 표현이 어떻게 달라지는지 C# MouseHover - 대상에 커서가 올라가 있을 때 이벤트를 발생시킵니다. (대상에 커서를 올리면, 즉시는 아니지만 직후에 이벤트가 발생하는 것을 볼 수 있습니.. 2023. 1. 20.
웹사이트의 트래픽을 측정할 수 있는 무료 측정도구 11가지 웹사이트의 트래픽을 측정할 수 있는 무료 측정도구 11가지 - SEMrush - SimilarWeb - Ubersuggest - Serpstat - Ahrefs - MonsterInsights - Brand Overflow - Sitechecker - Website IQ - Fathom - Quantcast 자사뿐만 아니라 URL만 입력하면, 아무 웹사이트의 트래픽을 분석할 수 있는 측정도구들입니다. 대체로는 제한적으로나마 무료로 사용할 수 있습니다. 그 중에서 가장 많이 사용하는 측정도구는 - SEMrush(에스이엠러시) - SimilarWeb(시밀러웹) 두 가지입니다. 두 가지에 대해서는 무료로 사용할 수 있는 범위에 대해서 간략한 특징도 살펴보겠습니다. SEMrush - 제한적인 영역 내에서 계정 .. 2022. 3. 31.
Parallax Scrolling을 잘 활용한 웹사이트 레퍼런스 2 패럴렉스 스크롤링은 일반적으로 웹 페이지 상의 요소들이 스크롤에 각기 다르게 반응하는 것(또는 그렇게 작동하도록 하는 기법)을 의미합니다. 패럴렉스 스크롤링은 흔히 스토리텔링에 활용하기 좋다고 이야기합니다. 요소들이 각기 나타나고 고정되고 사라지는 움직임은, 콘텐츠화된 웹 페이지의 어떤 위치에서 어떤 요소에 사용자의 시선을 집중시킬지 의도를 반영하기 적합하기 때문이 아닌가 합니다. 그런 만큼 장식적인 효과를 넘어서, UX 디자인의 관점에서 패럴렉스 스크롤링이 어떻게 적용되고 표현될 수 있는지 참고할 만한 웹페이지를 모아보았습니다. 1. iPad Pro 애플의 신제품 소개 페이지는 매번 스크롤 효과의 향연인 걸로 기억합니다. https://www.apple.com/ipad-pro/ iPad Pro The .. 2022. 1. 12.
웹사이트/블로그에 Google Analytics 연결하기 구글애널리틱스(Google Analytics. 이하 GA)는 구글 사용자라면 무료로 이용할 수 있는 데이터 분석 도구입니다. 더불어 구글애즈, 서치콘솔 등의 서비스와 연동하여 시너지를 낼 수 있는 것이 큰 장점입니다. GA는 웹사이트에 도달한 사용자의 언어(사용 브라우저의 설정 언어), 브라우저 유형, 디바이스, OS, 트래픽 소스(유입 경로) 등을 분석 자료로 제공합니다. 그것에 기반한 통계 및 분석 자료는 웹사이트의 현재를 진단하고 앞으로의 목표와 운영 방침을 설정하는 일에 큰 도움이 될 것입니다. 오늘은 그 GA를 웹사이트/블로그에 연결해보겠습니다. 1. GA계정과 속성 생성 GA의 구조 다음과 같습니다. 조직(Organization) > 계정(Account) > 속성(Property) > 보기(V.. 2022. 1. 10.
Parallax Scrolling을 잘 활용한 웹사이트 레퍼런스 +2022.01.13추가) 포스팅 이후로 시간이 지나면서, 소개드린 도메인 중 일부가 만료되었습니다. 확인하여 만료된 도메인에는 취소선을 그었습니다. 또한 추가 레퍼런스를 소개하는 새 글을 작성했습니다. https://noa-xyz.tistory.com/37 parallax scrolling 홈페이지 레퍼런스2 패럴렉스 스크롤링은 일반적으로 웹 페이지 상의 요소들이 스크롤에 각기 다르게 반응하는 것(또는 그렇게 작동하도록 하는 기법)을 의미합니다. 패럴렉스 스크롤링은 흔히 스토리텔링에 활 noa-xyz.tistory.com 패럴랙스 스크롤링Parallax Scrolling은 스크롤을 할 때 개체마다 움직이는 속도를 다르게 한 것을 말하죠. 원경과 전경을 구분해서 입체감과 원근감을 줄 수도 있고, 같은 심.. 2019. 11. 24.
Google Firebase 웹사이트 무료 호스팅하기 파이어베이스는 모바일/웹 어플리케이션 개발 플랫폼으로 현재는 구글에 인수되어 서비스되고 있습니다. 웹 호스팅 목적으로 사용할 때엔, 동적인 웹페이지를 호스팅하기에는 제약이 많다고는 하지만, 구글 계정 하나당 50개의 프로젝트를 생성해서 사용할 수 있고, 프리 티어 사용량이 각 프로젝트에 별도로 적용된다는 장점이 있습니다. 무엇보다 백엔드나 서버에 대한 사전 지식이 없어도 쉽게 배포할 수 있습니다. 준비물: 구글 아이디, 호스팅할 파일 그럼 먼저, 파이어베이스 프로젝트를 만들도록 하겠습니다. 1. 파이어베이스 시작하기 https://firebase.google.com 구글에 로그인하고 파이어베이스 사이트에 접속해서 '시작하기' 클릭 2. 프로젝트 추가 프로젝트 추가를 선택하면 프로젝트의 이름을 정합니다. .. 2019. 10. 1.
웹페이지를 apk 앱으로 | 쉽게 따라하는 웹앱 만들기 웹페이지를 안드로이드 앱으로 만드는 방법입니다. web to app convert 라고 많이 검색이 되지만, 정확히 말하자면 변환을 하는 것이 아니라 apk를 제작하되, webView를 통해서 앱을 실행하면 자신의 웹페이지가 표시되도록 하는 것입니다. 홈페이지, 블로그 등 특정 URL을 표시하는 어플리케이션을 만드는 것입니다. 안드로이드 스튜디오로 작업할 것이고, 차근차근 배우기 보다는 아이콘, 스플래시 이미지(로딩 페이지), 연결할 URL, 어플리케이션 이름과 같이 커스텀 해야 하는 부분을 제외하고는 작성된 스크립트를 복붙하며 빠르게 웹앱을 만들어 볼 것입니다. 1. 프로젝트 생성 File > New > New Project 로 새 프로젝트를 생성합니다. Empty Activity를 선택하고 Next로.. 2019. 8. 24.
구글 지도 API 작업 예제 - 인포윈도우/클릭이벤트/마커이미지 구글 지도 API로 만든 작업 예제입니다. 예제에서는 기본 지도 위에 원하는 이미지로 원하는 위치에 마커를 생성하고 마커를 클릭하면 아래의 이벤트를 발생시킵니다. 1. 화면 중심이 마커로 이동 2. 줌 변화 3. html로 인포윈도우 표시 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 .. 2019. 8. 13.
SEO와 트래픽 관리를 위해 robots.txt 활용하기 robots.txt에 의해 설정된 규칙들은 SEO(검색엔진 최적화)와 홈페이지/블로그의 트래픽에 영향을 미칩니다. 개인적인 홈페이지와 블로그는 대부분 Uset-agent: * Allow: / 를 사용할 것입니다. 그렇지만 티스토리 블로그에는 공통적으로 아래의 규칙이 입력되어 있습니다. User-agent: * Disallow: /owner Disallow: /manage Disallow: /admin Disallow: /oldadmin Disallow: /search Disallow: /m/search Disallow: /m/admin Disallow: /like Allow: / User-agent: Mediapartners-Google Allow: / User-agent: bingbot Crawl-de.. 2019. 8. 3.
네이버에 티스토리 등록하는 방법(+사이트맵, robots.txt) 가이드 네이버 웹마스터 도구에 티스토리 블로그를 등록하고, 사이트맵을 제출하는 방법입니다. 티스토리의 html 편집 기능을 사용하지만, 익숙하지 않으신 분들도 쉽게 진행할 수 있습니다. 1. 네이버 웹마스터 도구에 티스토리 블로그 추가하기 https://webmastertool.naver.com/ 네이버 웹마스터 도구에 로그인한 후에 블로그 주소를 추가합니다. https:// 부터 적습니다. 추가하려는 주소의 홈페이지나 블로그가 본인 소유의 것이 맞는지 확인을 합니다. 방법 중에 HTML 태그를 선택하고 메타 태그 전체를 복사합니다. 전체를 복사해야 합니다. 티스토리 블로그에서 설정 > 꾸미기 > 스킨 편집에서 html 편집으로 들어갑니다. 위에 앞에서 복사한 내용을 붙여넣습니다. 위의 이미지에는 네이버 웹마스.. 2019. 8. 3.
구글 지도 API - 커스텀 지도/지도 스타일 간편하게 편집하기 과거에는 구글 지도 스타일을 편집하기 위해 snazzymap 등의 외부 툴을 사용해야 했지만, 이제는 구글에서 제공하는 스타일링 위자드에서 스타일 편집 기능을 제공합니다. 우선 빈 지도를 만들어 보겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Styled Maps - Night Mode #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat:.. 2019. 8. 2.
쉽고 확실하게 티스토리 사이트맵 등록하기 티스토리 블로그는 html편집기를 제공해서 SEO나 편집이 제법 자유롭지만, 사이트맵(sitemaps.xml)을 업로드하고 경로를 찾는 방법은 어째선지 편리하진 않았습니다. 그러다 보니, 많은 분들이 다양한 우회적인 방법으로 사이트맵을 업로드하고 경로를 확인하고 있습니다. 아래는 몇 가지 방법 중 가장 확실하고, html 편집기도 사용할 필요 없는 방법입니다. 1. IE에서 글 작성하기 업로드한 사이트맵의 경로를 확인하기 위해서는 인터넷 익스플로러로 글을 작성해야 합니다. 브라우저 버전마다 차이가 있을 수 있지만, 현재 크롬으로는 티스토리 에디터 버전에 무관하게 바른 경로를 찾을 수 없었습니다. 티스토리 글에 사이트맵 파일을 첨부하고, 미리보기를 클릭합니다. 그럼 아래 이미지처럼, 미리보기 상태에서 첨부.. 2019. 8. 1.
[오픈그래프] 티스토리 공유할 때 표시되는 이미지와 텍스트 변경하기 오픈그래프를 것을 추가해서 블로그의 기본 설정을 바꾸지 않고 티스토리 블로그를 공유할 때 표시되는 대표 이미지와 제목, 설명을 변경하는 방법입니다. html편집이 익숙하지 않으신 분들도 어렵지 않게 하실 수 있습니다. 아래는 제 티스토리 블로그를 페이스북에 공유했을 때의 모습입니다. 티스토리의 블로그 설정 메뉴에서 입력한 대표 이미지, 블로그 이름, 블로그 설명이 표시됩니다. 블로그 설정은 그대로 유지하면서, 공유할 때 표시되는 내용을 변경해 보도록 하겠습니다. 1. 이미지 등록하기 대표이미지로 사용할 이미지를 티스토리에 업로드합니다. 티스토리에서 설정 > 꾸미기 > 스킨편집 으로 이동합니다. 원하는 이미지를 업로드하고, 업로드된 이미지를 우클릭 해서 새 탭에서 열기를 선택합니다. 저는 셔터스톡에서 구입.. 2019. 8. 1.
티스토리 검색엔진 최적화하기 - 구글 서치콘솔에 사이트맵 등록하기 이 글에서는 구글에서의 블로그 검색 인지도를 개선시키기 위해서 (구글에서 블로그가 잘 검색되도록) 1. 사이트맵을 생성하고 2. 블로그에 사이트맵을 업로드한 후에 3. 업로드된 사이트맵을 구글 서치콘솔에 제출합니다. 1. 사이트맵 생성하기 무료로 사이트맵을 생성할 수 있는 사이트는 여러 곳이 있습니다. https://www.xml-sitemaps.com 을 이용해 보도록 하겠습니다. 사이트에 접속에서 블로그 주소를 https:// 부터 적고 START를 클릭합니다. 사이트맵이 곧 생성되면, DOWNLOAD YOUR XML SITEMAP FILE 버튼을 클릭해서 사이트맵 파일을 다운로드 받습니다. 파일명은 sitemap.xml 입니다. 2. 블로그에 사이트맵 업로드 하기 사이트맵 제출은 다운받은 파일을 블.. 2019. 7. 31.
728x90

티스토리툴바