HTML5, CSS3, 자바스크립트 Javascript 등
CSS MASK-IMAGE 아래와 같은 이미지를 마스킹(마스크 적용)하는 방법입니다. 참고: 이미지 마스킹(마스크)이란? 마스킹으로 덧씌울 PNG 이미지 파일을 준비합니다. 이 마스킹 이미지를 씌우면 투명한 부분은 표시되지 않고, 검은색 부분은 표시가 됩니다. HTML 파일에서 적용하고자 하는 요소에 다음 CSS를 삽입합니다. img { -webkit-mask-image: url(“ddmask.png”); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: 더보기…
자바스크립트는 아무 곳에서나 시스템의 변수, 함수, 객체들을 맘대로 덮어쓸 수 있다는 문제점이 있지만, 그 문제점을 역으로 이용하여 콘솔 로그를 브라우저 내에 표시하는 것이 가능합니다. 먼저 body 태그 내에 콘솔 로그를 표시할 영역을 생성합니다. <pre id=”console”></pre> 다음 자바스크립트에서 위의 pre 태그를 불러옵니다. const consoleDiv = document.getElementById(“console”) 아래의 consoleToHtml 함수를 작성합니다. const 더보기…
이 예제는 아래와 같이 게시판 등에서 글을 작성할 때 유튜브 주소를 추가하면, 해당 주소에서 유튜브 동영상 ID를 추출한 후 iframe 플레이어 형태로 변환합니다. 1. 텍스트에서 유튜브 URL을 가져오는 정규표현식을 작성합니다. // 유튜브 URL 찾는 패턴 const youtubeUrl = /(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/g 이렇게 하면 아래와 같이 유튜브 주소를 찾을 수 있습니다. 더보기…
body 태그의 css를 변경합니다. position을 fixed로 하고, top의 위치를 현재 스크롤 위치로 설정한 뒤 overflow-y: scroll; width: 100%; 을 추가 지정하면 스크롤바로 인해 배경의 위치가 움직이지 않고도 스크롤 방지를 할 수 있습니다. useEffect를 사용해 css를 변경하며, 모달이 사라질 때에는 useEffect의 return을 사용해 body의 cssText를 리셋시킨 다음 window,scroll을 이용해 현재 스크롤 위치로 더보기…
리액트(React): React Redux 요약 정리 redux-saga 깃허브 역할 redux-saga는 애플리케이션에서 일어나는 사이드 이펙트(side effects) (데이터를 불러오는 비동기 처리나 브라우저 캐쉬에 접근하는 행위들)을 쉽게 관리하며 효과적인 실행, 손쉬운 테스트 그리고 에러 핸들링을 쉽게 해준다. 특징 saga 패턴을 차용 (참고 블로그) 미들웨어로서 역할을 수행 (React는 Redux 액션을 수행하면 Redux-Saga에서 디스패치하여 Redux의 더보기…
참고 자바스크립트: IntersectionObserver (1) 이미지 lazy-loading 구현 jQuery: 제이쿼리 이미지 지연 로딩(lazy loading) 플러그인 (jQuery Lazy) 자바스크립트: 무한 스크롤 (스크롤 이벤트 이용, 라이브러리 없이) intersectionObserver를 사용하지 않고 마우스 스크롤 이벤트를 이용해 이미지 지연 로딩(lazy loading)을 하는 방법입니다. 이미지 지연 로딩이란 웹 페이지를 렌더링할때 이미지를 불러오지 않고 사용자가 특정 영역을 더보기…
reqres.in 이라는 사이트를 이용하면, 별도의 서버를 만들거나 샘플 데이터를 생성하지 않고도 빠르고 편리하게 Restful API 환경을 마련할 수 있습니다. 아래는 공식 홈페이지에 소개되어 있는 서비스의 특징 및 장점입니다. 미리 데이터가 마련되어 있어 별도로 샘플 데이터를 만들 필요가 없습니다. 실제로 동작하는 Restful API이며 응답 코드 (GET, POST, PUT 및 더보기…
설정하기 이미지 또는 아이콘 파일을 준비한 다음, header 태그에 다음 부분을 설정합니다. href 부분에 파일 경로를 입력합니다. <head> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width,initial-scale=1.0″> <link rel=”icon” href=”<%= BASE_URL %>favicon.ico”> <link rel=”shortcut icon” href=”<%= BASE_URL %>logo.png”> <link rel=”apple-touch-icon” href=”<%= BASE_URL %>logo.png”> <title><%= htmlWebpackPlugin.options.title %></title> </head> rel="icon" 부분은 파비콘(favicon)을 설정합니다. 더보기…
input 태그에서 radio 타입은 checkbox와 다르게 특정 그룹 내 여러 라디오 버튼 중 하나만 선택할 수 있는 것이 특징입니다. 기본 형태 <input type=”radio” value=”1″ name=”score”> 1 <input type=”radio” value=”2″ name=”score”> 2 <input type=”radio” value=”3″ name=”score”> 3 <input type=”radio” value=”4″ name=”score”> 4 <input type=”radio” value=”5″ name=”score”> 5 value에 자바스크립트나 폼 더보기…
자습서: React 시작하기 리액트 공식 자습서로 처음 제시하는 과제는 ‘틱택토’ 게임입니다. 자습서라는 이름에 맞지 않게 이해하기 어렵고 구현 난이도가 높은 편입니다. 이 자습서의 구성은 먼저 자습서가 제시하는 범위의 예제를 완성한 후에, 추가 구현사항 6가지를 스스로 풀어보도록 하고 있습니다. 기존 코드는 다음과 같습니다. See the Pen Tic Tac Toe by Dan 더보기…