풀먹고 개발공부하는 노동자

스크롤바 작업중이었다.아.. 난관에 봉착했다.뭐가 문제인가?스크롤바 상단, 하단의 여백이 없어서border-radius가 들어간 영역에서는 스크롤바가 보기 좋지 않다.아래와 같이 말이다.. 라운드가 아닌 직각 박스안에서는 크게 문제 될 것은 없어보이나,모서리가 둥근 박스에서는 스크롤바가 .. UI작업 하면서 매번 고민과 고통을 주는 요소들이 있다.요즘에는 SWIPER 커스텀, 그리고 스크롤바가 그것이다.디자이너가 원하는 스크롤바는 구현하기 쉽지 않다.애초에 스크롤바를 CSS로 커스텀하기가 .. 고되다. (MDN에서도 말한다. '스크롤바 스타일을 지정하는 것은 피해야 합니다. 스크롤바의 모양을 기본 설정에서 변경하면 외부 일관성이 깨져 사용성에 부정적인 영향을 미치기 때문입니다. '라고..) 위에는 C..

간혹 디자인을 포토샵을 전달 받으면 (요즘은 거의 피그마를 사용하므로) 문제가 생긴다.무슨 문제냐.그 전에 문제의 원인이 뭐냐.그것은 내 C드라이브의 용량이 ㄱ적다는 거다.C드라이브는 맨날 빨간색이다. 항상 위태위태 하다. 포토샵 파일을 4개 이상 전달 받으면 벌써 두렵다. 파일 중에 1~2개는 메모리 부족으로 안 열린다.구글에서 블로그 글을 뒤져보니.. 역시 선배님들의 친절한 설명과 함께 방법을 찾을 수 있었다. 먼저 상단 메뉴바에서 -> 편집 -> 환경설정 -> 스크래치 디스크 로 들어간다. 스크래치 디스크를 보면 보통 C드라이브에 체크가 되어 있다.C드라이브는 위태위태한 장소다. 매번.그러나 D드라이브의 남은 공간을 봐라. 내 컴의 경우 664기가.. 가 남았다.D드라이브든 뭐든 남는 공간이 여..

WV 인터랙션 작업 중 (카드 펼쳐짐) 크롬에서는 부드럽게 정상적으로 작동하는 반면, 사파리, edge 에서 버벅거림 현상 발견. 이유는 top, left 로 위치를 잡았기 때문. transform으로만 작업했더니 모든 브라우저에서 부드럽게 정상 작동! 반응형 사이트이기 때문에 mobile 분기에서는 아래처럼 vw 단위를 사용했다. 현재 인터랙션 작업하면서 가장 까다운것이 cubic-bezier 값 맞추기. 이게 지금 제일 어렵다.

개발폐관수련 1일 차. 합합! 스승 : ㅅㅈ 필기 시작. 1. window.onload window.onload = () => {}// 기존 function 문법window.onload = function() { console.log('페이지 로드 완료');};// ES6 화살표 함수 문법window.onload = () => { console.log('페이지 로드 완료');}; es6 문법으로 웹 페이지가 완전히 로드된 후에 특정 함수를 실행하도록 한다.jQuery의 $(document).ready() 와 비슷한 역할이라고 보면 된다. (차이점 ↓)$(document).ready() 는 HTML 문서 구조만 준비되면 실행된다. (외부 리소스, 스타일, 이미지 등 로드되지 않아도 실행)window.o..

(👂깃 커밋 메시지.. 그저 변경 사항에 대한 적절한 코멘트를 남기면 되는 것이 아니었는가?) 📍상황 : 외주 개발사와 협업을 시작하기에 앞서 공지 메일이 도착했다. ===================='아래와 같은 commit message convention 준수 부탁드립니다.' feat: 블라블라test: 블라블라==================== 메일의 요지는 깃 커밋 메시지를 규칙에 맞게 통일해서 작성해 달라는 것. 📍정리 : 서칭해보니 나오는 '깃 커밋 메시지 컨벤션'! 이게 무엇이란 말인가?? 똥멍청이 얼른! 구글, 쳇gpt에 물어보자! gpt의 설명 :-> '이 규칙을 지키면 코드 관리를 효율적으로 할 수 있으며, 팀 간 협업에 큰 도움이 됩니다.커밋 메시지를 잘 작성하면 다른 팀원..

pc, mobile 화면 크기에 따라 table 열의 너비가 다른 디자인을 마주했다. 내가 시도한 방법은 이렇다. 1. colgroup 을 'pc-only', 'mo-only' class를 사용해 'display: none', 'display: block' 처리를 한다. -> 문제점 : 웹 접근성에 걸린다. 테이블이 하나인데 col이 여러 개니까는..!2. col이나 th에 'nth-child' 선택자를 붙여 미디어 쿼리로 css를 처리한다. -> 문제점 : 코드가 길어져서 보기 싫어짐..!결국 내가 선택한 방법 : table에 고유 class를 붙이고(한 페이지에 테이블이 여러개가 있는 경우) col에 순서대로 번호를 붙여 col1~col5 class를 부여하고 @each 루프를 사용하여 코드 줄이기!..

CSS를 작성하다 보면 반복되는 구간이 보인다. 아래 같은 코드가 나를 신경 쓰이게 만들었다.&.esg-test-type1 { background-image: url(../../assets/images/esg/esg-test-type1.svg);}&.esg-test-type2 { background-image: url(../../assets/images/esg/esg-test-type2.svg);}&.esg-test-type3 { background-image: url(../../assets/images/esg/esg-test-type3.svg);}&.esg-test-type4 { background-image: url(../../assets/images/esg/esg-test-ty..

이미지를 스크립트로 삽입하는 상황에서alt값을 직접 작성하기 어려울 때 써먹기 좋은 간단 코드! (접근성을 위해 alt값은 필수로 작성해야 하므로)document.addEventListener('DOMContentLoaded', function () { var imgs = document.querySelectorAll('.section .figure .cover'); imgs.forEach(function(img) { img.addEventListener('load', function() { img.alt = "이미지 설명"; }); });}); 위 코드에 대한 GPT의 설명 : '이 코드는 이미지가 로드될 때마다 해당 이미지의 alt 속성을 ..