📌 CSS
-
[React Native] StyleSheet와 CSS의 주요 차이점📌 CSS 2022. 8. 8. 13:29
StyleSheet와 CSS의 주요 차이점 셀렉터라는 개념이 없다. 모든 스타일 속성은 camelCase로 작성한다. display 속성은 기본적을 flex이며 , 다른 값은 none 밖에 없다. flexDirection 속성의 기본값은 웹에서는 rew이지만, 리액트 네이비트에서는 column 이다. 리액트 네이티브에서 스타일링할 때 숫자 단위는 dp 뿐이다. background 대신 backgroundColor를 사용해야 한다. border 대신 borderWidth, borderStyle, borderColor 등을 따로따로 설정해야 한다. (축약형이 없다.) 리액트 네이티브에서는 별도의 CSS 파일에 스타일을 작성하지 않고, 자바스크립트 파일 안에서 StyelSheet라는 것을 사용한다. const..
-
-
[CSS] input type="checkbox" ON/OFF 스위치 버튼 디자인📌 CSS 2021. 12. 28. 16:05
& { position: relative; display: inline-block; width: 55px; height: 30px; & > input { opacity: 0; width: 0; height: 0; } & > span { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; background-color: #ccc; box-shadow: inset 1px 5px 1px #999; border-radius: 20px; transition: 0.4s; } & > span:before { position: absolute; content: ""; height: 22px; widt..
-
[CSS] input[type="radio"] 버튼 형태로 디자인하기📌 CSS 2021. 12. 28. 15:28
옵션1 옵션2 옵션3 const StyledRadio = styled.label` & { input[type="radio"] { display: none; & + span { display: inline-block; padding: 0px 10px; height: 35px; line-height: 33px; font-weight: 500; text-align: center; color: #222222; border: 1px solid #9f9f9f; background: none; cursor: pointer; } &:checked { & + span { color: #fff; border: 1px solid #fe1448; background: #fe1448; } } } } `;
-
[CSS] prop를 사용한 디자인 적용📌 CSS 2021. 12. 20. 19:20
styled-components에서 prop를 사용하여 스타일링을 하는 법을 알려드리려고 합니다. 아래의 예시로 버튼이 두 개가 있는데요. 공통으로 사용되는 기본 구성을 에 설정하였는데요. 스타일이 지정된 구성 요소의 템플릿 리터럴에 함수를 전달하여 props를 기반으로 적용할 수 있습니다. See the Pen Untitled by uxuisooa (@uxuisooa) on CodePen. 버튼 구성 요소에는 색상을 변경하는 기본 상태가 있고, props를 true로 설정하면 배경과 텍스트 색상이 바뀌게 됩니다.