빵굽는 프론트엔드 개발자
태그 목록
- 전체보기(77)
- JavaScript(32)
- 자바스크립트(25)
- 리액트(15)
- CSS(9)
- 위코드(8)
- 라이브러리(7)
- React(6)
- 프로미스(6)
- html(5)
- WeCode(5)
- 토이프로젝트(5)
- promise(4)
- Fetch API(4)
- DOM(4)
- 코드카타(4)
- material ui(4)
- 알고리즘(4)
- 차트(4)
- 그래프(3)
- 프로젝트(3)
- Fetch(3)
- toy project(2)
- Recharts(2)
- async(2)
- 비동기(2)
- node.js(2)
- useEffect(2)
- vue(2)
- await(2)
- responsive web(2)
- 콜백함수(2)
- Math.random(2)
- 팀프로젝트(2)
- 인스타그램(2)
- 팀워크(1)
- lottie(1)
- date picker(1)
- XMLHTTPRequest(1)
- 깃(1)
- 무한루프(1)
- 반응형 웹(1)
- 프론트엔드(1)
- 기업협업(1)
- localhost(1)
- moment(1)
- Exchange Rate(1)
- Responsive Website(1)
- 레거시(1)
- VanillaJS Toy Project(1)
- 반응형 웹사이트(1)
- 안녕히계세요 여러분 짤(1)
- 포트폴리오(1)
- keydown(1)
- 이벤트 캡쳐링(1)
- 가위바위보(1)
- Hangman(1)
- 회고록(1)
- Unary Operator(1)
- 스위치(1)
- 중복제거(1)
- promise chain(1)
- getElementById(1)
- toLowerCase(1)
- toUpperCase(1)
- 단항 연산자(1)
- 티스토리(1)
- select(1)
- callback Hell(1)
- 삼항연산자(1)
- 타입(1)
- vuex(1)
- inline block(1)
- setTimeout(1)
- 테이블(1)
- axios(1)
- 인턴(1)
- 버튼(1)
- hook(1)
- 스프레드 연산자(1)
- 전역변수(1)
- localstorage(1)
- block(1)
- 에어비앤비(1)
- 개발자(1)
- inline(1)
- InnerHTML(1)
- Movie Booking(1)
- spread operator(1)
- proptypes(1)
- youtube(1)
- addEventListener(1)
- ipinfo(1)
- 노드JS(1)
- 조건부렌더링(1)
- starbucks(1)
- db(1)
- slice(1)
- RDBMS(1)
- semantic web(1)
- 이벤트 버블링(1)
- 행맨게임(1)
- vue-lottie(1)
- Nivo(1)
- ES6(1)
- mutations(1)
- modal(1)
- set(1)
- charAt(1)
- git(1)
- register page(1)
- HTTP Request(1)
- Promise Chaining(1)
- keypress(1)
- 숫자변환(1)
- 로띠(1)
- scss(1)
- 콜백지옥(1)
- Root(1)
- 프로미스체인(1)
- semantic tag(1)
- 환율계산기(1)
- uuid(1)
- 클론코딩(1)
- BEM(1)
- 속성값(1)
- 바닐라js(1)
- querySelector(1)
- 싱글스레드(1)
- 노드(1)
- 슬라이더(1)
- catch(1)
- clone coding(1)
- 코드 리팩토링(1)
- 웹개발(1)
전체보기 (77)JavaScript(32)자바스크립트(25)리액트(15)CSS(9)위코드(8)라이브러리(7)React(6)프로미스(6)html(5)WeCode(5)토이프로젝트(5)promise(4)Fetch API(4)DOM(4)코드카타(4)material ui(4)알고리즘(4)차트(4)그래프(3)프로젝트(3)Fetch(3)toy project(2)Recharts(2)async(2)비동기(2)node.js(2)useEffect(2)vue(2)await(2)responsive web(2)콜백함수(2)Math.random(2)팀프로젝트(2)인스타그램(2)팀워크(1)lottie(1)date picker(1)XMLHTTPRequest(1)깃(1)무한루프(1)반응형 웹(1)프론트엔드(1)기업협업(1)localhost(1)moment(1)Exchange Rate(1)Responsive Website(1)레거시(1)VanillaJS Toy Project(1)반응형 웹사이트(1)안녕히계세요 여러분 짤(1)포트폴리오(1)keydown(1)이벤트 캡쳐링(1)가위바위보(1)Hangman(1)회고록(1)Unary Operator(1)스위치(1)중복제거(1)promise chain(1)getElementById(1)toLowerCase(1)toUpperCase(1)단항 연산자(1)티스토리(1)select(1)callback Hell(1)삼항연산자(1)타입(1)vuex(1)inline block(1)setTimeout(1)테이블(1)axios(1)인턴(1)버튼(1)hook(1)스프레드 연산자(1)전역변수(1)localstorage(1)block(1)에어비앤비(1)개발자(1)inline(1)InnerHTML(1)Movie Booking(1)spread operator(1)proptypes(1)youtube(1)addEventListener(1)ipinfo(1)노드JS(1)조건부렌더링(1)starbucks(1)db(1)slice(1)RDBMS(1)semantic web(1)이벤트 버블링(1)행맨게임(1)vue-lottie(1)Nivo(1)ES6(1)mutations(1)modal(1)set(1)charAt(1)git(1)register page(1)HTTP Request(1)Promise Chaining(1)keypress(1)숫자변환(1)로띠(1)scss(1)콜백지옥(1)Root(1)프로미스체인(1)semantic tag(1)환율계산기(1)uuid(1)클론코딩(1)BEM(1)속성값(1)바닐라js(1)querySelector(1)싱글스레드(1)노드(1)슬라이더(1)catch(1)clone coding(1)코드 리팩토링(1)웹개발(1)
[JavaScript]Closing modal on outside click | 모달창 외부 클릭해서 닫게 하는 방법
포트폴리오 사이트나 기업 웹사이트를 만들 때, 모달(modal)창의 닫기 버튼 말고도 모달창을 제외한 화면을 클릭해서 닫을 수 있도록 해야 사용자가 불편함 없이 사이트를 이용할 수 있다. 간단한 HTML 태그 구성과 자바스크립트 단 몇 줄이면 해결 가능하다. 1. HTML, CSS 설정 큰 범위의 태그 두 개만 보면 된다. 가장 상위 태그로 `를, 바로 하위에 자식 태그로 를 구성한다. 나중에 자바스크립트 이벤트를 받을 대상은 자식이 아닌 부모이므로 id`값은 부모에만 지정해준다. 그리고 CS
2020년 11월 10일
·
2개의 댓글·
12