전체 글89 HTML/CSS] before, after 가상요소 가상 요소(Virtual element)는 HTML 문서 트리(DOM)에는 실제로 존재하지 않지만 CSS를 사용하여 스타일을 적용할 수 있는 요소를 의미합니다. 가상요소를 사용하면 HTML문서에 존재하지 않는 요소를 CSS를 통해 생성하고 스타일을 적용할 수 있습니다. 다시 말해서, HTML 태그나 javascript없이 CSS만으로도 HTML 문서 안에 디자인 요소를 추가할 수 있다는 것이죠. 가상 요소에는 대표적으로 ::before와 ::after가 있습니다. ::before는 선택한 요소의 시작 부분(앞)에 가상 요소를 생성하고, ::after는 선택한 요소의 끝 부분(뒤)에 가상 요소를 생성합니다. 아래의 간단한 예시를 보면 "Hello, World" 앞에 before 가상요소(👋)가 뒤에 aft.. 2023. 8. 8. Echarts] Echats로 피라미드 차트 만들기 1. ECharts 라이브러리 📌 Echarts란? :Echarts는 데이터 시각화를 지원하는 강력한 오픈 소스 자바스크립트 라이브러리입니다😉 저는 많은 자료들을 시각화해서 유저들에게 보여줄 때 Echarts라이브러리를 요긴하게 사용하였는데요. 이 라이브러리는 선 그래프, 막대 그래프, 원 그래프, 산점도, 히스토그램 등 다양한 차트를 지원해줄 뿐만아니라 사용자 커스텀으로도 차트를 변경할 수도 있어서 원하는 차트는 무엇이든 만들 수 있습니다. Echarts는 기본적으로 JSON 형식의 데이터를 입력으로 받아 시각화를 수행하기때문에 사용하기도 쉽고, API문서도 잘되어있어서 원하는 스타일들을 쉽게 찾을 수도 있고, 웹상에서 바로바로 테스트를 해볼수도 있습니다. 📌 Echarts 예시 https://echa.. 2023. 7. 25. javascript] 객체의 비교 JavaScript에서 객체를 비교하려고 한다면 몇가지 주의해야 할 점이 있다. 다른 변수들과 달리 객체는 참조 타입이기 때문에 값이 아닌 메모리 주소를 비교한다. 따라서 두 개의 객체를 단순히 == 또는 === 연산자로 비교하면 엉뚱한 값이 나올 수 있다. 아래 예시를 살펴보자 1. 문제점 1. 참조비교 아래 예시를 보면 두 객체가 동일한 속성을 가지고 있지만 다른 메모리 주소를 가리키고 있기때문에 비교 결과가 false가 나온다. const obj1 = { name: 'Kim' }; const obj2 = { name: 'Kim' }; console.log(obj1 == obj2); // false console.log(obj1 === obj2); // false // obj1과 obj2는 동일한 속.. 2023. 5. 19. 페이지네이션 구현 다음과 같은 출석현황을 조회하는 코드를 구현한다고 해보자. 우리는 이중에서 맨 아래있는 페이지번호를 코드로 구현해보록 할 것이다 > 화살표를 누르면 10개씩 밀려서 조회가되고, 》를 누르면 맨 마지막으로 이동한다 1. 먼저 10 this.$http.post(`/api/event/getSystemEventLog`, { intersectionSeq : this.intersectionSeq, category : this.category, startDate: this.startDate, endDate: this.endDate, startPage : (this.currentPage - 1) * this.page.scale, scale : this.page.scale startPage : 0, scale: 100 .. 2023. 5. 17. 이전 1 2 3 4 5 6 7 ··· 23 다음
