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

이미지 파일은 해당 파일 정보를 메타 데이터(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..

컨설팅 진단 업무를 하던 중 여느때와 다름없이 validator를 돌리다가 갑자기 생소하게 느껴져 포스팅 각을 외치며 티스토리에 들어왔다 바로 버튼 태그 안에 div 태그를 쓸 수 없다는 것..! 그도 그럴것이 버튼 태그는 인라인 태그다... 뭔가 너무 익숙해져서 인라인 태그라는 사실 자체를 잊어버렸던 것 인라인 태그 안에는 블록 태그를 넣을 수 없다 는 아주 기초적인 사실을 말이다. 그래서 다시 한 번 정리해보는 인라인태그와 블록태그 Inline 태그 Block 태그 a, abbr, b, br, button, code, em, i, img, input, label, map, object, q, script, select, span, sub, sup, textarea, var ... address, ar..

차장님으로부터 로컬에서 퍼블리싱 작업중인 주소를 공유를 부탁받았는데, 처음이라 어떻게 드리는거지? 싶었던..ㅎ [대화 내용 일부 발췌] 나 : http://127.0.0.1:5500/html/index.html 이렇게 드리면 될까요? 파일도 같이 드릴까요? 차 : window > cmd > ipconfig IPv4 주소 좀 알려주세요. 나 : (캡쳐해서 알려드림) 차 : 사무실 내부에서 공유할 때는 (찾았던 내 IPv4주소):5500/html/index.html 이렇게 공유하면 됩니다. 127.0.0.1은 나중에 시간될 때 한 번 찾아보세요. 오... 그래서 찾아보는 127.0.0.1 Localhost localhost(로컬호스트)는 컴퓨터 네트워크에서 사용하는 루프백 호스트명으로, 자신의 컴퓨터를 의미..

input[type="number"]을 사용하면 아래 이미지처럼 마우스 오버 시 오른편에 증감 화살표 버튼이 저절로 생긴다. 요즘에는 이런 기본 버튼을 사용하는걸 사실 본 적이 없다. 필요하다면 본인들의 디자인 컨셉에 맞추어서 버튼까지 커스텀하는 게 대부분인 것 같다. 각설하고, 바로 없애보자. /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance:none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance:textfield; } 위의 css를 적용하면 아래 이미지처럼 화살표가 ..

요즘 웹 성능 개선 관련된 책을 읽기 시작했는데 책 초반에 google PageSpeed 사이트에서 웹 성능을 검출해 주는 서비스를 제공하고 있다는 사실을 알게 되었다. https://pagespeed.web.dev/ PageSpeed Insights 올바른 URL을 입력하세요. pagespeed.web.dev 궁금한 마음에 이전에 퍼블리싱했던 사이트 주소를 넣어보니 모바일에서 성능이 좋지 않게 나와ㅠㅠ 신경 쓰여 아래 추천 개선 사항들을 살펴보았다. 꽤나 진단 결과 및 추천 개선사항이 상세히 나와서 놀랐고 살펴보다가 알게 된 새로운 CSS 속성 font-display:swap! 구글 pageSpeed에서 제공하고 있는 설명을 가져와 보았다. 1. 보이지 않는 글꼴을 표시하는 방법 글꼴은 로드하는 데 시..