Develop/Web (24) 썸네일형 리스트형 CSS 'ic' 단위 살펴보기 CSS에는 숫자( 자료형)에 단위를 붙인 '치수' 자료형()이 있다. 여기에는 (거리), (각도), (시간), (주파수), (해상도) 등이 있다. 본 글에서는 자료형의 단위 중 하나인 ic에 대해 알아본다. ic 단위란? ic는 'ideograph count'(표의문자 수)의 뜻을 가진, CJK 문자의 일반적인 진행 단위다. 조금더 정확히는, 水(U+6C34) 글리프를 렌더링 할 때 사용되는 폰트에서 해당 글리프의 진행 단위를 나타낸다. 여기서 글리프의 '진행 단위'란, 요소의 인라인 축에 따른 너비나 높이다. 일반적으로는 글리프의 너비라고 생각하면 된다. caniuse.com에 따르면, IE와 Samsung Internet을 제외한 모던 브라우저에서 대부분 지원된다. Opera도 최신 버전(92)부터 .. OKLCH란? 웹 기술이 발전함에 따라 CSS를 이용한 색 표현 기술 또한 발전하고 있다. 이제 정적인 색 하나를 표현하는 것을 넘어, 색을 재사용하거나 변화를 주는 등, 더 동적으로 사용하고 있다. 그리고 sRGB를 넘어 DCI-P3 색영역을 지원하는 모니터가 출시하고 있어, 더 다양한 색을 지정할 필요 또한 생겼다. Lab & LCH Lab는 CIE XYZ(또는 CIE 1931 XYZ로, CIE RGB 색 공간을 선형변환하여 만들어짐)를 비선형 변환하여 만들어진 색 공간으로, XYZ 색 공간보다 균일한 색 체계를 목표로 한다. 여기서 '균일'하다는 것은, 색 공간에서 같은 거리만큼 떨어진 색채는 인간의 눈에 같은 크기만큼의 색 차이로 인지되는 것을 뜻한다. 이를 위해 휘도(밝기)를 L축으로 독립하고, 두 축 a, .. [Web] Top Layer Top Layer(최상위 레이어)는 엘리먼트의 순서있는 집합으로, 브라우저 뷰포트에서 관련 document 위에 존재한다. 각 document는 하나의 연관된 최상위 레이어를 갖는다. 최상위 레이어의 요소는 z-index나 DOM 계층에 대해 걱정할 필요가 없다. 또한, 해당 요소들은 ::backdrop 의사-엘리먼트를 갖는다. 최상위 레이어의 요소는 그 집합에 나타나는 순서대로 쌓인다. 가장 마지막으로 나타난 항목이 맨 위에 나타난다. 즉, 최상위 레이어 내 요소 간 z-index는 의미가 없다. 따라서 요소의 순서를 변경하려면 삭제 후 다시 추가해야 한다. ::backdrop은 그것과 관련된 요소의 바로 밑에 그려진다. 즉, 이전의 요소들보다는 위에 그려진다. 최상위 레이어가 없었을 때는, 맨 마지막.. Pop Up API Open UI의 목표는 개발자가 더 쉽게 훌륭한 사용자 경험을 만들도록 하는 것이다. 이를 위해, 구글은 개발자들이 직면하는 문제가 되는 패턴을 해결하려고 노력하고 있다. 개요 팝업은 그 목적과 효과가 뚜렷하여 많이 사용된다. 그러나 이를 개발하는 것은 마냥 쉬운 일이 아니며, 다음 사항들 때문에 간혹 골치 아픈 일이 생기기도 한다. 팝업 위치: 팝업은 다른 모든 요소보다 위에 노출될 것으로 기대된다. 하지만, CSS를 제대로 지정하지 않은 몇몇 웹사이트에서는 팝업이 사이드바 아래로 위치하곤 한다. 접근성: 키보드 등으로 팝업 요소에 접근하기 쉬워야 하지만, 종종 이를 놓치곤 한다. 숨김/표시 로직: 팝업을 표시하거나 숨기는 로직, 여러 개의 팝업을 표시하는 로직 등 고려해야 할 것이 많다. Pop Up.. 닷홈 무료 웹호스팅 닷홈에서는 무료 웹호스팅 서비스를 제공한다. 트래픽이나 저장공간의 제약이 크지만, 기간은 사실상 무제한(3개월마다 연장)이다. 지난 10년 동안 여러 용도로 요긴하게 써왔고, 내가 웹개발자가 되는데 정말 많은 도움이 되었다. 솔직히 개발을 처음 시작하면서 웹개발에 입문하는 분들에게 무료 웹호스팅은 아주 괜찮은 선택지라고 생각한다. 나도 아무것도 모르던 학생 때부터 쉽게 썼으니 말이다. :) 하지만 아쉽게도 이제는 더 이상 쓸 일이 없이 연장만 하고 있는 것 같아 결국 삭제하기로 했다. ㅠㅠ 그동안 잘 썼어요, 닷홈~ 다음에는 유료 서비스로 만나요 :) JS 값 복사하기 (Deep Copy) 자바스크립트에서 객체를 복사하는 방법은 여러가지가 있다. 얕은 복사 얕은 복사는 동일 객체를 참조하도록 한다. 객체는 메모리에 하나만 존재하고, 이를 가리키는 포인터가 추가되는 것이다. const obj1 = { a: 1, b: { c: 2, d: 3, }, }; const obj2 = obj1; obj2.a = 4; obj2.b.c = 5; console.log(obj1.a); // 4 console.log(obj1.b.c); // 5 따라서 원본, 복사본 구분 없이 어느 것을 수정하더라도 당연히 모든 것이 수정되는 셈이다. 깊은 복사 메모리 상에 객체를 하나 더 생성하는 것이다. 따라서 원본과 복사본이 구별되며, 하나를 수정해도 다른 하나는 당연히 그대로 보존된다. 깊은 복사는 흔히 JSON.pars.. [Node.js] Gmail API 이용해서 메일 보내기 Gmail API 사용 활성화 및 사용자 인증 정보 생성 GCP 프로젝트를 생선한 후, 왼쪽 사이드바에서 [API 및 서비스] - [라이브러리]에 진입한다. gmail을 검색해서 들어간 후에 [사용] 버튼을 클릭한다. (이미 사용중인 경우 [관리] 버튼으로 대체되어 있다.) 조금 기다린 후 [사용]이 [관리] 버튼으로 변경되면(안 되면 페이지를 새로고침 해보자), 버튼을 눌러 관리 페이지로 진입한다. 위의 [+ 사용자 인증 정보 만들기] 버튼을 누르고 [OAuth 클라이언트 ID 만들기]를 선택한다. 맨 처음 사용자 인증 정보를 만드는 경우, OAuth 동의 화면을 먼저 작성해야 할 수 있다. (이미 작성한 경우 생략) OAuth 동의 화면은 안내에 따라 간단히 생성할 수 있다. 앱을 게시할 필요는 없다.. 웹페이지 로드 최적화 - Layout Shift 줄이기 처음에는 블로그에 남길 생각이 없었는데, 하다보니 꽤나 중요하다고 생각해서 간단하게나마 기록하려고 한다. 웹사이트의 첫 페이지의 로드는 사용자경험과 이탈율에 꽤 큰 영향을 줄 것이라 생각한다. 최근 UOSTime을 개선하면서 최적화에도 관심이 생기고 있는데, 오늘은 웹페이지 로드를 최적화했다. UOSTime의 첫 페이지는 로그인페이지다. (자동로그인 사용자 제외) 이 페이지는 로그인 폼과 푸터, 모달들로만 이루어졌지만, 이미지나 폰트의 뒤늦은 로드 때문에 Layout Shift가 여러 번 발생했다. 더 빠르고 효율적인 렌더를 위해, 화면이 한 번에 짠! 하고 나타날 필요가 있었다. 기존 로그인 페이지의 로드 과정이다. 로드 중간에 Experience(빨간 박스)로 표시되는 부분이 Layout Shift다.. 이전 1 2 3 다음
