전체보기92 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. Insta360 Pro 2 사용후기 및 장단점 인스타 360 pro 2가 출시된지 1년이 되었습니다. 약 6개월 동안 주로 영상을 찍으며 느낀 점을 장단점 중심으로 간단하게 적어볼까 합니다. *제가 체감한 특징은 주로 고프로나 A7S2를 여러 개 사용할 때와 비교했을 때입니다. 비슷한 장비로 견주어지는 칸다오 옵시디언과 비교했을 때의 특징과는 다를 수있습니다. 먼저 장점입니다. 아주 주관적으로, 몇 가지 특징들에 대해서만 담고 있는 내용이라는 점 참고해 주시기 바랍니다. 1. 프리뷰 파일 자동 생성 프로2에는 일반 SD카드 1개와 마이크로SD카드 6개가 동시에 들어갑니다. 각 마이크로 SD카드에는 각 렌즈의 영상이 저장되고, SD카드에는 저용량의 프리뷰 영상이 자동 스티칭되어서 생성됩니다. 저화질이긴 하지만, 촬영 중간에 확인해 보기에는 충분합니다... 2019. 8. 21. 구글 지도 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. VR 헤드셋/HMD 스펙 비교 총 정리 2. 일체형 (최근 수정: 2019-08-23) PC 등의 외부 장치와의 연결 없이 사용하는 Standalone(일체형) HMD(Head-mount Display)들의 사양 비교입니다. 기기 종류와 사양 내용은 지속적으로 업데이트할 예정입니다. 단순한 표기 사양들의 비교이며, PPI, 지연속도, 센서의 종류와 성능에 따라서 사용자 경험은 상이할 수 있습니다. 1-1. HTC VIVE Focus 1-2. HTC VIVE Focus Plus 2-1. Oculus Go 2-2. Oculus Quest 3-1. Pico Goblin 3-2. Pico Neo 4-1. Lenovo Mirage Solo 5-1. DPVR M2 Pro 6-1. Genbasic Quad HD 1-1. HTC VIVE Focus Release Dat.. 2019. 8. 8. VR 헤드셋/HMD 스펙 비교 총 정리 1. 연결형 (최근 수정: 2019-08-14) PC 등의 외부 장치에 연결해서 사용하는 HMD(Head-mount Display)들의 사양 비교입니다. 기기 종류와 사양 내용은 지속적으로 업데이트할 예정입니다. 단순한 표기 사양들의 비교이며, PPI, 지연속도, 센서의 종류와 성능에 따라서 사용자 경험은 상이할 수 있습니다. 1-1. HTC VIVE Release Date 4/2016 Platform SteamVR on Windows/Linux Screen Dual AMOLED 3.6" Resolution 1080*1200px per eye Scan Rate 90Hz Connectivity HDMI1.4 or DP1.2 + USB2.0/3.0 FOV 110' Mass 470g 1-2. HTC VIVE Pro Rel.. 2019. 8. 6. 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. 티스토리 검색엔진 최적화하기 - 구글 서치콘솔 등록하기 홈페이지나 블로그 그리고 그 안에서 작성한 글이 검색 결과의 상단에 노출되기 위해서는 다양한 요인이 필요하지만, 검색엔진최적화(Search Engine Optimization, SEO)는 그 중에서도 가장 기본적이고 필수적이라고 생각합니다. 이 글부터는 티스토리 블로그에서 작성한 글이 구글에서 더 잘 검색되기 위해 (구글에서의 검색 인지도를 향상시키기 위해) 할 수 있는 간단한 작업들을 공유합니다. 이 글에서는 우선 구글 서치콘솔 속성을 만들고 블로그의 소유권을 인증하는 절차까지 진행합니다. 1. 구글 서치콘솔에 속성 만들기 가장 먼저 구글 서치콘솔(구 웹마스터)에서 블로그에 대한 정보를 관리할 속성을 만듭니다. https://search.google.com/search-console/ 시작하기를 클릭하.. 2019. 7. 31. CSS)모든 브라우저에 적용되는 Full-size Video 만들기 * * 동영상을 배경으로 사용하고자 할 때 가장 편한 방법은 object-fit 속성을 사용하는 것이지만, IE와 몇몇 브라우저에서는 해당 속성을 인식하지 못합니다. 이 글은 object-fit 속성 없이 css에서 object-fit: cover를 적용한 것과 같은 결과물을 만드는 방법입니다. 동영상을 화면에 가득 차는 배경으로 사용하고 앞에 다른 요소를 배치할 수 있습니다. 크롬, IE, Edge, 파폭, UC브라우저에서 확인해 보았습니다. 우선 JSFiddle에서 작성한 예시입니다. Edit fiddle - JSFiddle jsfiddle.net 아래는 작성한 예시 중 관련된 내용입니다. html 1 2 3 4 5 6 7 8 9 10 11 Big Buck Bunny a full-size backgr.. 2019. 7. 29. 이전 1 ··· 3 4 5 6 7 다음 728x90
