진스

출처 웹 접근성을 고려한 텍스트 숨김처리 이전에 작성한 글에서 콘텐츠의 영역마다 제목을 지정함으로써 스크린 리더 등 보조기기 사용자가 웹페이지를 이용하면서 콘텐츠를 이해하는데 도움을 받을 수 있다고 했다. 이렇게 heading태그를 이용하여 각 영역에 제목을 입력하면 시각장애인의 사이트 탐색이 용이하고, 사이트의 컨텐츠에 대한 이해를 높일수 있기 때문에 텍스트를 넣어주는데 디자인상으로는 필요없으므로 숨김처리를 해야한다. 텍스트를 숨기는 방법 텍스트를 화면에 표시하지 않게 하는 방법에는 여러가지가 있다. 여러 방법들 중 화면에서는 보이지 않게 하면서 보조기기 사용자의 접근성에도 문제되지 않는 방법에는 어떤게 있을까? 1. display:none; display: none; display속성의 값을 none..

box-shadow 1. box-shadow 2. filter:drop-shadow 1.일반적인 그림자는 css에서 box-shadow:-5px 5px 10px black; 으로 줌 2. filter:drop-shadow(-5px 5px 10px black); 는 태그안쪽 요소를 다잡아서 그림자 box-shadow .box{ margin: 40px; padding: 50px; background-color: #fff; position: relative; font-size: 24px; } .cor{ position: absolute; left:-40px; width: 0; height: 0; overflow: hidden; border: 20px solid transparent; border-right-c..

라벨 dataset labels 숨기는 방법 var ctx = $('#gold_chart'); var goldChart = new Chart(ctx, { type: 'line', data: { labels: dates, datasets: [{ label: 'I want to remove this Label', data: prices, pointRadius: 0, borderWidth: 1 }] } }); 차트를 만들어내는 js 코드가 있다고 가정하자. 여기서 labels을 숨기는 방법은 아주 간단하다. ... options: { legend: { display: false }, tooltips: { callbacks: { label: function(tooltipItem) { return tooltipI..

https://www.vuescript.com/dropdown-date-range-picker/ Dropdown Date & Date Range Picker For Vue - Vue Script A minimal clean date picker component where the users are able to select a date and date range from associated dropdowns. www.vuescript.com props 예) Vue Dropdown Datepicker tanvir0604.github.io Description: A minimal clean date picker component where the users are able to select a date an..

vue js에서 클릭 이벤트에 대한 속성 값을 가져와야하는 경우 vuejs에서 데이터 속성 값을 가져 오는 데 도움이 될 수 있습니다. 버튼 클릭 이벤트를 작성하고 vue.js에서 사용자 정의 속성 값을 가져옵니다. 이 예제에서는 "data-id"와 같은 사용자 지정 속성이있는 버튼을 사용하고 버튼을 클릭하면 콘솔에서 사용자 지정 데이터 속성 값의 해당 값을 가져옵니다. event.target.getAttribute ()를 사용하여 데이터 속성 값을 얻습니다. event.target.getAttribute (attribute_name); 클릭하기 data : { message : "환영합니다, 잠시만 기다려주세요 ...." }, methods:{ callFunction : function (event) ..

클릭한 요소를 가져오는 방법으로 event 객체의 target 또는 currentTarget 프로퍼티를 사용합니다 test checkTarget(event) { var ele = event.currentTarget; console.log(ele); event.target // 클릭된 span 태그를 반환 event.currentTarget // 이벤트가 바인딩된 div 요소를 반환 event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환합니다. 즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용합니다. 하지만 event.currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환합니다.

https://shubamba.tistory.com/52 스와이프메뉴 클릭하면 가운데오기 swiper js버전 See the Pen swiper 선택요소 중앙정렬 by soohyeon (@sooh) on CodePen. 스크롤 버전 선택된 요소가 박스의 중앙정렬 될수있도록 scrollLeft값 조작 listWidth : 요소 전체 길이 boxHarf : 스크롤.. shubamba.tistory.com

안녕하세요. 오늘은 자바스크립트로 요소의 위치를 구하는 방법에 대해 포스팅 합니다. 요소의 위치를 구할 때, 생각해야할 개념이 있습니다. 이 개념은 자바스크립트 뿐만 아니라, 모든 화면 영역에서 공통으로 쓰이는 개념이라 생각하시면 됩니다. 해당 개념은 크게 절대위치와 상대위치 2가지로 설명 됩니다. 좌표를 처리하는 것은 생각보다 까다로우며, 단순히 API 하나로 처리되지 않습니다. 따라서 좌표를 잘 처리하기 위한 개념을 설명하고, 그 개념을 토대로 좌표를 구하는 방법에 대해 설명 할 예정입니다. 또한 Y값 기준으로 내용을 전개하며, 해당 개념을 그대로 X값을 구하시면 됩니다. 절대위치 와 상대위치란? 절대위치는 시작점으로 부터 떨어진 크기 값입니다. 중요한건 시작점이 어디인지 아는것이 매우 중요합니다. ..