김평범's OrdinaryCode

개발자들 중에서 Notion을 사용하는 분들이 많다. 그중 내가 주로 쓰는 github의 링크에 대한 실시간 미리 보기에 대한 링크를 넣는 것이 가능하다 ✏️Notion 실시간 미리보기 블록 만들기 Notion에서는 계정을 연동을 하면, 위와 같은 식으로 나의 레포지토리의 업데이트된 시간을 실시간으로 확인 할 수 있다. 🧐github 미리 보기 블록 만들기 내가 연동하고 싶은 github 주소를 복사해서 Notion에 붙여 넣으면 미리보기로 붙여 넣기라는 기능이 나오게 된다. github 주소를 붙여 넣으면 Github에 연결해서 미리보기라는 문구가 추가되는데, 복사한 Github주소에 대한 계정 연동이 안되어서 나오는 문구이다. 🔗Notion에 계정 연동하기 먼저 Notion에서 설정과 멤버를 클릭해서..

홈페이지 상에서 가끔 자주 묻는 질문 등의 페이지에 들어가면 토글 메뉴의 UI를 많이 볼 수 있다. 은근 홈페이지를 제작할 때 많이 쓰는 토글 메뉴를 만들기 위해서는 주로 라이브러리를 이용해서 작성을 했는데 이번 HTML5 태그로만 만들 수 있다고해서 이에 대해 설명해보려고 한다. 1️⃣HTML details & summary Tag 흔히 말하는 아코디언 메뉴를 작성하려면, 사용자가 먼저 볼 수 있는 타이틀과 클릭했을 때 보일 세부 내용으로 이루어진다. 해당 태그안에는 클릭했을 때 보일 세부내용을 작성할 수 있다. 클릭 전 보여질 타이틀 내용을 작성할 수 있다. 위의 예시처럼 만들려면 아래와 같은 코드를 이용하면 된다. 자주묻는 질문1 여기에 자세한 내용을 작성합니다. 예전에 Javascript로 구현을..

좀 더 감각 있는 버튼, 배경을 만들어줄 때 그러데이션 효과를 많이 이용한다. 대부분 그라데이션 효과가 있을 때는 CSS를 이용해서 작성을 해주는데 디자이너가 별도로 있는 분들이라면 색을 지정해서 오지만 혼자서 개발을 할 때는 적절한 색 조합을 찾지 못하는 경우도 많다. 이때 유용한 색상 조합의 그러데이션 샘플을 제공해주는 사이트인 uigradients를 이용해보도록 하자 그러데이션 추천 사이트 uigradients uigradients는 다양한 그라데이션 색 조합을 추천해주는 사이트이다. 웹퍼블리셔나 디자이너분들은 해당 사이트에서 적절한 색상 코드를 찾을 수도 있다. 먼저 사이트에 접속해보자 uigradients.com/ uiGradients - Beautiful colored gradients uiG..

웹사이트를 구성하다 보면 로딩 바가 은근 많이 사용된다! 보통 css, Javascript로 만들기도 하지만 HTML만으로도 Process bar를 만들 수 있다고 한다. 🌖HTML progress tag html에서 이용하는 progress tag는 로딩바 형태의 UI를 생성해준다. 안에 들어가는 속성은 아래와 같다. value : 실제 값 min: progress의 최소값 max: progress의 최댓값 progress tag를 이용하면 아래와 같은 UI가 생성된다. sample code 진행상항 실제로 0부터 100 사이의 중간인 50%까지 파란색이 차있는 것을 볼 수 있다. 🎨HTML Progress CSS 적용하기 기본적으로 제공하는 UI는 실제로 만들 화면상에 어울리지 않을 가능성이 높아서 ..

노션에서 테이블 중 캘린더 테이블을 사용하는 경우가 있다. 이때 기본적으로 일요일부터 시작하는 캘린더가 생성이 되는데 노션 캘린더 시작 요일도 변경이 가능하다! 📆노션 캘린더 생성하기 노션에서 캘린더는 데이터 베이스 형태로 생성이 가능하다. 노션에서 /캘린더 혹은 /calendar로 영어로 검색하면 캘린더 데이터베이스 생성이 가능하다. 노션에서 이런 식으로 캘린더가 생성이 되면 기본적으로 일요일부터 시작되는 캘린더가 생성이 된다. 하지만 사용자에 따라 월요일을 시작하는 캘린더가 익숙한 분들이 있다. 이럴 경우 노션 설정 페이지에서 노션 캘린더 시작 요일을 변경할 수 있다. 🤔노션 달력(캘린더) 시작 요일 변경하는 방법 노션 설정 중 설정과 멤버를 클릭하면 팝업이 하나 뜬다. 설정 페이지에서 언어와 지역을..