김평범's OrdinaryCode

🔎Notion 빠른 필트 업데이트 먼저 확인해보기 https://ordinary-code.tistory.com/145 [Notion]노션 데이터베이스 데이터베이스 빠른필터 이용하기 Notion에서 내가 잘 쓰는 기능은 바로 데이터베이스이다. 나의 생각에는 노션의 데이터베이스가 다른 메모 어플과 가장 큰 차이점이라고 생각하고 특히 이 구조를 이용한다면 노션의 예쁜 디자인 ordinary-code.tistory.com Notion 업데이트 중 전 포스팅에서는 빠른 필터 기능을 살펴봤는데, 오늘은 데이터 베이스 보기 추가 업데이트에 대해서 자세히 알아보려고 한다. 🔥데이터베이스 보기추가 기능 이용하기 😊노션 레이아웃 선택하기 노션에서는 데이터베이스를 입력을 해서 데이터를 관리할 수 있다. 만약 노션의 데이터 ..

Notion에서 내가 잘 쓰는 기능은 바로 데이터베이스이다. 나의 생각에는 노션의 데이터베이스가 다른 메모 어플과 가장 큰 차이점이라고 생각하고 특히 이 구조를 이용한다면 노션의 예쁜 디자인을 유지하면서 데이터 관리도 효율적으로 할 수 있다. 이런 점에서 내가 노션을 메모 어플로 잘 쓰는 이유이기도 하는데, 강력한 데이터베이스에 관련해서 오늘 노션에서 새로운 기능들이 추가돼서 바로 포스팅을 해보기로 했다. 🔎데이터베이스 업데이트 뭐가 달라졌나요? 일단 데이터베이스가 전체적으로 디자인이 변경되었다. 기존 데이터베이스보다 좀 더 강력한 기능들이 추가되고, 사용성도 훨씬 편하도록 UI가 수정되었다. 1️⃣노션 빠른필터 적용하기 데이터베이스에서 필터를 적용하려면 기존에는 8번 이상 클릭을 해야 되는 불편함이 있..

🧑‍💻Notion 포트폴리오 만들기 후기 기존에 만들어놨던 노션으로 만든 개발자 포트폴리오가 매우 큰 인기로 노션 페이지 방문자 수가 벌써 6만이 넘어갔다. 👏 감사합니다.🙇‍♀️ 주니어 개발자분들과 현역 개발자 분들이 많은 관심을 주셔서 오늘은 노션 포트폴리오 업데이트에 대한 콘텐츠를 준비해 봤다. 👇아직 Notion포트폴리오 만드는 방법을 못 보셨다면? https://ordinary-code.tistory.com/39 [Notion]노션을 이용하여 개인용 포트폴리오 및 이력서 작성하기(신입, 경력직 포트폴리오 템플릿 🐣 들어가기 전 첫 취직 준비 시 아무것도 커리어가 없는 경우가 많다. 사람인, 잡코리아 등 간략히 적은 이력서는 누구나 가지고 있다면, 내가 그들보다 앞서기 위해서는 좀 더 나은 점이 ..

🤔Math 객체란? Math객체는 자바스크립트에 내장되어 있는 객체이다. 주로 숫자를 다루는 수학에 관련된 함수들이 들어가 있다. 그중 오늘은 내가 자주 사용하는 Math.random()에 대해 공부하겠다. 📈Math Random 함수를 사용할 때 대시보드나 그래프를 그려줄 때 가끔 데모 사이트를 만들 때 랜덤 값들이 필요한 경우가 있다. 이럴 때 나는 주로 Math.random()을 이용해서 특정 범위의 랜덤 값을 만들어서 연동한다. 📕Math Random 이용하기 실행화면 실행을 해보면 알겠지만 0 이상 1 미만이 난수를 발생해준다. 1️⃣최소 최대값 사이의 난수 생성하기 0,1 사이 난수가 아니라 가끔은 내가 원하는 정수의 난수가 필요할 때도 있다. 이때는 min과 max 값을 설정해서 아래와 같이..

javascript를 작성하다 보면 JSON과 javascript에서 Object가 매우 흡사한 형태를 가지고 있다는 사실을 알 수 있다. 형태가 비슷하기 때문에 똑같아고 생각하는 분들도 있을 테지만 엄연하게 두개는 다르다. 그럼 오늘은 JSON과 javascript의 Object의 차이를 알아보겠다. 📄JSON이란? JSON은 Javascript Object Notation의 약자로 서버와 데이터를 교환할 때 사용하는 Data 형태이다. JSON은 단순히 데이터를 표시하는 포맷일 뿐이고 프로그래밍 문법은 아니다. JSON은 서버와 클라이언트 데이터를 주고받을 때 현재 많이 사용되는 데이터 표시방식이며, 자바스크립트의 Object와 굉장히 비슷하게 작성이 되지만 이는 단순한 텍스트일 뿐이다. JSON형태..

😶‍🌫️css 가상 요소 ( pseudo-Element) 가상 요소는 css를 통해서 가상의 element를 추가하는 코드이다. 이미 작성된 HTML에 새로운 스타일을 주기 위해서 가상 요소를 추가해서 사용을 할 수 있다. :before는 HTML안 앞쪽에 추가하는 가상 요소이고 :after는 HTML이 끝날 때 추가되는 가상 요소이다. css 가상 요소 사용법 div:after {...} div:before {...} 가상 요소는 css는 내가 처리할 요소 뒤에 :after, :before로 붙여서 만들 수 있다. 코드는 아래를 참고해보자. sample Code 텍스트 결과 화면 위의 코드를 실행해 보면 위에 같이 코드가 나타난다. HTML상에서는 div에. text랑 클래스를 가진 div 안에 있는 ..

개발자들 중에서 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는 실제로 만들 화면상에 어울리지 않을 가능성이 높아서 ..