Develop (58) 썸네일형 리스트형 CSS 'ic' 단위 살펴보기 CSS에는 숫자( 자료형)에 단위를 붙인 '치수' 자료형()이 있다. 여기에는 (거리), (각도), (시간), (주파수), (해상도) 등이 있다. 본 글에서는 자료형의 단위 중 하나인 ic에 대해 알아본다. ic 단위란? ic는 'ideograph count'(표의문자 수)의 뜻을 가진, CJK 문자의 일반적인 진행 단위다. 조금더 정확히는, 水(U+6C34) 글리프를 렌더링 할 때 사용되는 폰트에서 해당 글리프의 진행 단위를 나타낸다. 여기서 글리프의 '진행 단위'란, 요소의 인라인 축에 따른 너비나 높이다. 일반적으로는 글리프의 너비라고 생각하면 된다. caniuse.com에 따르면, IE와 Samsung Internet을 제외한 모던 브라우저에서 대부분 지원된다. Opera도 최신 버전(92)부터 .. Typescript 4.9 2022년 11월, Typescript 4.9 RC(Release Candidate)가 발표되었다. RC이므로 정식 릴리즈 전까지 중요한 버그 수정 외 변경사항은 없을 예정이다. 이번 v4.9가 담은 변경사항을 알아보자. satisfies 기존에는 다음과 같이 코드를 작성할 수 없었다. type DataType = Record; const data: DataType = { name: 'John', age: 30, }; const upperCasedName = data.name.toUpperCase(); // error const nextAge = data.age + 1; // error console.log(upperCasedName, nextAge); data.name, data.age가 각각 stri.. OKLCH란? 웹 기술이 발전함에 따라 CSS를 이용한 색 표현 기술 또한 발전하고 있다. 이제 정적인 색 하나를 표현하는 것을 넘어, 색을 재사용하거나 변화를 주는 등, 더 동적으로 사용하고 있다. 그리고 sRGB를 넘어 DCI-P3 색영역을 지원하는 모니터가 출시하고 있어, 더 다양한 색을 지정할 필요 또한 생겼다. Lab & LCH Lab는 CIE XYZ(또는 CIE 1931 XYZ로, CIE RGB 색 공간을 선형변환하여 만들어짐)를 비선형 변환하여 만들어진 색 공간으로, XYZ 색 공간보다 균일한 색 체계를 목표로 한다. 여기서 '균일'하다는 것은, 색 공간에서 같은 거리만큼 떨어진 색채는 인간의 눈에 같은 크기만큼의 색 차이로 인지되는 것을 뜻한다. 이를 위해 휘도(밝기)를 L축으로 독립하고, 두 축 a, .. NPM은 사실 Node Package Manager의 약어가 아니다. npm은 흔히 Node Package Manager의 약어로 알려져있지만 실제로는 그렇지 않다. 사실 npm은 npm is not a acronym(직역: npm은 약어가 아니다)에 대한 재귀 약어다. PHP가 PHP: Hypertext Preprocessor의 재귀 약어인 것과 같다. 그렇지만 Node Package Manager가 아주 틀린 말은 아니다. npm의 첫 커밋에서 README.md의 제목은 npm - The Node Package Manager였다. 다만 약 5년 뒤 JavaScript Package Manager로 변경되었을 뿐이다. 한편, npm의 전신은 pm(pkgmakeinst의 약어)이라는 bash 유틸리티였다. [Web] Top Layer Top Layer(최상위 레이어)는 엘리먼트의 순서있는 집합으로, 브라우저 뷰포트에서 관련 document 위에 존재한다. 각 document는 하나의 연관된 최상위 레이어를 갖는다. 최상위 레이어의 요소는 z-index나 DOM 계층에 대해 걱정할 필요가 없다. 또한, 해당 요소들은 ::backdrop 의사-엘리먼트를 갖는다. 최상위 레이어의 요소는 그 집합에 나타나는 순서대로 쌓인다. 가장 마지막으로 나타난 항목이 맨 위에 나타난다. 즉, 최상위 레이어 내 요소 간 z-index는 의미가 없다. 따라서 요소의 순서를 변경하려면 삭제 후 다시 추가해야 한다. ::backdrop은 그것과 관련된 요소의 바로 밑에 그려진다. 즉, 이전의 요소들보다는 위에 그려진다. 최상위 레이어가 없었을 때는, 맨 마지막.. Pop Up API Open UI의 목표는 개발자가 더 쉽게 훌륭한 사용자 경험을 만들도록 하는 것이다. 이를 위해, 구글은 개발자들이 직면하는 문제가 되는 패턴을 해결하려고 노력하고 있다. 개요 팝업은 그 목적과 효과가 뚜렷하여 많이 사용된다. 그러나 이를 개발하는 것은 마냥 쉬운 일이 아니며, 다음 사항들 때문에 간혹 골치 아픈 일이 생기기도 한다. 팝업 위치: 팝업은 다른 모든 요소보다 위에 노출될 것으로 기대된다. 하지만, CSS를 제대로 지정하지 않은 몇몇 웹사이트에서는 팝업이 사이드바 아래로 위치하곤 한다. 접근성: 키보드 등으로 팝업 요소에 접근하기 쉬워야 하지만, 종종 이를 놓치곤 한다. 숨김/표시 로직: 팝업을 표시하거나 숨기는 로직, 여러 개의 팝업을 표시하는 로직 등 고려해야 할 것이 많다. Pop Up.. ECMAScript Proper Tail Calls (PTC) 적절한 꼬리 호출이라고 번역하는 것이 옳을까? 일반적으로 재귀호출은 콜스택을 쌓아올리지만, 여러 프로그래밍 언어는 꼬리 재귀 호출(영문/국문 위키피디아 참고)의 최적화를 지원한다. ECMAScript(자바스크립트는 이것의 명세를 따름) 6은 이와 비슷하지만 다른 'PTC(Proper Tail Calls)'를 지원한다. 현재 사파리(웹킷) 또는 harmony 플래그가 있는 Node.js(7, 8)에서만 PTC를 지원한다. 하지만 Node.js 18(PTC 미지원) 환경에서 직접 테스트한 결과, 꼬리 재귀 호출 최적화가 가능한 코드가 그렇지 않은 것에 비해 성능이 약간 더 우수한 것으로 나타나 다른 유형의 꼬리 재귀 최적화가 존재하지 않을까 생각한다. PTC는 (재귀)호출되는 함수가 호출하는 함수의 콜스택 .. 재귀 호출 없는 하노이타워 일반적으로 하노이 타워 코드는 재귀호출을 설명하기 위한 예시로 많이 사용된다. 하지만 재귀와 반복은 상호 대체 가능하므로, 하노이 타워를 재귀 호출 없이 반복문을 이용해 작성해보자. 비교를 위해 재귀 호출을 이용한 코드도 함께 작성했다. #include #include #include using namespace std; struct CallStackElement { int n; char from; char to; char aux; bool print; }; void print_move(int n, char from, char to) { cout 이전 1 2 3 4 ··· 8 다음
