CSS6 UI를 개발할 때는 이렇게 하자. 사용자가 혼란스럽지 않도록 하려면 : 아이콘이나 메뉴는 한 페이지에 최대한 적게 넣고, 관계된 것끼리만 묶자. 사람들이 계속 이용하게끔 하려면 : 무한 스크롤(유튜브 숏츠, 넷플릭스, 트위터가 그러하듯)을 사용한다. 사람들이 믿고 쓰게끔 하려면 : "3만명이 선택한 뉴스레터 구독하기", "1500명이 참여한 챌린지에 도전하기", "재이용률 85%인 서비스 믿고 맡기기" 이런 식으로 소셜 프루프 심리를 활용한다. 사용자들을 파악하는 것이 중요하다. 미국의 DIY 업체 홈디포가 중국에서 망한 이유: 중국인들은 DIY에 관심이 없고, 주택을 투기 목적으로 구입해 인테리어가 필요 없어서 미국의 월마트가 한국에서 실패한 이유: 이미 이마트와 롯데마트 등이 한국인의 구매 습관에 최적화되어있어서 인간의 뇌는 보상을 .. 2023. 10. 31. %, em, rem, vw, vh의 차이점 난 픽셀만 쓰는데 큰일이다.. 2023. 10. 24. CSS: 좌우, 상하, 가로세로 정렬 justify-content: 좌로 정렬 / 우로 정렬 justify-content: flex-start; 요소들을 컨테이너의 맨 왼쪽부터 정렬합니다. justify-content: flex-end; 요소들을 컨테이너의 맨 오른쪽부터 정렬합니다. justify-content: center; 요소들을 컨테이너의 왼쪽 가운데 오른쪽 중에 가운데로 정렬합니다. justify-content: space-between; 요소들간의 간격에 동일한 간격을 둡니다. justify-content: space-around; 각 요소의 양 옆에 동일한 간격을 둡니다. align-items: 위로 정렬 / 아래로 정렬 align-items: flex-start; 요소들을 컨테이너의 맨 위부터 정렬합니다. align-items.. 2023. 4. 15. CSS: z-index에 대하여 z-index는 0부터 시작해 1부터 시작해? 숫자는 몇까지 붙일 수 있어? z-index는 0부터 시작합니다. 즉, z-index가 0인 요소는 다른 요소들보다 아래에 위치하게 됩니다. z-index는 정수값으로 지정할 수 있으며, 양수와 음수 모두 가능합니다. z-index의 최대값은 2147483647입니다. 하지만 이렇게 큰 값까지 지정하는 경우는 드물며, 일반적으로는 100 이하의 값이면 충분합니다. z-index는 부모 요소와 관련이 있으므로, 부모 요소와 동일한 층위에 있는 다른 형제 요소들과만 비교됩니다. 따라서, 부모 요소와는 별도로 z-index 값을 지정해주어야 합니다. z-index는 같은 층위에 있는 요소들 간의 높낮이를 결정하는 속성으로, 브라우저에서 요소들의 위치를 결정할 때 .. 2023. 3. 29. CSS: react-icons 로 아이콘 넣는 방법 yarn add react-icons import styled from "styled-components"; import { VscBlank } from "react-icons/vsc"; import { MdClose } from "react-icons/md"; return ( 멤버 추가 ); const TopBox = styled.div` background-color: white; top: 0%; width: 100%; display: flex; justify-content: space-between; margin-bottom: 10px; .VscBlank { font-size: 35px; } .MdClose { font-size: 170%; font-weight: bolder; border-top:.. 2023. 3. 22. CSS: 버튼 import styled from "styled-components"; return ( 전송 ); const StButton = styled.button` border: none; border-radius: 7px; background-color: skyblue; width: 60px; height: 35px; cursor: pointer; font-weight: bold; font-size: 1rem; color: black; &:hover { width: 60px; background-color: gray; color: white; } `; 2023. 3. 2. 이전 1 다음
