안녕하세요:) 오늘은 노션 ‘D-Day 위젯 설치’ 방법을 소개해 드리겠습니다.
우선 D-DAY 위젯의 디자인은 위와 같이 시간까지 표시되어 있습니다.이렇게 보면 뭔가 눈에 안 들어오고 컬러도 마음에 안 들고 굳이 시간까지 표시가 돼야 하나?그런거 같은데 디데이만 나오게 하는 방법, 컬러 수정하는 방법까지 모두 소개해드렸으니 노션에 예쁘게 적용되실거에요:)
제가 사용하고 있는 위젯 디자인인데 이렇게 컬러도 바꿔서 D-Day만 보이도록 설정할 수 있습니다.그럼 지금부터 노션 위젯을 설치하는 방법을 알려드리겠습니다!
인기글
Apption – Notion friendly Embeddable Widget AppsNotionfriendly Embeddable Widgetを検索して学習するAppsapption.co
1. D-Day 위젯을 설치하기 위해서는 먼저 위 사이트에 등록해야 합니다.이메일 주소만 있으면 쉽게 가입이 가능하기 때문에 저는 구글 계정으로 가입했어요.
文書{“payload”:{“allShortcutsEnabled”:false,fileTree”:{“:{“items”:[{“name”:]]USAirportDistanceMap””path”:”USAirportDistanceMap”, contentType”:”directory”, {“name”:”buttons”, path “, contentType “: “directory “, { “name “: “globe “, path }globe ‘contentType ‘, contentType’, ‘directory ‘} {“name”: 그리팅 언어… github.com
2. 위 링크에서 D-Day 위젯 HTML 코드 복사 부탁드립니다.링크를 클릭하시면 HTML 코드가 보이는데 코드 전체를 복사하시면 됩니다.3. 다시 Apption.co 사이트로 돌아가서 DIY Embed URL을 클릭하세요.DIY Embed URL은 2번에서 복사한 HTML 코드를 노션에 사용 가능한 URL로 변환해 주는 곳입니다.4. 복사한 HTML 코드를 붙여 URL을 생성하십시오.name에는 d-day라고 입력해도 되고, 무엇이든 입력해 주세요.HTML Code 입력란에는 이전부터 복사한 코드를 붙여넣은 후 Generate URL 생성 버튼을 클릭해 주세요.URL을 생성하면 위와 같이 URL 주소와 함께 D-Day 위젯을 확인할 수 있습니다.여기서 위젯의 날짜나 컬러를 변경하고자 한다면 HTML 코드를 수정하고 Update를 누르면 변경된 위젯을 확인할 수 있는데 지금부터 D-Day 날짜와 컬러 변경 방법을 알려드리겠습니다. D-Day 날짜 변경 및 색상 변경, D-Day만 보이도록 설정하는 방법은?1. D-Day 날짜 변경 기본 위젯은 2024년 10월 15일에 세팅되어 있는데(‘Oct 15, 2024:00:00:00’) 이 부분을 제가 원하는 날짜로 변경하시면 됩니다.월은 반드시 Jul, Aug, Sep처럼 영어로 사용해야 한다는 것~!2. 위젯 컬러 바꾸기! 기본 데이 위젯 컬러의 경우 바탕색이 빨간색, 숫자가 네이비 컬러인데 바탕색을 바꾸려면 days {background: #EF2F3C;}에서 EF2F3C, 이 부분을 바꾸면 되고 숫자 컬러를 바꾸려면 .numbers {font-family: ‘Montserrat’, sans-serif; color: #183059; 로 183059를 바꾸면 됩니다.저는 회색 바탕에 핑크색 컬러인데 저처럼 바꾸시는 분은 배경은 #6e6e6d; 숫자는 #f8cfc9;로 변경해주세요.3. D데이만 보이고 시간을 없애는데다가 사각형 안에 있는 코드를 지우면 D데이만 표시가 됩니다.다시 정리하면 1.apption.co 사이트에 가입을 한다.2. D-Day 위젯 html 코드를 복사한다. 3. D-Day 날짜, 색상 변경 등 코드를 수정한다.4. 수정한 코드를 노션에 사용 가능한 url로 변경한다.5. 생성된 url을 노션에 붙여 인베드 생성을 한다.참고로 D-Day 위젯은 3개까지 무료로 만들 수 있습니다.올해 목표 중 하나가 건강한 몸 만들기이기 때문에 운동일지 템플릿에 디데이 위젯을 달아봤는데 숫자가 눈에 띄고 심플해서 마음에 듭니다.오늘은 NotionDay 위젯 설치 방법에 대해 소개해 드렸는데요, 글로 설명하는 재능이 부족하여 이해가 안 되시는 분들은 부담없이 댓글이나 톡톡 문의주시면 시간 되실 때 답변 드리겠습니다^^궁금하시면 네이버 톡톡 하세요!궁금하시면 네이버 톡톡 하세요!