메바동 서식지

table을 이용하여 가입 경로를 표시해 주는 화면이 있었는데 기타 항목은 그 밑으로 세부 사항을 표시해 주고 있었다. 위와 같은 느낌이었는데 당연한 거지만 디자인은 훨씬 깔끔하고 제대로 된 내용이 담겨 있었다. 나는 이 화면에서 기타는 접혀 있다 사용자가 더 보기를 원할 때 클릭해서 하위 항목이 열리는 화면으로 바꾸고 싶었고 아무 생각 없이 ::after를 이용해 삼각형을 표시해주었다. .toggle::after { content: ''; position: absolute; top: 140px; left: 195px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top..

창이 열리면 input 태그에 focus를 주어야 하는데 자꾸 다른 곳에서 DOM이 변경되면서 focus가 나가버리는 상황이 있었다. 고민하다가 DOM이 변경될 때 input 태그에 focus를 주는 방법을 없을까? 하고 찾아보니 Mutation Observer가 있었다. 추가하기 1번 아이템 다음과 같이 페이지에서 ul에 li가 추가되거나 텍스트의 내용이 변경되거나 속성이 변경되거나 하는 것들을 감지하고 싶다면 Mutation Observer를 사용하면 된다. Mutation Observer를 이용하면 특정 노드의 DOM 변경을 감지할 수 있다. html 태그나 body 태그에 사용하여 페이지의 전체적인 변경을 감지할 수도 있을 것 같다. 위에 작성한 예제에 ul에 li가 추가될 경우 alert을 띄우..

Chart.js를 이용해서 원형 차트를 그리고 사용자 지정 범례를 만들어야 했다. 한 번도 사용한 적이 없어 사용 방법을 찾아보니 그리 어려운 라이브러리는 아니었다. window.onload = function () { pieChartDraw(); } let pieChartData = { labels: ['foo', 'bar', 'baz', 'fie', 'foe', 'fee'], datasets: [{ data: [95, 12, 13, 7, 13, 10], backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 25..