웹/HTML, CSS (4)

Paper Block - 이야기가 있는 공간

CSS로 텍스트 라인수를 제한하는 방법

웹/HTML, CSS 2021. 12. 8. 13:43

웹에서 어떤 글의 목록의 제목, 혹은 본문 요약 부분 등은 일정 줄 수 이상에 대해서는 "..."로 표시되는 경우를 많이 보셨을 것입니다. 아무래도 제목이나 본문 요약 등은 길이가 동일한 것이 디자인 측면에서 좋겠죠? 이러한 텍스트 라인수의 조절은 여러 가지 방법이 있겠습니다만, 간단하게는 CSS를 통해서 해당 기능을 구현할 수 있습니다. 이번 글에서는 CSS로 라인수를 제한하는 방법에 대해서 알아보도록 하겠습니다. 목차 1. 한 줄로 제한하기 (white-space) 가장 흔하게 볼 수 있는 경우가 제목을 한 줄로 제한하는 경우입니다. 아래는 네이버 뉴스 홈에서 가져온 화면인데요, 우측에 기사의 타이틀 부분이 "..."으로 표시되어 있는 것을 확인할 수 있습니다. 위와 같은 효과는 아래와 같은 단계를 ..

CSS로 다크모드 구현: prefers-color-scheme

웹/HTML, CSS 2021. 9. 24. 00:47

요즘 운영체제들은 대부분 라이트 모드/다크 모드를 지원합니다. 애플이 공식 지원을 시작한 후 윈도우 10, 안드로이드, iOS 할 것 없이 많은 운영체제에서 지원하고 있는데요, 점점 많은 애플리케이션과 웹사이트가 운영 체제의 다크 모드에서 어울리는 어두운 계열의 스타일을 추가로 만들고 있습니다. 사용자 입장에서야 좋겠지만 개발자는 괴롭습니다. 앱이든 웹이든... 하나, 둘 슬금슬금 다크 모드의 디자인을 별도로 제공하기 시작했죠. 별로 하고 싶지 않지만... 상대적으로 구닥다리로 비칠 것 같은 불안감이 엄습합니다. 그나마 불행중 다행으로 CSS에서 운영체제의 모드에 따라서 쉽게(?) 라이트, 다크 모드에 따른 디자인을 구현할 수 있는 미디어 쿼리가 추가되었습니다. 바로 "prefers-color-schem..

CSS로 PC와 Mobile을 구분하는 방법 - Interaction Media Features

웹/HTML, CSS 2020. 12. 28. 17:57

언제부턴가 "반응형 웹"이 대세가 되면서, 사용자의 디바이스에 따라서 웹 화면을 적절하게 구성하는 것이 필수 요소가 되었습니다. 일반적으로, 브라우저 창의 크기를 기반으로 디자인을 다르게 설정하는 방식을 많이 사용하고 있죠? 이 사이즈를 기준으로 PC 혹은 Mobile을 얼추 구분하기도 합니다. 대부분의 경우 창 크기에 따라서만 조절해도 큰 문제는 없습니다만, 가끔은 사용자의 디바이스가 PC인지 모바일인지 구분하고 싶은 경우도 있습니다. 예를 들어서 다음과 같은 경우를 생각해 볼까요? Hover시에 이미지 위에 text를 overlay 하는 경우 Hover를 하는 경우에만 나타나는 버튼 요소 위와 같은 경우에는 hover 동작은 마우스를 이용하는 PC에서 정상적으로 확인할 수 있으나, 터치스크린을 사용하..

CSS를 이용하여 앵커 클릭시 부드러운 스크롤을 구현하는 방법

웹/HTML, CSS 2020. 11. 24. 00:34

페이지 내에서 앵커 링크 사이를 이동하는 경우, 부드러운 효과를 위해서 스크롤 기능을 넣곤 합니다. jQuery를 이용하거나 javaScript로 구현하던지... 그런데, 사실 가능하다면 "개발자의 편의"를 위해서 native 한 기능으로 들어가는 게 가장 좋습니다. 핵심 기술이 아닌 animation 류의 효과를 위해서 직접 뭔가를 해주는 건 사실 좀 피곤한 일이거든요. 대부분의 경우 라이브러리가 있긴 하지만, 라이브러리가 자꾸 섞이는 것도 좀 그렇죠? 이번 글에서는 별다른 설정 없이 CSS로만 앵커 링크 사이를 부드럽게 이동하는 방법에 대해서 살펴보겠습니다. 1. 기존 방식 기존에는 jQuery를 이용하여, 특정 엘리먼트의 상단으로부터의 offset을 구하고 animation을 통하여 구현하는 방법이..