전체 글68 (공통 컴포넌트) z-index 관리하기 오버레이 공통 컴포넌트인 Modal, PopOver를 구현하기 위해선 각각의 z-index를 관리할 수 있어야 한다. z-index에 대해 알아보자. z-index란? 위 사진과 같이 각 html 요소들의 z축을 정의하는 속성이다. z축이 높을수록 앞으로 튀어 나온다고 보면 된다. z-index 쌓임 맥락(stacking context) 하지만 무조건 z-index가 크다고 해당 요소의 z축이 높게 잡히는게 아니다. 요소의 posiiton, 부모의 z-index등이 어떻냐에 따라 실제 z축이 잡히게 된다. 포토샵 레이어를 생각하면 된다. 위 사진에서 Cat의 Moustache의 z축이 아무리 높다해도, Dog가 Cat보다 위에 있다면 강아지 사진을 역전할 수 없다. 이렇게 z-index는 그룹화되어 사용.. 2024. 3. 9. (포트폴리오)CaptureMark 제작기 -2편 (vanillaJS 컴포넌트 구현) 지난 1편에서 기획, 설계, 디자인을 빠르게 진행했고, 본격적으로 vanillaJS로 개발을 시작하였다. - 프로젝트 구성 크롬 익스텐션 개발은 chrome://extensions/ 에 들어가서 구성된 파일을 로드해주면 된다. (https://support.google.com/chrome/a/answer/2714278?hl=ko 자세한 설명은 여길 참고하면 된다.) 파일엔 전체 manifest파일, 앱 클릭시 띄워줄 popup html, background.js, 다른 진입점 파일, 아이콘 과 같은 리소스 파일을 포함해야 한다. 나의 경우엔 각 진입점 기준으로 js를 번들링 해주고 빌드파일만 업로드할 수 있게 간단히 webpack으로 빌드 폴더를 세팅했다. const path = require('path.. 2024. 2. 6. (포트폴리오)CaptureMark 제작기 -1편 (아이디어, 기획, 설계, 디자인) 혼자서 새로운 사이드 플젝을 시작하기로 마음 먹었다. 첫번째는 아이디어 선정이 었는데, 몇가지 기준을 정했다. 1. 2주안에 혼자서 구현 가능할 것 - 평소 회사 업무도 있고, 이 이상 넘어가면 계속 집중력을 발휘하기 어려웠다. 2. vanilla js로 만들 수 있을 것 - 기본적인 js실력을 늘려야 했고, 가장 좋은게 실제로 만들어 보는거라고 생각 했다. 3. 실제 수요가 있고 사용가능한 것을 만들 것 - 실제 사용자가 쓸 수 있는 의미 있는 것을 만들고 싶었다. 여러 아이디어를 생각하다가 일단 크롬 익스텐션이 눈에 들어왔다. 크롬 브라우저 사용률이 높은 만큼 접근성도 좋고 생각보다 러닝커브가 높지 않았다. 그리고 무엇보다 브라우저의 여러 기능을 활용할 수 있기 때문에 다양한 아이디어가 나올 수 있었.. 2024. 2. 3. 안티프래질 이 책을 본 이후 실제로 세상을 보는 시각이 많이 바뀌었다. 근 10년에 달하는 초중고 정규과정과 대학과정, 그리고 수많은 매체에서 우리는 알게모르게 불확실성을 배척하고 안정성을 편애하도록 주입받는다. 단순히 잘리지 않고 안정적인 직장이라는 이유로 공무원 열풍이 불며 수많은 청춘들이 자신의 귀중한 시간과 돈을 투자했지만, 결국 열악한 근무환경에 내몰려 퇴사하고 입시학원 배만 불려준 꼴을 적지않게 볼 수가 있다. 세상은 복잡계이며 그 누구도 어떤 불확실한 일이 일어날지 예측할수 없고 완전히 안정적이란건 이상에 가깝기 때문에 단순 그래프의 표준편차만 보고 예측하는건 정말 위험하단 것이다. 극단의 일이 일어날 확률이 0.1%라도 하여도 실제로 나에게 닥친다면 결국 100%로 일어날 일이나 다름 없다는 것이다... 2023. 11. 5. 이전 1 2 3 4 ··· 17 다음
