인터렉티브 모션과 자바스크립트를 공부하고 있는 웹 퍼블리셔에요 :-9

etc.

프롤로그 지난 글에서는 JPEG의 특징에 대해 살펴보았으니, 이번엔 PNG에 대해 알아봅니다! 이 시리즈의 이전 글: JPEG vs. PNG: 적절한 이미지 포맷 선택하기 (1) - JPEG편 PNG를 소개합니다 PNG 역시 웹에서 널리 사용되는 이미지 포맷 중 하나입니다. JPEG와 마찬가지로 픽셀로 이루어진 비트맵 그래픽이기도 하고요. 이름은 Portable Network Graphics의 약자로, 말그대로 ‘인터넷’에서 표현될 이미지를 염두에 두고 개..

2021.01.27

etc.

프롤로그 이미지 저장할 때 이런 고민한 적 없으신가요? 🤔🤔 이미지는 웹페이지에서 많은 부분을 차지하는 리소스입니다. 따라서 용량이 적을 수록 당연히 좋죠. 그래서 이미지를 표시할 때 적절한 포맷을 택하는 것이 여러모로 중요합니다. 웹에서 사용하는 주 이미지 포맷은 JPEG와 PNG일 텐데, 그럼 둘 중에 뭘로 저장하는 게 좋을까요? 저는 기존까지 이렇게 알고 있었는데요, JPEG → 복잡한 이미지나 사진
 PNG → 단..

2021.01.23

Work

?! 헉 잠깐 사이에 1월이 벌써 절반이 지났다니 ?! 살짝 늦긴 했지만 그래도 기록을 위해 남기는 2020 회고...!! 한 살을 더 먹었다는 게 아직도 납득(??)이 안 되지만 새 출발을 위해 기록을 남겨봅니다 ;) 프롤로그 2020년은 다사다난, 이 네 글자가 아주 찰떡인 해였다. 이것저것 신나게 세웠던 계획들이... 물 건너 산 건너 멀리멀리 가버렸으니까... ☠️ 아니 그전에 일단 다니던 회사가 망했는데요 😹 갑자기 듣도보도..

2021.01.16

etc.

티스토리 스타일의 반응형 스킨. 포스트에 집중할 수 있는 심플한 스타일입니다 ;) * 크롬 브라우저 기반이며 IE에 대응하지 않습니다. * 공지사항, 위치 로그 등 일부 페이지는 지원하지 않습니다. 미리보기 현재(2021.1) 이 블로그에서 사용 중인 스킨입니다. 스킨 적용하기 1. 스킨을 다운로드 받은 뒤 압축을 해제합니다. 2. 티스토리에 접속 후, 로그인 - 블로그 관리 - 스킨 변경으로 이동합니다. 3. 새로운 스킨을 적..

2021.01.13

CSS

프롤로그 왜 제목이 저러냐면요... 얼마 전까지 ‘더보기’ 버튼이 생각과는 다르게 동작한 적이 있‘었’습니다. 위와 같이 더보기 버튼을 클릭하면 그 위로 아이템을 추가하는 형식의 UI였는데, 이상하게 버튼이 고정된 채로 버튼 위에서 새로운 아이템이 추가됐었거든요. 기획: "더보기 버튼을 누르면 추가 영역이 아래에 펼쳐지는 게 아니라 위로 올라가는 느낌이 들어요." 디자인: "그러게요. 버튼은 고정이고 내용이 위..

2020.11.22

CSS

프롤로그 지난 글에는 반응형을 위해 필요한 뷰포트 메타태그와 미디어 쿼리에 대해 다뤘었는데, 이번에는 CSS 속성을 통해 좀 더 편하고 쉽게 반응형을 만드는 방법을 알아보려고 합니다 🤟 히어뤼고! 이 시리즈의 이전 글: 반응형 웹 뚝딱 만들기 (1) 1. vw / vh CSS 작업을 할 때 주로 사용하는 단위는? 픽셀(px)이요! 하지만 고정 단위인 px 대신 유동 단위인 %를 사용하면 좀 더 유연한 코드를 만들 수 있어요. 예를 들어..

2020.08.23

CSS

이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 프롤로그 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 찾아볼 수 있습니다. 빠트릴 수 없는 기술이 된 만큼, 오늘은 반응형을 만들기 위한 몇 가지 방법들을 정리해봤습니다 🤘 이 글에서는 반응형을 위한 기본인 뷰포트와 미디어 쿼리를 다루며, 다음 글에서는 CSS 속성을 활용해 빠..

2020.08.12

CSS

프롤로그 컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있습니다. 사용자가 이미지를 등록하는 경우 또는 마케팅 팀이 아무 이미지나 넣는 경우 이미지가 무너지지 않게 조절할 필요가 있죠. 이번에 object-fit 이란 속성을 알게 되면서, 이미지를 컨테이너 안에서 정렬하는 3가지 방법을 정리해봤습니다 🙋‍♀️ 1. object-fit 나 같은 오브젝트의 사이즈를 컨테이너의 크기..

2020.07.18

etc.

Critical Rendering Path 지난 글에서 웹 브라우저가 어떻게 일하는지 간략하게 알아보았습니다. 구글에서는 이를 Critical Rendering Path(CRP, 주요 렌더링 경로)라고 부르며, 이를 최적화하는 방법에 대한 강의와 문서도 있습니다. 사이트 최적화를 하는 방법 중 하나는 이 CRP를 간결하게 하는 것입니다. HTML 다운로드 Hello, world 우리가 웹 사이트에 접속하면 브라우저는 우선 서버에 페이지를 요청합니다. 이후 html에..

2020.06.12