본문 바로가기

프론트엔드73

노드 동적 생성과 DocumentFragment 노드 동적 생성과 DocumentFragment DocumentFragment 노드는 문서, 요소, 어트리뷰트, 텍스트 노드와 같은 노드 객체의 일종으로, 부모 노드가 없어서 기존 DOM과는 별도로 존재한다는 특징이 있다. DocumentFragment 노드는 컨테이너 요소와 같이 자식 노드들의 부모 노드로서 별도의 서브 DOM을 구성하여 기존 DOM에 추가하기 위한 용도로 사용한다. DocumentFragment는 활성화된 문서 트리 구조의 일부가 아니기 때문에 fragment를 변경해도 문서에는 영향을 미치지 않으며(reflow 포함) 성능에도 영향이 없다. https://developer.mozilla.org/ko/docs/Web/API/DocumentFragment DocumentFragment .. 2022. 2. 3.
프론트엔드 역사, 미래, 업무범위 프론트엔드 역사, 미래, 업무범위 프론트엔드에 대해 꼭 한 번 읽어봄직한 포스트가 있어 소개한다. 시니어 개발자가 말하는, 프론트엔드 역사와 미래https://yozm.wishket.com/magazine/detail/1289/ 시니어 개발자가 말하는, 프론트엔드 역사와 미래 | 요즘IT웹 프론트엔드는 웹 서비스 발전에서 막내 격으로 생긴 포지션입니다. 프론트엔드라는 영역이 갑자기 생겨난것은 아니지만 지금처럼 이렇게 선명하게 프론트엔드와 백엔드가 세분화된 배경에yozm.wishket.com 시니어 개발자가 말하는, 프론트엔드 업무와 잘하는 프론트엔드 개발자란https://yozm.wishket.com/magazine/detail/1294/ 시니어 개발자가 말하는, 프론트엔드 업무와 잘하는 프론트엔드 개발.. 2022. 1. 27.
특수 문자 용어 정리 특수 문자 용어 정리 특수 문자의 정확한 발음 - 영어 발음과 한글 발음을 정리해 보았다. 기호 영어(발음) 한글 ` Grave(그레이브) - ~ Tilde(틸드) 물결표시 ! Exclamation(엑스클러메이션) mark 느낌표 @ At(엣) sign 골뱅이 # Number(넘버) sign, Sharp(샵) 샵, 우물 정 $ Dollar(달러) sign 달러 % Percent(퍼센트) sign 퍼센트 ^ Caret(캐럿) - & Ampersand(엠퍼센드) - * Asterisk(에스터리스크) 별표 - Hyphen(하이픈), Dash(대쉬) 마이너스 _ Underscore(언더스코어), Low dash(로대쉬) 밑줄 = Equals(이퀄) sign 이꼬르 “ Quotation(쿼테이션) mark 큰 따.. 2022. 1. 26.
테이블 헤더 고정 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.

티스토리툴바