프론트엔드8 (공통 컴포넌트) 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. 개인 이력서 - 반응형 웹 디자인 적용기 반응형 웹 디자인이란? 반응형 웹 디자인이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말합니다. 개인적으로 만든 이력서 페이지에 처음으로 반응형 웹을 적용시켜 보았습니다. PC버전, 테블릿 버전(모바일 가로모드 포함), 모바일 버전에 대해 각각 적용시키기로 했고 우선 Figma로 간단한 레이아웃 와이어 프레임 설계를 했습니다. 스타일은 scss를 적용하였습니다. 1. 공통 mixin 파일에 media쿼리로 각 기기별 최대 width 픽셀값을 적용해줍니다. // 기기별 최대 width px $mobile-max: 767px; $tablet-max: 1023px; // 기기별 최소 width px $mo.. 2023. 10. 22. (파일시스템) Blob, Base64, arrayBuffer, Buffer 모든 이미지, 영상, 음성 데이터들은 바이너리 형태로 존재하게 된다. 그렇다면 이러한 바이너리 형태의 데이터를 우리는 어떤 형식으로 만들어 쓸수 있을까? 1. Blob (Binary Large Object) Blob은 대용량 바이너리 데이터를 객체 형태로 변환해 저장한 것이다. js에서 input엘레먼트로 파일을 받을때 나오는 FileList, File 역시 이 Blob형식을 상속받은 것이라고 할 수 있다. 이러한 Blob 데이터는 js에서 createObjectUrl() 메소드를 통해 Blob Url로 변환 하여 사용할 수 있는데, 해당 브라우저에서만 임시적으로 사용할 수 있고 그냥 두면 GC가 해제 시켜주지 않기 떄문에 revokeObjectUrl()로 꼭 해제를 시켜줘야 한다. 또한 Base64, .. 2023. 9. 10. (모듈시스템)CJS와 ESM - 모듈 시스템이란? 초창기 자바스크립트의 크기가 작았을땐 하나의 자바스크립트 파일로도 페이지가 동작했지만 점점 시간이 지나면서 스크립트의 크기가 커지고 복잡해지면서 여러 문제가 생기게 되었다. 특히 여러 스크립트파일을 하나의 전역 스코프에서 관리하기 때문에 파일의 순서가 잘못되면 전역 변수가 쉽게 오염이 되고 많은 버그가 생기게 된다. 그래서 결국 브라우저에서도 이러한 자바스크립트를 위한 모듈시스템을 도입하게 되는데, 모듈시스템을 통해 각 모듈의 import, export를 제외한 나머지것들은 타 모듈에서 신경쓰지 않아도 되었으며, 무엇보다 파일의 단위를 나누기 수월해 졌다. 브라우저에서는 esm모듈 시스템, Node.js에서는 commonJs란 모듈시스템을 현재까지 사용중이며 그 과정에는 AMD와 U.. 2023. 8. 11. 이전 1 2 다음
