본문 바로가기

Develop/Web19

우피(oopy) 없이 노션 웹사이트 만들어보기 (feat. 평생 무료) 최근 들어 노션(Notion)을 활용하여 간단한 공고를 직접 만들어 배포하는 회사들이 많이 보인다. 우피(oopy)라는 서비스는 노션에 기록된 페이지를 검색엔진에 쉽게 반영하고, 웹사이트 주소만 입력해서 볼 수 있도록 도와주는 서비스다. 이 글에서는 우피를 사용하지 않고, 노션 기반의 웹사이트를 만들어 배포하는 과정을 적어보려 한다. 과정을 미리 말하자면 다음과 같다. 1. 노션에서 원하는 흐름의 페이지를 제작한다. 2. HTML 코드를 추출한다. 3. 해당 내용들을 기반으로 필요한 코드 수정을 한 뒤 배포한다. 위 과정을 통해 평생 무료의 노션 기반 웹사이트를 만들 수 있다. GOAL 오늘 배포해볼 사이트는 단일 페이지다. 판매 중이던 전자책의 유입을 올리기 위해, 새로운 사이트를 하나 더 개설하여 검.. 2022. 12. 12.
랜딩페이지, 하루만에 만드는 방법 이번 글에서는 하루만에 랜딩페이지 만드는 방법을 알아보겠다. 참고로, 아x웹, 카x24, 워x프레스 등을 이용하는 방식이 아니다. 이 글에서 다루는 방법은 약간의 코딩을 필요로 하는 방식이다. HTML, CSS, JAVASCRIPT 개념을 아예 모른다면, 2주만 투자해보기를 권한다. 코딩을 조금이라도 알게 되면, 굳이 외주를 맡기거나 할 필요 없이 무료로 랜딩 페이지를 만들어낼 수 있기 때문이다. 장기적으로 봤을 때는 따로 외주를 맡길 때에도 기술에 대한 이해도가 있는 상태에서 외주를 주는 것이니 훨씬 더 잘 맡길 수 있지 않을까? 아무튼, 내가 이야기 하는 방식은 '템플릿'을 이용한 방식이다. 나는 이 방법을 숙달하고 나니, 하루 안에 웬만한 랜딩페이지는 구축할 줄 알게 되었다. 다음 사진들은 내가 하.. 2022. 9. 6.
javascript querySelector, querySelectorAll이용하기 이번 포스팅에서는 javascript의 querySelector를 이용하는 방법에 대해 다뤄보겠습니다. 크롬 브라우저의 개발자 도구에서 console창으로 테스트해보시는 것을 추천드립니다. 📌 querySelector querySelector는 dom 요소를 하나만 선택할 때 사용합니다. 해당 요소의 속성을 변경하거나, 자식 / 부모 관계로 Element를 만들 때 주로 사용됩니다. 사용 방법은 이렇습니다. document.querySelector('요소'); 📌 querySelectorAll querySelectorAll은 해당되는 모든 요소를 nodeList(배열)로 반환합니다. document.querySelectorAll('요소'); 이때, 선택할 요소는 css 선택자를 사용하는데요, 대표적인 경.. 2021. 5. 31.
javascript 배송 기한 설정하기 e commerce 서비스를 이용하다 보면, "00시간 00분 00초 내 주문 시 당일 발송"과 같은 문구를 볼 수 있습니다. 이번 포스팅에서는 javascript로 배송 기한 설정 작업을 해보겠습니다. - 오후 3시를 기준으로, 오늘 배송인지 내일 배송인 판별 합니다. - 다음날이 공휴일 / 주말이라면 다음 영업일을 기준으로 몇일, 몇 시간 이내에 주문 시 발송인지 포함합니다. 📌 전체 코드 👀 부분적으로 알아보기 👉 타이머 띄우기 window.onload = function(){ var info_new_wrap = document.querySelector('.parentElement');//class 이름이 parentElement인 요소 var timer_below_order_cost = creat.. 2021. 5. 31.
Netlify를 이용하여 웹 사이트 배포하기 지난 포스팅에서는 html 템플릿을 이용하여 웹사이트를 만드는 방법에 대해 다루었습니다. 이번에는 netlify를 이용하여, 웹 사이트를 배포하는 방법에 대해 알아보겠습니다. 🧐 지난 글이 궁금하다면? 약간의 프로그래밍으로 웹 사이트를 만드는 가장 빠른 방법 기획, 디자인, 개발 등 고려해야 할 사항들을 최대한 없애고 웹 사이트를 만들 수 있는 방법은 무엇일까요? 이 글에서는 웹 빌더가 아닌, 약간의 프로그래밍으로 웹 사이트를 만드는 방법에 대해 chjune0205.tistory.com ❓ Netlify란? Netlity는 GitHub 계정 연동 및 쉬운 호스팅을 제공하며, 지속적 배포, One-Click HTTPS 제공 등 고성능 사이트 / 웹 응용 프로그램을 제작하는데 필요한 쉽고 빠른 다양한 서비스.. 2021. 5. 28.
약간의 프로그래밍으로 웹 사이트를 만드는 가장 빠른 방법 기획, 디자인, 개발 등 고려해야 할 사항들을 최대한 없애고 웹 사이트를 만들 수 있는 방법은 무엇일까요? 이 글에서는 웹 빌더가 아닌, 약간의 프로그래밍으로 웹 사이트를 만드는 방법에 대해 소개합니다. 누구나 일주일 만에 자신만의 홈페이지를 만들 수 있습니다. 아래는 제가 일주일만에 제작한 웹 사이트입니다. https://oncreate.netlify.app/ 온크리에이트 - 수백시간을 아끼는 안드로이드 앱 개발 가이드북 - 당신은 "클라이언트"다. - 서버 라는것이 존재하는 이유 - 만국 공통어 JSON이라는 녀석 - 커피 주문을 통해 알아보는 동기와 비동기 - 카카오 기술 갖다 쓰기! Retrofit - 맥락기억에 바로 꽂히는 Par oncreate.netlify.app 시간이 들어가는 일은 주로 .. 2021. 5. 28.
반응형