styled-components3 Styled-components(5) first-child와 last-child 사용하기 현업에서 스타일드 컴포넌츠를 쓰기 시작한지 얼마 되지 않은 시점에 당황했던 부분을 잊지 않기 위해 기록을 남겨본다. styled-components 에서 last-child 를 사용해보자. 결과화면 미리보기 이 두 개가 있다. 두 번째 버튼의 margin-left 만 주려고 한다. 이때 나는 last-child 를 사용하고 싶다. 자, 그럼 styled-components 에서 last-child 를 사용해보자 Styled-components(5) first-child와 last-child 사용하기 import styled from 'styled-components'; // 일단 임포트 해주시고 // 스타일드 컴포넌트로 들을 감싸주었다 이전 다음 스타일드 컴포넌트 내에서 &:last-child 를 사용한.. 2022. 2. 14. Styled-components(4) 배열로 된 div를 2열로 나열하기 배열로 된 데이터를 map()를 이용해 동적으로 가져오면, div가 한 영역 안에 길게 나열된다. 하지만 테이블처럼 2열로 레이아웃해야한다면? (한시간 정도 구글링으로 뒤지면서 어려운 길로 빠지려다 가까스로 구원받았다... 흑흑) 자, 그럼 2줄로 나누러 가보자. (딱 2줄의 코드면 해결되더라 ... 허무쓰) 결과화면 미리보기 매핑된 데이터라 로 영역을 나눌 수 없는 상태에서 column을 2줄로 나누어야 한다. Styled-components(4) 배열로 된 div를 2열로 나열하기 사실 정말 심플하다. 1열 만큼의 width 를 잡아 고정시키고, flex-wrap 속성을 사용하는 것이다. {items.map(item => item)} // 매핑한 데이터 가져왔다고 가정하고 const DIV_Box =.. 2022. 1. 17. Styled-components(3) 자식 컴포넌트에 커스텀 css props로 전달하기 styled-components 로 개발하며 첫 난관은 자식 컴포넌트에 스타일을 적용하는 것이었다. pure css 로는 필요한 div 태그에 클래스를 만들었는데, 이제 이 방식은 통하지 않는다. 부모 컴포넌트에서 자식에만 있는 속성을 변경하고자 한다. 하지만 자식은 공통컴포넌트라 그 안에서 직접적인 수정이 어렵다. 결국 자식을 건들지 않고, 부모 쪽에서 구체적인 속성 값을 줘서 해결해야 하는 것이다. (나의 경우, 간단하게도 자식컴포넌트의 패딩값을 변경하는 거였는데, 이 쉬운 것을 styled-components 초짜가 하려니 한참 뱅뱅 돌았다.) 자, 그럼 css 를 물려주러 떠나보자. Styled-components(3) 자식 컴포넌트에 커스텀 css props로 전달하기 자식 컴포넌트에 스타일을 .. 2022. 1. 7. 이전 1 다음 반응형
