Sweet But Psycho

뉴모피즘은 치수 외우기!! #f2f3f7 뉴모피즘 CSS 코드 보여주는 곳 https://neumorphism.io/#ffffff Neumorphism/Soft UI CSS shadow generator CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities. neumorphism.io

1. 스큐어 모피즘 (Skeumorphism) 실제 사물의 질감을 직접적으로 적용하여 표현 3D느낌 2. 플랫 디자인 완전 2D 3. 머트리얼 (Modern/ Material) 플랫 디자인에 입체 효과 추가 4. 뉴모피즘 (Newmorphism) 5. 글래스모피즘 (Glassmorphism) 머트리얼 컴포넌트 디자인 https://material.io/components Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material...

flex-direction //default flex-direction: column; flex-direction: row; flex-direction: row-reverse; flex-direction: column-reverse; default로 View 태그 안의 요소들은 모두 (1, 1) (2, 1) (3, 1) 처럼 세로 줄 하나로 정렬된다. flex-direction: row; 으로 바꾼다면 View 태그 안의 요소들은 모두 (1, 1) (1, 2) (1, 3) 처럼 가로 줄 하나로 정렬된다. flex-wrap default는 모든 요소들은 한 줄에 정렬된다. //default flex-wrap: nowrap; //한 줄에 모두 정렬 flex-wrap: wrap; //여러 줄에 걸쳐 정렬 fl..

css 속성 하나만 바꿀 경우 1. interface에서 사용할 props의 타입을 정의해주고 2. 사용할 styled component를 정의하는 부분에서 조건식을 적용할 Props를 넘겨준다. 3. 렌더링 부에서는 상태 함수와 클릭 이벤트 함수를 정의하고 컴포넌트를 리턴할 때 props에 상태값을 넘겨준다. //SelectedBtnPag.tsx interface SelectedProps { isSelected: boolean } const SelectedBtn = styled.Pressible` justify-content: center; align-items: center; color: ${({ isSelected }) => isSelected ? 'red' : 'black' } ` const Se..

styled component와 styleSheet 두 가지 방법 중 프로젝트에서는 styled component를 사용하기 때문에 아래와 같이 사용하였다. const StyledText = styled.Text` text-shadow-color: black; text-shadow-offset: 0px 4px; //그림자 위치 text-shadow-radius: 3px; //흐림 효과 정도 `

상현님이 올려주신 개구리 게임의 연장선으로 머장님이 또 올려주신 그리드 연습 게임을 했다. 원래 div-position,%로 짤 때 올려주신 걸 보고도 나중에 해봐야쥥~!!하고 넘겼는데 그리드 레이아웃을 짜기로 결정하고 어쩔 수 없이 게임을 켰다... 개구리보다 살짝 어려웠다. 내가 이해한 부분은 grid-column 과 grid-row 를 1/3로 설정하면 각각 1행부터 3행, 1열부터 3열까지가 되는 것! grid-column과 grid-row를 grid-area로 동시에 제어할 수 있다는 것! 1fr 3fr 일 때 첫번째 셀은 1/(1+3)의 크기이고 두번째 셀이 3/(1+3) 의 크기가 된다는 것! 이다. 하지만 내가 아직 완벽히 이해하지 못한 부분은 grid-template-columns (혹은..

홈 화면의 전체 메뉴를 띄우고 숨기기 위한 햄버거 버튼을 추가했다. ✔ position 설정 애니메이션이 아닌 버튼 자체를 생성하는 것은 간단할 것이라 생각했지만 position 설정이 의외의 첫 번째 복병이었다. 이 버튼이 영상과 반투명 레이어에 가려지지 않아야 하고 반투명 레이어 기준의 position에 대해서 설정해야하기 때문에 생각해야할 것이 많았다. html 태그에서 부모 태그에 해당하는 반투명 레이어의 position : relative;로 설정하면 그 좌측 최상단이 자식 태그의 (0,0)으로 기준이 된다. position : absolute;와 position : relative;를 잘 설정하여 이 녀석이 예쁘게 자리를 잘 잡을 수 있게 만드는데 시간이 좀 걸렸다... ✔ z-index 설정..

상현님께서 디스코드에 해보라고 올려주신 개구리 게임을 했다. 플렉스 박스로 제어 연습을 할 수 있는 귀여운 사이트였는데 이런 식으로 수업을 하면 참 쉽고 재밌고 좋을 것 같다... 사이트 주소는 https://flexboxfroggy.com 이다. 게임의 핵심은 display : flex; 로 설정했을 때 사용할 수 있는 명령어 총 8가지를 사용하여 개구리를 수련잎으로 돌려보내는 것이다. ✔ flex 요소들을 가로선 상에서 정렬시키는 justify-content 이의 vertical 개념인 align-items 는 flex 요소들을 세로선 상에 정렬한다. ✔ 그리고 방향을 정렬하는 flex-direction 과 특정 요소의 순서를 결정할 수 있는 order(값으로 지정), ✔ align-items는 요소..