Front-end (14) 썸네일형 리스트형 Bouncing Logo Screen Saver 만들기 화면 모서리에 부딪히면 bounce하는 png 이미지를 js로 구현해 페이지에 디자인 요소를 추가하고 싶었다. 기술 포스팅에 적절하진 않은 같지만 KPT 회고 방법론을 사용해 볼 것이다. 💡 KEEP 1. 구글링 키워드를 잘 이용했다. (Bouncing, screen saver, js) 2. 잘 정리된 설명을 바탕으로 원하는 애니메이션을 구현할 수 있었다. https://dev.to/s1mpson/creating-bouncing-logo-with-javascript-4ekg Creating a Bouncing Logo with JavaScript ⛹🏽♀️ So, recently I've seen a YouTube video about DVD bouncing logo and thought, why not.. HTML 특수문자표 http://ieo.kr/?mode=utils&exec=specialchar HTML 특수문자표 - 토쳐라이딩 HTML 특수문자표 ieo.kr grid 기본 1. repeat, fr HTML 삽입 미리보기할 수 없는 소스 grid-template-columns와 grid-template-row를 이용해 grid layout의 행과 열의 모양을 정할 수 있다. fr은 컨테이너 너비를 box가 해당 비율만큼 나누어갖는 것을 의미한다. grid-template-columns가 1fr 3fr 100px 50%일 때 50%가 먼저 적용된 후 100px가 적용되고, 남은 공간을 1fr, 3fr이 나누어 가지는 것을 볼 수 있다. repeat 함수로 반복되는 fr을 나타낼 수 있다. grid-gap으로 box 안쪽 서로의 간격을 정할 수 있다. 2. minmax, auto HTML 삽입 미리보기할 수 없는 소스 minmax로 그리드 아이템의 최소, 최대 크기를 정할 수 .. flex의 align-self, align-item과 align-content의 차이 flex-direction이 row(default)일 때 axis align-self flex로 지정된 컨테이너 안의 box에 부여한다. align-self: flex-end이면 해당 box의 cross axis상 위치는 컨테이너 끝이 된다. align-item cross axis의 한 줄 내에서 box들의 배치를 결정한다. align-content cross axis의 줄 간 배치를 결정한다. position: fixed와 sticky fixed box를 스크롤 화면에서 지정된 위치(top, bottom, left, right)에 고정시킨다. (스크롤 시에 같이 이동한다.) sticky box를 부모 컨테이너 안에서 fixed와 같이 스크롤 화면에 고정시킨다. 스크롤이 컨테이너를 벗어나면 box는 이동을 멈춘다. HTML 삽입 미리보기할 수 없는 소스 sticky box를 스크롤 화면 바닥에 고정시키고 싶다면 box를 container 바닥에 위치시킨 후 bottom: 0;을 하면 된다. box-sizing과 box-shadow box-sizing content-box (default): content의 크기만 고려해 width와 height를 적용한다. border-box: margin, border, padding, content 모든 요소를 고려해 width와 height를 적용한다. box-sizing: content-box; width: 100%; border: solid #5B6DCD 10px; padding: 5px; 자식 컨테이너가 부모 컨테이너를 빠져나올 경우 box-sizing을 border-box로 설정해 해결할 수 있다. box-shadow box-shadow: inset 수평 거리: 그림자의 가로 위치를 나타낸다. 음수 값은 왼쪽으로, 양수 값은 오른쪽으로 이동한다. 수직거리: 그림자의 세로 위치를 나타낸.. 이전 1 2 다음
