IT/Web 2023. 12. 12.
Notion 노션 팁 - 프린트 깔끔하도록 pdf 내보내기 팁
Notion 노션 팁 - 프린트 깔끔하도록 pdf 내보내기 팁 곧이 곧대로 A4에 출력한다꼬~, A4로 보통 내보내면 실제로 종이에 글자도 크고 한줄에 몇자 안나온다. 테이블 문제 말고도 그냥 출력할 때 이 팁을 사용하면 좋을 듯~~ 팁의 원본 글은 여기서 https://www.facebook.com/groups/notion.so/posts/677654059363248/ 내용을 정리해 보면, - 아래 그림처럼 노션에서 내보내기할 페이지를 선택하고 우측 상단의 더보기 메뉴를 클릭하세요. - 내보내기 (PDF, HTML, Markdown) 메뉴를 선택하세요. - 내보내기 형식은 PDF 로 선택한다. - 페이지 형식은 A3로 선택한다. 내보내기가 완료되면, pdf 파일을 저장하면 된다. 저장된 pdf 를 열고..
IT/Web 2023. 6. 14.
ovenapp.io - 간단한 프로토타입 최고의 툴
ovenapp.io는 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다¹. 프로토타이핑이란 간단하게 이야기하면 '모형 제작'이라는 말과 같다고 볼 수 있습니다. 즉, ovenapp.io는 PC나 모바일 콘텐츠의 개발 전인 기획 단계에서 '모형'을 제작하는 데에 도움을 주는 툴이라는 것입니다¹. 접속 주소는 https://ovenapp.io OvenApp.io Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공) ovenapp.io ovenapp.io의 장점은 다음과 같습니다. 누구나 쉽게 할 수 있다는 것! 드래그 앤 드롭 방식으로 간편하게 UI 요소를 배치할 수 있습니다¹. 다양한 디바이스 사이즈를 제공합니다. 개발 단계에서 발생할 수 있는, 실제 디바이스와 기획물 ..
IT/Web 2023. 5. 2.
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) 웹..
IT/Web 2023. 5. 2.
Billboard.js 차트 라이브러리 - 도넛 차트 예제
웹페이지에서 차트를 만들어주는 많은 JS 라이브러리가 많이 있지만 한국 기업인 네이버에서 후원해주는 빌보드 차트를 써보기로 이전에 쓴글이 있긴하네. 2023.04.28 - [IT/Web] - Billboard.js 무료 네이버 차트 라이브러리 써보기 Billboard.js 무료 네이버 차트 라이브러리 써보기 billboard.js는 D3 기반의 자바스크립트 차트 라이브러리입니다. 아주 간단하게 차트를 만들 수 있습니다. billboard.js의 홈페이지에서는 사용법이 잘 정리되어 있습니다 1. 또한, 다양한 예제들도 참 wiznxt.tistory.com 그중에서 일단 도넛 모양의 차트를 만들어 보기로 하고, 결과 화면은 이렇게 ㅋ 그냥 소스를 남겨둔다. 라벨인가 텍스트인가 도넛 내부에 있는 라벨 색상은 ..
IT/Web 2023. 5. 2.
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 맘에 드는 초록색 패턴을 하나 골라봤다.
IT/Web 2023. 4. 28.
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..
IT/Web 2023. 4. 18.
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..
IT/Web 2023. 4. 17.
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 코드가 있..
IT/Web 2021. 5. 29.
Notion 노션 팁 - 잘 만든 페이지 복사 가져오기 (복제) - 2021.05.29
노션 팁 - 잘 만든 페이지 복사해서 가져오기 (복제) (2021.08.27) 언제부터인가 원래 방법이 안되네요. 고수님이 올려주신 아래 링크 동영상을 참고해 주세요~ 14분 근처에서 시청하셔도 됩니다~~~~ https://youtu.be/0bobq8KN3yo?t=861 생각보다 까다로움, 아예 저자가 공용으로 사용해라고 공유해둔 노션페이지는 그냥 Duplicate 메뉴가 있어서 누르면 끝!! 아래 예제 페이지 처럼 복제할 수 있는 메뉴가 뜨지 않는다. 이때는 어떻게? 예제 사이트 : https://www.notion.so/3-99-e9730dcfd84f4639a796ed202304b6c2 이런 경우에는 그냥 자신의 Notion 페이지에서 빈페이지를 하나 만들고, 그 곳에 링크 주소를 복사해두고, Lin..
IT/Web 2021. 3. 31.
Asciidoc adoc 파일 pdf 변환시 한글 폰트 해결 팁 (잔머리)
Asciidoc을 이용해서 html pdf 내보내기 되고, 마크다운 같이 관리되고 다 좋은데 이것 참 pdf export 하면 기본적으로 한글이 네모난 칸으로 나오는 문제가 발생. 많은 해결했다는 곳들이 있지만, 나만의 팁을 공개. 최적은 아니어도 일단 됨 일단 한글 폰트 ttf 파일을 구해야 한다. 이건 어디서든 받을 수 있으니 일단 생략. 그리고는 다운도르 받은 폰트 파일을 아래 위치에 복사해 둔다. 나는 Ruby에서 \asciidoctor-pdf-1.5.4 가 설치되어 있으니 아래 위치인데 각자 설치한 위치에 비슷한 공간에 두면 된다. 여기에 폰트가 없으면 잘 안되서 그냥 여기에 뒀다. 다른 방법이 있으면 더 좋은데 이미 설치된 폰트파일에서 가져오는 것 처럼 말이다...무튼... 이젠 템플릿 혹은 ..
IT/Web 2021. 2. 15.
부트스트랩 - 테이블 자동 너비 지정
부트스트랩을 쓰는데 테이블 너비를 내용에 맞게 자동으로 잘 정렬되도록 하고 싶다면 Bootstrap table column width - bootstrap helpers 이걸 기억하라.. w-auto 클래스를 넣어주면 알아서 쫙~~~~ mdbootstrap.com/snippets/jquery/ascensus/135599/ Bootstrap table column width - bootstrap helpers - Material Design for Bootstrap Use one of the following classes to manipulate the width of the columns. mdbootstrap.com BJ. Verschoren Maurits 님의 사진, 출처: Pexels
IT/Web 2020. 3. 9.
PWA 개발하기 - Progressive Web App 제작
PWA 개발하기 - Progressive Web App 제작 PWA (Progressive Progressive Web App) 만들어 보기에 도전해 본다. 아래 codelabs 에서 순서대로 따라하면, 자신의 첫번째 PWA를 만들 수 있도록 자세히 안내하고 있다. 이 이상의 설명은 없으니, 일단 따라해 보자. https://codelabs.developers.google.com/codelabs/your-first-pwapp/ Your First Progressive Web App Take a moment and put your phone into airplane mode, and try running some of your favorite apps. In almost all cases, they pro..
IT/Web 2020. 3. 2.
깃헙페이지 호스팅 제한사항 - GitHub Pages limits
깃헙페이지 호스팅 제한사항 - GitHub Pages limits 계속 무료로 제공해 준다하니, 우리네 촉이 발동 분명히 제한 사항이 있을껏이야~~~~ 정답은 여기 GitHub 공식 어바웃 페이지에 있다는 https://help.github.com/en/github/working-with-github-pages/about-github-pages About GitHub Pages - GitHub Help About GitHub Pages You can use GitHub Pages to host a website about yourself, your organization, or your project directly from a GitHub repository. GitHub Pages is availab..
