웹 (24)
Paper Block - 이야기가 있는 공간
CSS로 텍스트 라인수를 제한하는 방법
웹에서 어떤 글의 목록의 제목, 혹은 본문 요약 부분 등은 일정 줄 수 이상에 대해서는 "..."로 표시되는 경우를 많이 보셨을 것입니다. 아무래도 제목이나 본문 요약 등은 길이가 동일한 것이 디자인 측면에서 좋겠죠? 이러한 텍스트 라인수의 조절은 여러 가지 방법이 있겠습니다만, 간단하게는 CSS를 통해서 해당 기능을 구현할 수 있습니다. 이번 글에서는 CSS로 라인수를 제한하는 방법에 대해서 알아보도록 하겠습니다. 목차 1. 한 줄로 제한하기 (white-space) 가장 흔하게 볼 수 있는 경우가 제목을 한 줄로 제한하는 경우입니다. 아래는 네이버 뉴스 홈에서 가져온 화면인데요, 우측에 기사의 타이틀 부분이 "..."으로 표시되어 있는 것을 확인할 수 있습니다. 위와 같은 효과는 아래와 같은 단계를 ..
CSS로 다크모드 구현: prefers-color-scheme
요즘 운영체제들은 대부분 라이트 모드/다크 모드를 지원합니다. 애플이 공식 지원을 시작한 후 윈도우 10, 안드로이드, iOS 할 것 없이 많은 운영체제에서 지원하고 있는데요, 점점 많은 애플리케이션과 웹사이트가 운영 체제의 다크 모드에서 어울리는 어두운 계열의 스타일을 추가로 만들고 있습니다. 사용자 입장에서야 좋겠지만 개발자는 괴롭습니다. 앱이든 웹이든... 하나, 둘 슬금슬금 다크 모드의 디자인을 별도로 제공하기 시작했죠. 별로 하고 싶지 않지만... 상대적으로 구닥다리로 비칠 것 같은 불안감이 엄습합니다. 그나마 불행중 다행으로 CSS에서 운영체제의 모드에 따라서 쉽게(?) 라이트, 다크 모드에 따른 디자인을 구현할 수 있는 미디어 쿼리가 추가되었습니다. 바로 "prefers-color-schem..
[JS] console.time(), console.timeEnd()로 작업 시간을 측정하는 방법
개발을 하다 보면 어떤 작업에 소요되는 시간을 측정해야 할 경우가 있습니다. 특정 부분 함수의 속도를 최적화한다거나, 아니면 과제 보고서 등을 작성할 때 어떤 작업의 개선 효과 등을 기록하기 위해서 필요한 경우가 있습니다. 개선이 된 것처럼 보여야 하니까 일단 뭐라도 나와야... Date() 함수를 이용하여 시간차를 구해도 되지만, 그보다는 console의 메서드로 제공되는 console.time()과 console.timeEnd()를 이용하는 것이 더 간편합니다. 이번 글에서는 console의 time()을 이용하여 작업 시간을 측정하는 방법에 대해서 알아보겠습니다. 1. console.time() / console.timeEnd() 주어진 이름의 타이머를 실행/종료합니다. 하나의 페이지에서는 최대 1..
CSS로 PC와 Mobile을 구분하는 방법 - Interaction Media Features
언제부턴가 "반응형 웹"이 대세가 되면서, 사용자의 디바이스에 따라서 웹 화면을 적절하게 구성하는 것이 필수 요소가 되었습니다. 일반적으로, 브라우저 창의 크기를 기반으로 디자인을 다르게 설정하는 방식을 많이 사용하고 있죠? 이 사이즈를 기준으로 PC 혹은 Mobile을 얼추 구분하기도 합니다. 대부분의 경우 창 크기에 따라서만 조절해도 큰 문제는 없습니다만, 가끔은 사용자의 디바이스가 PC인지 모바일인지 구분하고 싶은 경우도 있습니다. 예를 들어서 다음과 같은 경우를 생각해 볼까요? Hover시에 이미지 위에 text를 overlay 하는 경우 Hover를 하는 경우에만 나타나는 버튼 요소 위와 같은 경우에는 hover 동작은 마우스를 이용하는 PC에서 정상적으로 확인할 수 있으나, 터치스크린을 사용하..
CSS를 이용하여 앵커 클릭시 부드러운 스크롤을 구현하는 방법
페이지 내에서 앵커 링크 사이를 이동하는 경우, 부드러운 효과를 위해서 스크롤 기능을 넣곤 합니다. jQuery를 이용하거나 javaScript로 구현하던지... 그런데, 사실 가능하다면 "개발자의 편의"를 위해서 native 한 기능으로 들어가는 게 가장 좋습니다. 핵심 기술이 아닌 animation 류의 효과를 위해서 직접 뭔가를 해주는 건 사실 좀 피곤한 일이거든요. 대부분의 경우 라이브러리가 있긴 하지만, 라이브러리가 자꾸 섞이는 것도 좀 그렇죠? 이번 글에서는 별다른 설정 없이 CSS로만 앵커 링크 사이를 부드럽게 이동하는 방법에 대해서 살펴보겠습니다. 1. 기존 방식 기존에는 jQuery를 이용하여, 특정 엘리먼트의 상단으로부터의 offset을 구하고 animation을 통하여 구현하는 방법이..
[ES10] FLAT, FLATMAP
기존에는 중첩된 배열을 펴주기 (flatten) 위해서 여러 가지 방법(reduce, concat, spread operator 등)을 사용하곤 했습니다. 또는 Underscore(Lodash)의 flatten이나 flattendep을 사용했었죠. 그런데 ES10(ES2019)에 들어서 Native JavaScript 자체적으로 flat 기능을 포함하기 시작했습니다. ES10이라고는 하지만 대부분의 브라우저에서도 지원을 하는 것 같습니다. 이번 글에서는 ES10에 추가된 두 개의 flat 관련 메소드인 flat과 flatMap에 대해서 살펴보도록 하겠습니다. 1. Array.prototype.flat() flat() 메소드는 중첩된 구조의 배열 요소를 지정한 깊이까지 평탄화한 새로운 배열을 생성합니다. ..
[앵귤러] SPA (Single Page Application)에 대한 고찰
프런트엔트 라이브러리를 공부하다 보면 "단일 페이지 애플리케이션 (SPA)"이라는 용어가 자주 등장합니다. 이번 글에서는 앵귤러 및 기타 프론트엔드 라이브러리 또는 프레임워크에서 자주 등장하는 SPA(Single Page Application)의 개념과 특징들에 대해서 알아보도록 하겠습니다. 1. Single Page Application (SPA)의 의미 가장 기본적인 의미에만 충실하게 해석한다면, SPA(Singple Page Application, 단일 페이지 애플리케이션)는 말 그대로 하나의 페이지로 구성된 애플리케이션입니다. 사용자가 요청한 각각의 페이지를 서버가 생성해서 전달해주는 것이 아니라, 클라이언트가 동적으로 페이지를 다시 작성하는 방식이죠. 첫 페이지 요청시 단 한 번만 리소스(HTM..
[ES6] Spread Operator (스프레드 연산자)
ES6에서는 '...'와 같이 다소 특이한 형태의 문법이 추가되었습니다. 점 3개가 연달아 붙어있는 이 표시는 Spread Opertor(스프레드 오퍼레이터, 스프레드 연산자, 전개 구문, 펼침 연산자...)를 나타내는 것으로, 배열, 함수, 객체 등을 다루는 데 있어서 매우 편리하고 재미(?) 있는 새로운 기능을 제공합니다. 이번 글에서는 스프레드 연산자에 대해서 살펴보도록 하겠습니다. Spread Operator 기본 문법 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다. 사실 말로 표현하면 의미적으로는 크게 와 닿지 않죠? 저도 말하면서 저게 맞는 말인지 고민이 됩니다. 우선 기본적인 표현법을 살펴보면서 감을 잡..