성장가능성 200% 프론트엔드의 Dev 다이어리

5월에 했던 1on1에 이어서 진행한 6월의 1on1 기록 꼼꼼함을 갖추기 위해 1) 퍼블리싱 진행현황을 정리하는 습관 들이기 2) 자바스크립트력 키우기 이 두 가지 목표를 세웠었는데, 1번을 위해 구글링을 통해 다른 분들의 현황표를 참고하여 엑셀표를 만들어보았다. 좀 더 근사하게 하고 싶었으나 당시 너무 바빠서 엑셀까지 완벽하게 예쁘게 만들 수는 없었으나, 누구를 보여주기 위함이 아닌, 본인 작업 기록용으로 깨작깨작 사용중이었는데 갑자기 외근 업무가 연달아 잡히기도 하고, 심지어 교통사고로 거의 일주일간 업무를 차장님께 토스하게 되었다ㄷㄷ 이때 이 엑셀이 예상치 못하게 좋은 역할을 해주었다..! 작업 중이던 페이지와 완료된 페이지, 수정이 마저 필요한 페이지 등을 표기해 두었기 때문에 차장님이 엑셀을 ..

2023년 올해부터는 차장님과 한 달에 한 번씩(또는 두 번씩) 1on1을 진행하게 되었다. 작년 회사에 원온원이 시행되고 어떤 얘기들을 할까 항상 고민이 들어 다른 회사의 예시를 찾아보기도 했던 기억과 함께, 더 좋은 방향으로 조금이라도 나아갈 수 있으면 하는 바램으로 원온원 기록을 적어본다. (물론 너무 개인적인 이야기는 이 기록에서 빼기로 함) 1on1이란? (원온원, 1대 1 미팅). 매니저와 멤버가 주기적으로 1대 1로 만나 30분 이상의 대화를 나누는 것을 말한다. 그렇지만 미팅이라고 해서 꼭 일 얘기만을 하지 않아도 되고 주제 선정도 자유롭다. 그리고 그 원온원의 주제는 꼭 본인이 준비해야한다는 나름의 규칙도 있다. 1회차의 원온원은 스스로 더욱 성장할 수 있으면 좋겠다는 마음이 들어, 올해..

퍼블리싱을 하다보면 폼 요소에 각각 컬러를 지정하는게 너무 귀찮았는데, accent-color를 사용하면 폼 요소의 디자인 UI의 컬러를 한꺼번에 지정할 수 있어서 편리하다. 그치만 모든 폼 양식에 적용되는 것은 아니고 폼 양식 중, 에 적용할 수 있다. 체크1 체크2 체크3 라디오1 라디오2 레인지 진행률 @charset "utf-8"; :root { --form-color: pink; } input[type='checkbox'], input[type='radio'], input[type='range'], progress { accent-color: var(--form-color); }이처럼 메인 컬러로 pink를 사용하기로 하여, :root에 핑크 컬러를 변수로 선언해 두었다. 혹여나 프로젝트 중 메..

인강을 듣다가 알게 된 small 태그 기록용으로 남겨본다. small 태그란? 이전에는 단순히 기존 텍스트보다 작은 글씨로 표기되는 용도였으나, HTML5에서부터는 저작권이나 연락처, 법률 등을 표시할 때 사용되기 시작했습니다. FAQ with faded secondary text No FAQ Title Category Date Hit 1 FAQ 제목 들어가는 자리 이용안내 2023.01.01 84 실제로 적용해보았을 때 css에도 자동으로 font-size:smaller; 이 적용됨을 확인할 수 있습니다.

퍼블리싱을 마치고 접근성 관련 회사 동료에게 피드백을 받았다. 피드백 중 iOS에서 숫자는 자동으로 전화번호로 인식하여 숫자를 눌렀을 때 전화가 걸리도록 설정되어 있으니, 의도한 것인지 아닌지를 물어보셨다. 의도한 것은 아니었기 때문에 순간 이러한 기능을 삭제하려면 어떻게 해야하나 고민했는데, 메타 태그에 한줄만 추가하면 된다는 얘기에 구글링 해보았다. 1. 전화번호 자동 링크 없앨 경우 2. 전화, 주소, 이메일 자동 링크 없앨 경우 경우에 따라 head에 meta 태그를 추가해 주면 된다! EZ~

이미지 파일은 해당 파일 정보를 메타 데이터(meta data)에 포함해 저장한다. 여기서 메타데이터란 어떤 카메라로 촬영했는지, 해상도가 무엇인지 등이 메타 데이터의 대표적인 내용이다. 메타 데이터는 사람의 눈에 실제 이미지로써 보이지 않으므로, 불필요한 부분을 제거하면 크기를 상당히 줄일 수 있다고 한다. tiny png의 온라인 서비스를 이용하면 손실 압축 방식으로 이미지 파일을 압축할 수 있다. https://tinypng.com/ TinyPNG – Compress WebP, PNG and JPEG images intelligently Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG imag..