이번 포스팅에서는 CSS Reset(리셋)과 CSS Normalize(노멀라이즈)에 대해서 알아보도록 하겠습니다. CSS Normalize와 CSS Reset의 필요성 세상에서는 여러 가지 브라우저가 있으며 우리가 만든 웹사이트나 웹 애플리케이션이 이 중 어떤 브라우저에서 돌아갈지는 알 수 없습니다. 여기서 문제는 소위 User Agent Stylesheet라고 불리는 브라우저 내장 스타일이 브라우저마다 조금씩 다르다는 것 인데요. 다시 말해서, 우리가 만든 UI가 크롬(Chrome)에서 열었을 때와 사파리(Safari)에서 열었을
사이트 네비게이션(site navigation)은 웹사이트에서 사용자가 효과적으로 페이지 사이를 이동을 할 수 있도록 도와주는 매우 흔하면서도 중요한 UI 입니다. 이번 포스팅에서는 React와 Styled Components를 이용하여 아래와 같은 다단계 사이드 네비게이션 UI를 한 번 구현해도록 하겠습니다. 컴파운트 컴포넌트 HTML에는 부모없이는 단독으로 쓰이지 않는 요소들이 있습니다. 대표적인 예로 <option> 요소는 항상 <select> 요소 안에서 사용되며, <li> 요소는 항상 <ul>이나 <ol> 요소 안에서 사용
버튼은 웹 에서 사용자와 상호 작용에 있어서 핵심이 되는 요소로서 하나의 웹 애플리케이션에서도 여러 종류의 버튼이 필요하기 마련입니다. 이번 포스팅에서는 다앙한 크기와 형태의 버튼을 표현하기 위해 사용할 수 있는 React로 컴포넌트를 함께 개발해보도록 하겠습니다. 컴포넌트 함수 우선 disabled와 children prop을 인자로 받고 아무 스타일링없이 단순히 <button> HTML 엘리먼트를 반환하는 간단한 컴포넌트 함수를 작성합니다. 지금부터 React에서 Styled Components 라이브러리를 사용해서 이 버튼 컴
이번 포스팅에서는 Styled Components로 전역 스타일(global style)을 정의하는 방법에 대해서 알아보겠습니다. Styled Components 자체에 대한 자세한 설명은 관련 포스팅를 참고 바랍니다. 컴포넌트 레벨 스타일링 React와 Styled Components로 웹 개발을 하다보면 대부분의 경우 컴포넌트 레벨에서 스타일을 하게 됩니다. React가 컴포넌트 기반 자바스크립트 라이브러리라는 것을 감안해보면 너무나 자연스러운 현상일 것입니다. 예를 들어, 다음 <BlogPost/> React 컴포넌트는 Sty
지난 포스팅에서 외부 라이브러리 없이 CSS 만으로 React 컴포넌트를 스타일링하는 방법을 알아보았습니다. 이번 포스팅에서는 대표적인 CSS-in-JS 라이브러리인 Styled Components를 사용해서 React 컴포넌트를 스타일링하는 방법을 살펴보겠습니다. CSS in JS? 먼저 CSS in JS의 개념을 짚고 넘어가겠습니다. CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다. 기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는