본문 바로가기

IT/Web

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. 19. Notion 노션 팁 - 프린트 깔끔하도록 pdf 내보내기 팁 곧이 곧대로 A4에 출력한다꼬~, A4로 보통 내보내면 글자도 크고 한줄에 몇자 안나온다. 테이블 문제 말고도 그냥 출력할 때 이 팁을 사용하면 좋을 듯~~ 팁의 원본 글은 여기서 https://www.facebook.com/groups/notion.so/posts/677654059363248/ 정리해보면, 1. 노션에서 페이지 내보내기는 A3로 내보내기 한다. 2. pdf 출력은 페이지설정을 A4로 하고, 출력창의 "페이지 크기 조정"에서 "맞추기" 선택하면 된다. 글자로 정리해 보면, :) 노션에서 내보내기할 페이지를 선택하고 우측 상단의 더보기 메뉴를 클릭하세요. 내보내기 (PDF, HTML, Markdown) 메뉴를 선택하세요. PDF 형식을 선택하고 페이지 형식을 A3로 설정하세요. 내보내기 버..
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 가 설치되어 있으니 아래 위치인데 각자 설치한 위치에 비슷한 공간에 두면 된다. 여기에 폰트가 없으면 잘 안되서 그냥 여기에 뒀다. 다른 방법이 있으면 더 좋은데 이미 설치된 폰트파일에서 가져오는 것 처럼 말이다...무튼... 이젠 템플릿 혹은 ..

티스토리툴바