본문 바로가기

분류 전체보기129

테이블 헤더 고정 sticky 테이블 헤더 고정 sticky thead 고정시키기table의 tbody 내용이 많아지면, 스크롤에 넘어가지 않도록 thead를 고정시켜야 할 때 있다. thead 고정하는 방법 - datagrid 라이브러리이를 구현하기 위해 datagrid 라이브러리를 사용하는 것이 가장 안정적이고 편하기도 하겠지만,단순히 thead의 고정만을 위해 datagrid 라이브러리를 사용하는 것은 비효율적이다. thead 고정하는 방법 - 만으로 thead를 고정시키는 방법에 대해 서치를 해보면 몇 가지 방법이 나오는데,모든 상황을 만족시키는 방법은 없다.특히, table-layout 속성을 변형(fixed) 시키면서까지 헤더 고정 기능을 구현하는 방법은,순수 이 가지고 있는 너무나 큰 장점들을 버리게 된다. (테이블을 .. 2022. 1. 21.
FontAwesome CSS Pseudo-elements FontAwesome CSS Pseudo-elements::before 와 같은 pseudo-element를 활용해 FontAwesome 아이콘을 페이지에 추가할 수 있다. CSS Pseudo-elements를 사용하여 아이콘을 정의하는 방법가상요소 ::before  ::after  둘 중 하나를 사용한다.아래 표를 참고하여 font-family 값을 설정한다.아래 표를 참고하여 font-weight 값을 설정한다.StyleAvailability@font-face weight@font-face font-familySolidFree Plan900Font Awesome 5 Free or Font Awesome 5 Pro (for pro users)RegularPro Plan Required400Font Aw.. 2022. 1. 19.
fetch 함수로 html 문서 로드하기 fetch 함수로 html 문서 로드하기 fetch 함수는 1. XMLHttpRequest 객체와 마찬가지로 HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API 다. 2. XMLHttpRequest 객체보다 사용법이 간단하고 프로미스를 지원하기 때문에 비동기 처리를 위한 콜백 패턴의 단점에서 자유롭다. 3. 비교적 최근에 추가된 Web API로서 인터넷 익스플로러를 제외한 대부분의 모던 브라우저에서 제공한다. 4. fetch 함수에는 HTTP 요청을 전송할 URL과 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다. Fetch API : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API Fetch API -.. 2022. 1. 14.
collapse toggle(show&hide) vanilla javascript collapse toggle(show&hide) vanilla javascript '접혔다 펼쳤다' 를 자바스크립트로 구현할 때, 단순히 '있다 없다' 를 구현하기는 쉽지만, 자연스럽게 '접혔다 펼쳤다' 를 구현하기는 생각보다 까다롭다. jquery 로 구현할 때는 자연스럽게 구현하는 것에 대한 고민을 할 필요가 없다. $(document).ready(function(){ $("button").click(function(){ $("p").toggle(1000); }); }); jquery 라이브러리 도움 없이 pure javascript로만 자연스러운 toggle 기능을 구현할 때 어려운 점은, 펼쳐진 영역의 height 값을 알아내기가 까다롭다는 점이다. (height auto 이면 transition.. 2022. 1. 11.
datagrid Toast UI Grid & DataTables datagrid Toast UI Grid & DataTables datagrid는 데이터를 화면에 뿌려주는 도구이다. free datagrid 라이브러리 중에 Toast UI Grid 와 DataTables를 간략히 소개한다. 이 두 라이브러리를 테스트 하면서, resizing 기능에 차이를 발견했는데 Toast UI Grid는 grid를 감싸는 element width값의 변화에 대해 유동적으로 대응하지 않는다.(setWidth() 메소드로 해결 가능하다.) 다만, window의 resize 이벤트에는 반응을 한다. 반면 DataTables 는 window의 resize 이벤트에 유동적으로 반응할 뿐 아니라, grid를 감싸는 element width 값의 변화에도 유동적으로 대응을 한다. 이 resi.. 2022. 1. 10.
CustomEvent 사용 예제 CustomEvent 사용 예제 CustomEvent() API를 언제 사용하는지 곰곰이 생각한 것을 여기에 정리해 본다. 뭔가 이벤트가 생겼을 때 해야 할 일을 누가 언제 처리하는 것이 효과적인가에 따라 CustomEvent()를 사용하게 된 거 같다. 사례 1 door의 역할(열고 닫기)을 하는 버튼을 클릭할 때, door 버튼은 문을 열고 닫는 주요 기능뿐만 아니라, 이러저러한 일을 해야 한다. btn_door.addEventListener('click',function(){ doOpenHide(); dosomething1(); dosomething2(); dosomething3(); ... }); door 버튼을 클릭할 때, door 버튼은 주요 역할(열고 닫기)만 수행하고, 'door 가 열거나.. 2022. 1. 7.

티스토리툴바