목록development/HTML | CSS | Vanilla JS (3)

우파루파의 개발 기록

[HTML] Image Lazy load가 무엇이고, 왜 필요할까

안녕하세요. 굉장히 오랜만에 글을 쓰는 것 같습니다. 대학교에 합격하게 돼서 눈코 뜰 새 없이 직대딩 생활을 하다가, 이제서야 1학기 종강을 해서 조금 여유가 생겼습니다. 최근에 회사에서 최적화 작업을 진행했었습니다. 완전히 각 잡고 최적화를 진행한 적이 거의 처음이라, 많은 내용을 알아보면서 진행했는데요. 전부터 Lazy image load는 '최적화를 한다면, 이 작업은 꼭 해야겠다' 싶었던 내용이었던지라 가볍게 다뤄볼게요. Image lazy load 이 작업은 말 그대로 이미지가 사용자 화면에 실질적으로 보이게 될 때 로드하는 기법을 말합니다. 기본적으로 웹 페이지는 로드와 동시에 포함된 이미지들도 함께 로드하게 됩니다. 사실 이건 단순히 생각해 봐도 좋지 않죠. 그나마 적을 땐 괜찮지만, 만약 ..
development/HTML | CSS | Vanilla JS 2022. 7. 5. 10:24
[HTML|CSS] Font format과 font-face 선언 및 적용법

이번 포스팅에서는 Font format의 종류와 font-face 선언 방법, 적용법을 알아봅시다. Font format의 종류 포맷과 종류별 특징 포맷 포맷별 특징 TrueType Fonts (TTF) - 가장 일반적인 글꼴 형식 - 대부분의 브라우저가 지원 OpenType Fonts (OTF) - TTF를 기반으로 제작된 글꼴 형식 - TTF와 비슷하지만, TTF에서 지원하지 않는 최신 기능을 사용 가능 The Web Open Font Format (WOFF) - OTF와 TTF로 이루어져 있는 압축된 글꼴 형식 - 압축되어 있어 가볍고 다운 받는 속도가 빠름 - W3C 권장 사항 The Web Open Font Format (WOFF 2.0) - WOFF보다 더 향상된 압축을 제공하는 글꼴 형식 S..
development/HTML | CSS | Vanilla JS 2021. 6. 23. 00:34
[HTML|CSS] Input type이 password일 때 입력한 password가 보이지 않는 이슈

이번 포스팅에서는 Input type이 password일 때 입력한 password가 보이지 않는 이슈에 대해서 짧게 다루어 보겠습니다. (본 글은 이전에 업로드 되었던 내용을 좀 더 보기좋게 다듬어 재 업로드 한 글입니다.) 원인 이 현상이 일어나는 환경에서 나눔스퀘어 폰트를 사용하고 있다면, 폰트가 문제의 원인일 수 있습니다. 혹은 나눔스퀘어가 아니더라도 아래에서 서술한 이유와 같은 이유일 수 있습니다. 이런 현상이 발생하는 이유 HTML에서는 input type을 password로 지정하면 입력한 내용은 위와 같이 나름 암호화 되어서 보여집니다. 그런데 문제는 나눔스퀘어에선 위의 기호(●)가 없어 제대로 표기되지 않는 것 입니다. 해결 방법 해결 방법은 단순합니다. 바로 input type이 pas..
development/HTML | CSS | Vanilla JS 2019. 8. 20. 17:04
이전 Prev 1 Next 다음