전체 글58 Chart.js 적용하기 📢 Chart.js 소개 - 완전 오픈 소스 (무료) - 기반이라 SVG 렌더링 방식과 비교했을 때 DOM 트리의 비용을 줄여 성능이 높음 - 막대 차트, 선 차트, 원형 차트, 도넛 차트 등 다양한 차트 유형 지원 - 구글링 결과 현재 가장 널리 쓰이는 차트 플러그인으로 보임 (레퍼런스가 많다) 📌 사용방법 - 라이브러리 다운로드 혹은 CDN 이용 - 공식 문서 URL Chart.js 공식문서 Chart.js CDN 📌 chart.js 에 대한 옵션 See the Pen chart.js by 조민혁 (@iqgzrljw-the-typescripter) on CodePen. 📌 Reference 1. 예제 https://eunyoe.tistory.com/60?category=767107 chart.js를 .. 2024. 1. 3. CSS 방법론 📢CSS 방법론이란? CSS에서 클래스 네임을 지을 때 작성하는 방식 📌OOCSS (Object Oriented CSS) OOCSS는 CSS 모듈 방식으로 작성하여 중복을 줄이는 방식의 방법론 공통된 부분을 찾아 어디서나 재활용 할 수 있다는 장점이 있지만 다중 클래스 사용으로 인해 코드의 가독성이 떨어질 수 있다. 📌BEM (Block Element Modifier) BEM은 블록, 요소, 상태로 구분하여 클래스 이름을 작성하는 방식의 방법론 Block = 독립적으로 의미 있는 컨포넌트 Element = 블록에 속하는 부분, 하위 요소 Modifier = 블록이나 엘리먼트의 상태, 해당 요소의 스타일 변경 각 부분을 _ 로 구분하여 짓는다. 엄격한 네이밍 규칙을 따르며 클래스명이 용도와 형태를 잘 표현.. 2023. 12. 13. [Swiper.js] 마크업 및 속성 📢 swiper js 속성 및 마크업 See the Pen Untitled by jominh (@thatBamm) on CodePen. 2023. 10. 28. [CSS 속성] white-space Intro 공백 문자 HTML에서 연속된 공백은 표현되지 않음 따라서 white-space 속성으로 공백, 줄바꿈 등을 표시 white-space : normal default 속성으로 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자 모두 무시됨 white-space : nowrap 텍스트가 길어서 박스안에 가로 길이를 넘어가더라도 줄바꿈이 일어나게 하고 싶지 않은 경우 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자 모두 무시됨 white-space : pre 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자가 그대로 표현됨 소스 코드를 그대로 노출 시키고 싶을 경우 사용됨 white-space : pre-wrap 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자가 그대로 표현됨 pre 속성과 다른점은 자동으로 줄바꿈이됨 See th.. 2023. 10. 27. [Jquery] input[type="checkbox"]의 체크 여부 input[type="checkbox"]의 체크 여부를 3가지 형태로 확인 할 수 있다. 1. :checked 선택자 사용 See the Pen Untitled by 조민혁 (@iqgzrljw-the-typescripter) on CodePen. 2. prop() 매서드 사용 See the Pen Untitled by 조민혁 (@iqgzrljw-the-typescripter) on CodePen. 3. 체크 박스 전체동의 See the Pen Untitled by 조민혁 (@iqgzrljw-the-typescripter) on CodePen. +) prop()는 프로퍼티 값을 반환하므로 더 정확한 체크 상태를 확인 할 수 있다. 2023. 10. 26. [CSS] 세모 만들기 See the Pen css triangle by jominh (@thatBamm) on CodePen. 높이와 너비를 0으로 설정하고 border 값으로 삼각형의 크기를 정한다. 2023. 9. 21. 이전 1 2 3 4 5 6 7 8 ··· 10 다음
