안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.
이번 포스팅에서는
리액트나 리액트네이티브로 개발 시 사용하는
styled-component로 border에 style 주는 방법에 대해 공유하겠습니다.
자, 먼저 아래의 이미지를 봐주세요.
테이블 양 옆엔 borde가 없는 것을 확인할 수 있습니다.
위 이미지처럼 양 옆의 border없이 하나의 박스를 생성한다고 가정했을 때,
기존의 css에서는 아래의 코드처럼 처리가 가능합니다.
이렇게 하면 위와 아래의 border만 남겨져 있는 모양이 됩니다.
border: 1px solid #ddd; // #ddd 컬러의 border를 박스 전체에 씌운다.
border-right: none; // 오른쪽 border를 없앤다.
border-left: none; // 왼쪽 border를 없앤다.
styled-component에서는 위 코드처럼 스타일을 주려고 하면 먹히질 않습니다.
그렇다면 styled-component에서는 border style을
어떻게 처리해야 할지 알아볼까요?
border-color: #ddd;
border-top-width: 1;
border-bottom-width: 1;이런 식으로 border의 color만 정해주고,
top, right, left, bottom등을 width와 함꼐 입력하여 처리합니다.
간단한 건데, 저 같은 경우는 낯설게 다가와서 순간 멈칫했던 내용이에요.
저같은 분들이 계실까봐 공유합니다 :)
728x90
