Web Frontend(21)
-
IOS safari 하단 주소창과 css fixed | 높이값 인식 문제
관련 문제로 일주일을 고심한 적이 있었는데, 구체적인 상황은 아래와 같았습니다. 하단 주소창이 없는 상태에서 버튼을 눌러 css fixed를 활용하여 전체 화면을 꽉 채우는 모달(이하 풀 모달)을 띄웠을 때 하단 주소창이 나오거나 전체 높이 값을 제대로 인식 못 했습니다. 원인: 버튼을 눌러 css fixed 처리시 scroll 이벤트가 발생하여 하단 주소창 발생 해결 방안 : html 높이값을 window.innerHeight 보다 높게 주기 구체적은 방법 : ##1. resize 이벤트로 window.innerHeight 보다 높게해서 :root의 css custom variable에 저장하기(IOS version 때문인지, 아니면 아이폰 기기 마다 다른 viewport 높이 때문인지 분기하여 해당 ..
2023.01.23 -
디바운스(Debounce)와 쓰로틀링(Throttle) 예제
성능상의 문제로, 다음 2가지 방법을 사용하기도 한다. 쓰로틀링 : 일정 시간 간격으로 실행됨. 해당 시간 보다 짧게 발생한 것들은 무시하되 그 중 최종 발생했던 것만 기억해서 그것을 실행한다. function throttle(func, ms) { let isThrottled = false, savedArgs, savedThis; function wrapper() { if (isThrottled) { savedArgs = arguments; savedThis = this; return; } func.apply(this, arguments); isThrottled = true; setTimeout(function () { isThrottled = false; if (savedArgs) { wrapper.a..
2022.10.23 -
CSS - pointer-events
버튼이나 구역을 만들때 a 태그가 다른 태그들 밑으로 들어가서 클릭이 안되는 현상이 발생할때 상당히 유용하다. 관련 태그들에 pointer-events:none 처리만 하면 밑에 숨어 있던 a 태그만 활성화 되는 매직! 강제로 관련 태그들에 z-index 넣지 않아도 깔끔하게 처리 가능하다.
2022.05.12 -
국비교육 웹프론트엔드 & 웹퍼블리셔 학원 추천
학원과 금전적으로 전혀 관련 없는 사람이며, 순수하게 좋았기 때문에 추천을 한다. 빨리 가려면 혼자 가고 멀리 가려면 함께 가라. 어디서 들은 문장이다. 이 길로 들어선지 5년이 정도 되었지만 얼마든 인터넷으로 상세하게 공부할 수 있다. 나 역시 혼자 할 수 있을거라 생각했지만 인터넷에 무료로 쉽게 볼 수 있는 압도적인 정보의 양 때문에, 이미 이 길을 걸었던 선생님을 만나는 것은 반드시 필요했다. 우리 인생에 시간은 그렇게 많지 않다. 지름길로 가기 위해 실무에서 꼭 필요한 것만 배울 수 있게 학원이나 인강을 찾아야 한다. 또한 혼자 공부하면 나태해 지는 위험이 굉장하기 때문에 스파르타식까지는 아니더라도 함께 배우며 지도를 받아야 한다. 인강도 좋겠지만 필자가 다녔던 아래 국가에서 학비를 지원해주는 아..
2022.03.11 -
웹 퍼블리셔, 웹 프론트엔드 면접에서 질문 받은 것
몇 번의 면접을 보면서 다음과 같은 면접 질문을 받았습니다. 일반적으로 받은 질문 1분 자기 소개 하기 (아래와 같이 말하면 좋음) 서론: 한 문장으로 나를 표현. ex) 저는 이 회사에 지원하게된 xxx 입니다. 본론: 이전 회사에서 했던일 또는 지원한 회사의 필요한 업무 스킬에 대하여 자신을 어필 결론: 한 문장으로 회사에서 내 능력을 발휘하고 싶는 맥락으로 어필. 회사 그만둔 이유 이력서상 공백기간 설명 우리 회사의 궁금한 점 스트레스 받은 상황에서 보통 어떻게 푸는가 다른 경쟁 입사자와 비교하여 자신의 강점과 약점 마지막 하고 싶은 말 웹퍼블리셔 기술 면접 받은 질문 만들어진 상업 사이트를 보여주고 시안이 모두 주워졌을때 언제까지 처리할 수 있겠는가? BEM에 대하여 생각하는 바 inilne-bl..
2022.02.23 -
Dart Sass(SCSS) 랜덤으로 숫자 출력 방법
예를들어, 많은 요소들을 반복돌면서 랜덤한 시간동안 변화를 주고 싶다면 아래와 같은 코드를 활용하는 것도 좋다. 단, Darkt Sass만 가능한 문법이다. 아래와 같이 코드를 작성하면 @use "sass:math" as math; @for $i from 1 through 5 { .vidItem:nth-child(#{$i}) { opacity: 0; animation: upAnime #{2.3 * math.random($limit: null)}s ease-in-out 0.8s 1 forwards; } } 아래와 같은 결과를 얻을 수 있음. .youtubeConts .vidItem:nth-child(1) { opacity: 0; animation: upAnime 0.5414398116s ease-in-ou..
2022.01.18 -
크롬(Chrome) vs 웨일(Whale) 간단 비교
4년간 웹퍼블리싱 관련 일과 일상 생활을 하면서 항상 크롬 브라우저 앱과 웹만을 사용했었다. 파이어폭스, 엣지 브라우저 등도 사용해봤지만 단연 크롬이였다. 하지만, 오늘 웨일 환경설정을 하나하나 수정하고 적용해봤는데, 지금까지 왜 크롬브라우저를 써왔는지 자괴감?이 든다. 크롬과 가장 비교하여 웨일의 강력한 장점은 다음과 같다. 상단 북마크 공간의 다양한 설정과 북마크 클릭시 새창 열기 가능함. 막강한 마우스 제스처 원클릭 드래그를 통한 막강한 파파고의 번역 ctrl + 드래그를 통한 세분화된 확대(크롬은 세분화가 안되어있어 알맞게 보기 불편함 크롬과 가장 비교하여 웨일의 자잘한 장점은 다음과 같다. 그외에, 컨텐츠 내용까지 다크모드로 지원, 다양한 위젯기능(계산기, 스톱워치 등등)이 내장되어 있어 쓰기 ..
2022.01.08