본문 바로가기

IT/Web

 (46)
Notion 노션 팁 - 프린트 깔끔하도록 pdf 내보내기 팁 Notion 노션 팁 - 프린트 깔끔하도록 pdf 내보내기 팁 곧이 곧대로 A4에 출력한다꼬~, A4로 보통 내보내면 실제로 종이에 글자도 크고 한줄에 몇자 안나온다. 테이블 문제 말고도 그냥 출력할 때 이 팁을 사용하면 좋을 듯~~ 팁의 원본 글은 여기서 https://www.facebook.com/groups/notion.so/posts/677654059363248/ 내용을 정리해 보면, - 아래 그림처럼 노션에서 내보내기할 페이지를 선택하고 우측 상단의 더보기 메뉴를 클릭하세요. - 내보내기 (PDF, HTML, Markdown) 메뉴를 선택하세요. - 내보내기 형식은 PDF 로 선택한다. - 페이지 형식은 A3로 선택한다. 내보내기가 완료되면, pdf 파일을 저장하면 된다. 저장된 pdf 를 열고..
ovenapp.io - 간단한 프로토타입 최고의 툴 ovenapp.io는 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다¹. 프로토타이핑이란 간단하게 이야기하면 '모형 제작'이라는 말과 같다고 볼 수 있습니다. 즉, ovenapp.io는 PC나 모바일 콘텐츠의 개발 전인 기획 단계에서 '모형'을 제작하는 데에 도움을 주는 툴이라는 것입니다¹. 접속 주소는 https://ovenapp.io OvenApp.io Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공) ovenapp.io ovenapp.io의 장점은 다음과 같습니다. 누구나 쉽게 할 수 있다는 것! 드래그 앤 드롭 방식으로 간편하게 UI 요소를 배치할 수 있습니다¹. 다양한 디바이스 사이즈를 제공합니다. 개발 단계에서 발생할 수 있는, 실제 디바이스와 기획물 ..
CSS HTML - Progressbar 로딩바 구현 예제 소개 로딩바나 프로그레스바를 찾아보면 다양한 소스가 나오긴 한다. 일단 내가 써본 예제를 킵!! 많아봐야 똥이다. 내가 골라둔 걸 일단 저장해두고 활용하는 것이 짱!! https://codepen.io/artboardartisan/pen/VLzKVN Loading Bar A quick and simple loading bar that provides the illusion of a working progress bar.... codepen.io 아주 간단하게 잘 정리된 예제입니다. 역시 능력자들이 많어요! HTML로 프로세스바(Process Bar) 만들어주기 (progress bar css) (tistory.com) HTML로 프로세스바(Process Bar) 만들어주기 (progress bar css) 웹..
Billboard.js 차트 라이브러리 - 도넛 차트 예제 웹페이지에서 차트를 만들어주는 많은 JS 라이브러리가 많이 있지만 한국 기업인 네이버에서 후원해주는 빌보드 차트를 써보기로 이전에 쓴글이 있긴하네. 2023.04.28 - [IT/Web] - Billboard.js 무료 네이버 차트 라이브러리 써보기 Billboard.js 무료 네이버 차트 라이브러리 써보기 billboard.js는 D3 기반의 자바스크립트 차트 라이브러리입니다. 아주 간단하게 차트를 만들 수 있습니다. billboard.js의 홈페이지에서는 사용법이 잘 정리되어 있습니다 1. 또한, 다양한 예제들도 참 wiznxt.tistory.com 그중에서 일단 도넛 모양의 차트를 만들어 보기로 하고, 결과 화면은 이렇게 ㅋ 그냥 소스를 남겨둔다. 라벨인가 텍스트인가 도넛 내부에 있는 라벨 색상은 ..
CSS gradient - 색깔 서서히 바뀌는 패턴을 구하고 싶을때 GRADIENT BACKGROUND COLORS 의 패턴을 만들고 싶다면 아래 페이지로 방문해 보세요. 사실 디자이너가 아니니깐 보고 고르는게 최고!! https://www.eggradients.com/gradient/waiters-service Waiter's Service - Eggradients Waiter's Service: #98DE5B > #08E1AE CSS codes: background-color: #08e1ae; background-image: linear-gradient(315deg, #08e1ae 0%, #98de5b 74%); Best Gradients www.eggradients.com 맘에 드는 초록색 패턴을 하나 골라봤다.
Billboard.js 무료 네이버 차트 라이브러리 써보기 billboard.js는 D3 기반의 자바스크립트 차트 라이브러리입니다. 아주 간단하게 차트를 만들 수 있습니다. billboard.js의 홈페이지에서는 사용법이 잘 정리되어 있습니다 1. 또한, 다양한 예제들도 참고할 수 있습니다 2. 이전에 작성한 여기도 한번 방문해 보세요. JS – billboard 차트 라이브러리 써보기 JS - billboard 차트 라이브러리 써보기 - B로그0간 #billboard.js #chart #js #라이브러리 #사용법 devbj.com billboard.js를 사용하기 위해서는 D3.js와 billboard.js를 로드해야 합니다. 그리고 차트를 넣을 HTML 요소를 만들고, 차트 옵션을 설정하여 차트를 생성하면 됩니다 1. 예제 코드는 다음과 같습니다: Sampl..
HTML 체크박스가 여러 개인 경우 체크 여부 확인하는 form 예제 체크박스가 여러 개인 경우 하나라도 체크되어 있는지 확인하고 submit 하는 html 예제는 다음과 같습니다. form 요소에 onsubmit 속성을 사용하여 폼이 제출될 때 실행할 자바스크립트 함수를 지정합니다1. 예를 들어, onsubmit="return validateForm()"과 같이 사용할 수 있습니다1. input 요소에 type 속성을 checkbox로 지정하여 체크박스 요소를 생성합니다2. 체크박스 요소는 name 속성을 사용하여 동일한 그룹으로 묶을 수 있습니다2. 예를 들어, name="hobby[]"와 같이 사용할 수 있습니다2. 자바스크립트 함수에서 document.querySelectorAll() 메소드를 사용하여 체크박스 요소의 NodeList를 가져옵니다3. 예를 들어, v..
JQuery - 특정 폼 안에 있는 id 찾기 빙 봇을 통해 구한 답이긴 하지만, 정리가 완전 깔끔하다. jquery로 특정 폼 안에 있는 input 요소를 id로 찾는 방법은 다음과 같습니다. 폼의 id나 name을 알고 있다면, $("#form_id").find("#input_id") 또는 $("form[name='form_name']").find("#input_id")와 같이 폼의 셀렉터 뒤에 .find() 메소드를 사용하여 input의 id를 인자로 넘겨줍니다12. 폼의 id나 name을 모르거나 여러 폼 중 하나를 선택하고 싶다면, $("form").eq(index).find("#input_id")와 같이 eq() 메소드를 사용하여 원하는 폼의 인덱스를 지정해줍니다3. 인덱스는 0부터 시작합니다. 예를 들어, 다음과 같은 HTML 코드가 있..

티스토리툴바