몽땅뚝딱 개발자

보호되어 있는 글입니다.

◽️ 카드 만들기 .contents-place { .card { // ... transition: 1s; transform: rotateY(0deg); // 미리 준비시켜야 성능에 좋다. transform-origin: left; // 변경이 일어나는 위치를 바꿀 수 있다. } &:hover { .card { transform: rotateY(180deg); } } } ◽️ 카드 만들기2 .contents-place { display: flex; align-items: center; justify-content: center; perspective: 500px; .card { position: relative; width: 60px; height: 100px; transform: rotateY(0deg)..

◽ animation - frame by frame animation은 gif를 사용하면 이미지 깨짐현상 등으로 의도한대로 노출되지 않을 수 있다. 애니메이션을 CSS로 구현하면 커스텀이 쉽다. @keyframes dot { 0% { opacity: 0.2; } 25% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 0.2; } } /* linear: 일정한 속도 */ /* alternate: 반복하기 */ /* reverse: 반대로 시작 */ /* alternate-reverse: 반대로시작해서 반복 */ /* forwards: 애니메이션이 끝난 위치에서 끝남 */ /* steps: 애니메이션을 17단계로 자름 */ .dot { animation: do..

◽ Transition - transition-property: all; - transition-duration: 1s; - transition-timing-function: ease; - transition-delay: 0s; transition: 1s 2s; // 1초동안 발생, 2초간 딜레이 transition-timing-function의 종류 - linear: 가속도 없이 일정한 속도로 진행된다. - cubic-bezier(0.34, 0.67, 0.59, 1.62); 출처 인터랙티브 웹 개발 제대로 시작하기 - 인프런 | 강의 크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다., - 강의 소개 | 인프런 www.inflearn.com

◽ Transform을 사용하는 이유 - 하드웨어 가속을 사용(GPU를 사용) 속력과 성능이 굉장히 좋다. CSS3를 적극적으로 사용할 수 있다면 transform을 사용하는 것이 좋다. position: absolute와 top, left를 사용하는 것보다 transform을 사용하는 것이 부드럽게 동작하는 등 유려하며 성능면에서도 훨씬 좋다. ◽ transform 사용하기 .box { width: 100px; height: 100px; border: 2px solid black; background: red; } 적용할 수 있는 값: scale, rotate, skew, translate scale(1): 100% scale(2): 200% .box:hover { transform: scale(2);..

요즘 관심사는 아래와 같다. 1. 인터렉션 2. 리액트 3. 타입스크립트 이 중에서 인터렉션은 작년부터 꾸준히 관심이 있었으나 바쁘다는 핑계로 단 한번도 찾아본적도, 뭔가 구현하려고 시도한 적도 없기에 잠깐 여유가 생긴 이 시점에 바로 공부해버리기로 결심했다. 타입스크립트는 개발도서로 공부하는게 더 정확하고 깊게 이해할 수 있었고 리액트는 강의를 보는게 더 재밌고 잘 이해됐었는데 인터렉션은 관련된 책이 잘 안보이고 정의도 제대로 서지 않아서 어떻게 공부하면 좋을까 고민이 많았다. 하지만 고민하면 뭐하겠나요? 우선 강의를 보기로 했다. 그리고 강의 내용을 적용하기위해 오랜만에 내 테스트용 프로젝트에 UI 밑작업을 했다. (나의 테스트 프로젝트... 마지막 커밋이 2022년 8월이다. 반성한다.) 오늘은 ..

잊지말고 써먹자~~!! 퍼블리싱은 알면 알수록 재미있는 세계다. 1. border의 max 값을 정해보자. border: max(2px, 0.1em) solid gray; 2. cursor 속성에는 not-allowed도 있다. pointer만 주구장창 사용해왔음.. cursor: not-allowed; 3. 웹 접근성(accessibility) 측면에서 키보드 사용자를 배려하자. 키보드 포커스가 해당 위치로 오면 포커스 링(ring)이 나타날 수 있도록 한다. [type="checkbox"]:focus-visible { outline-offset: 2px; outline: 2px solid tomato; } 4. 꾸밈용으로 태그를 넣는다면 alt는 공백으로 설정한다. 5. cursor: pointer;..

/** * 문자열 총 byte 구하기 * @param {string} str 문자열 * @returns {number} 바이트 */ export const getByteLength = (str) => { console.log('[str] result >>> ', str) if (str == null || str.length === 0) { return 0 } let size = 0 for (let i = 0; i < str.length; i++) { size += charByteSize(str.charAt(i)) } return size } /** * 한글자 당 byte 구하기 * @param {string} charValue 문자열 * @returns {number} 바이트 */ export const..

∕ wish

∕ 2023-03 1. 주석에 대하여 이렇게 주석을 달지 말자! // 사용자가 레벨업하려면 로그인을 10회 이상하고 게시물을 5개 이상 작성해야한다. if(user.getLoginCount() && user.getOwnArticleCount() >= 5) { int level = user.getLevel(); user.setLevel(level++); } 이렇게 변경하는 것이 좋다. // 승급 조건이 되면 승급한다. if(user.getLoginCount() && user.getOwnArticleCount() >= 5) { int level = user.getLevel(); user.setLevel(level++); } // 하지만 이렇게 리팩토링 하는 것이 더 좋다. if(user.enoughToLev..