All

230 posts

웹사이트에서 정말 흔하게 접할 수 있는 성배(Holy Grail) 레이아웃은 한 때 개발자 사이에서 제대로 구현하기 어렵기로 악명이 높았었는데요. Flexbox와 CSS Grid가 보편화되면서 이제는 옛말이 되어 가고 있는 것 같습니다. 이번 포스트…

버튼은 웹 에서 사용자와 상호 작용에 있어서 핵심이 되는 요소로서 하나의 웹 애플리케이션에서도 여러 종류의 버튼이 필요하기 마련입니다. 이번 포스팅에서는 다앙한 크기와 형태의 버튼을 표현하기 위해 사용할 수 있는 React로 컴포넌트를 함께 개발해보…

이번 포스팅에서는 Styled Components로 전역 스타일(global style)을 정의하는 방법에 대해서 알아보겠습니다. Styled Components 자체에 대한 자세한 설명은 관련 포스트를 참고 바랍니다. 컴포넌트 레벨 스타일링 Rea…

이번 포스팅에서는 추가 컨텐트를 삽입하기 위해서 사용되는 ::before과 ::after에 대해서 알아보겠습니다. Pseudo Element ::before과 ::after는 CSS에서 소위 pseudo element라고 하는데요. 일반적인 CSS …

웹개발을 하다보면 주어진 공간보다 더 많은 컨텐트를 보여줘야 하는 경우가 생기는데요. CSS에서는 overflow 속성을 통해서 주어진 공간을 넘어가는 컨텐트를 어떻게 보여줄지를 제어합니다. 이번 포스팅에서는 크기가 제한된 영역에서 많은 양의 컨텐트…

이번 포스트에서는 화면에 고정된 UI를 만들 때 사용되는 fixed positioning에 대해서 알아보도록 하겠습니다. Fixed Positioning CSS의 fixed positioning은 브라우저의 전체 화면(viewport)을 기준으로 엘…

웹사이트에서 부연적인 정보를 선택적으로 보여주긴 위한 수단으로 툴팁(tooltip)이 많이 사용됩니다. 예를 들어, 아래 웹페이지에서 HTML과 CSS위에 마우스 포인터를 올려놓으면 각 용어가 무엇의 약자인지가 표시됩니다. 이번 포스트에서는 CSS의…

이번 포스팅에서는 CSS에서 상속의 개념과 기본적으로 CSS 상속을 어떻게 활용하는지 알아보겠습니다. CSS의 상속 CSS에도 다른 프로그래밍 언어들처럼 상속(Inheritance)이라는 개념이 있는데요. 하위 엘리먼트에서 어떤 CSS 속성을 명시하…

다양한 디바이스들이 웹브라우징을 지원하면서 웹에서 화면의 해상도에 따라 유연하게 컨텐츠를 배치하는 기술이 점점 중요해지고 있습니다. 이번 포스팅에서는 이러한 반응형 웹디자인의 기본이되는 CSS의 미디어 쿼리(Media Query)에 대해서 살펴보겠습…

이번 포스트에서는 Jest를 사용하여 파리미터화(parameterized) 테스트를 작성하는 방법에 대해서 알아보겠습니다. 파리미터화(parameterized) 테스트 테스트를 작성하다보면 다양한 테스트 데이터에 대해서 동일한 테스트 코드를 돌리고 …