YG - 96년생 , 강아지 있음, 개발자 희망

저는 맥박 형태에서 웨이브로 바꾸려고 시도했는데 바꾸기가 어려웠습니다. 팀원 제로가 만들어줘서 기록해두려고 합니다. 맥박 형태보다 웨이브 형태가 좋은 이유 Bill Chung의 연구에 따르면 스켈레톤 내 애니메이션을 규칙에 맞게 사용하면 사용자가 더 로딩 시간을 더 짧게 느끼게 된다고 합니다. 맥박보다는 웨이브 효과 왼쪽에서 오른쪽으로 움직이는 애니메이션 애니메이션은 Skeleton 컴포넌트에 주의를 끌만큼 빠르지 않아야 함 Everything you need to know about skeleton screens How do we know that skeleton screens actually work? uxdesign.cc CSS 속성 { border-radius: 4px; background-col..

https://developer.mozilla.org/ko/docs/Web/CSS/white-space white-space - CSS: Cascading Style Sheets | MDN CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다. developer.mozilla.org pre-wrap 연속 공백 유지. 줄 바꿈은 개행 문자와 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다. pre-line 연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다. 혹은 pre를 사용하셔도 됩니다.

google google google google google scss 파일 @import "_variable.scss"; @import "_mixins.scss"; a { margin-bottom: 10px; &:nth-child(odd) { @include link(red); } &:nth-child(even) { @include link(blue); } } mixins 파일 @mixin link($color) { text-decoration: none; display: block; color: $color; } css 에서 변수를 줄 수 있다. @import "_variable.scss"; @import "_mixins.scss"; a { margin-bottom: 10px; &:nth-child(..

Title Another Title Save Another Save scss 는 변수를 설정할 수 있습니다. _varibale.scss $bg: red; $title: 32px; styles.scss @import "_variable.scss"; body { color: $bg; } h2 { font-size: $title; } button { color: blue; } .box { color: blue; &:hover { color: green; } h2 { font-size: 18px; &:hover { color: red; } } button { color: $bg; } } /* .box { color: blue; } .box :hover{ color:green; } .box h2 { font-si..

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque pariatur omnis, odit, nisi error expedita, placeat quo sed voluptatem animi sint! Quia tempora maxime ut harum deserunt voluptate laboriosam omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, magni aliquam. Illum excepturi ab magnam corrupti doloribus architecto autem quae. Facere, minima! Iste ad impedit nobi..

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 .grid { display: grid; grid-auto-rows: 100px; background-color: gray; gap: 5px; height: 100vh; grid-template-columns: repeat(5, 100px); grid-template-rows: repeat(5, 100px); place-content: end center; /* place-content는 grid의 width와는 별개로 grid 자체의 위치를 설정할 수 있다. 수직 , 수평의 순서로 적어야 하며 justify-content align-items를 한번에 쓸 수 있는 단축어이다. */ } .item1 { backgro..

Log In Log Out styles.scss 파일 @import "_variable.scss"; @import "_mixins.scss"; @import "_extends.scss"; a { @extend %button; text-decoration: none; } button { @extend %button; border: none; } _extends.scss 파일 %button { font-family: inherit; border-radius: 7px; font-size: 12px; text-transform: uppercase; padding: 5px 10px; background-color: peru; color: white; font-weight: 500; } extends 의 장점은 스..

auto-fill 1 2 3 4 5 auto-fit 1 2 3 4 5 .grid { display: grid; grid-auto-rows: 100px; gap: 5px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* autofill 의 경우 콘텐츠의 사이즈를 계산하여 column 에 빈 grid의 column 개수를 설정하는 경우이다. */ } .grid2 { display: grid; gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* autofit 의 경우 여백없이 콘텐츠를 stretch 하여 column을 채우는 경우이다. */ grid-auto-ro..