wesBos [Javascript 30] 5. Flexbox + JS Image Gallery ✔ 참고 블로그 : ✔ 참고 공식 문서 : ✔ 참고 공식 문서 : ❗❗ 레이아웃 처럼 만들기 위해서 진행해야하는 과정 ❗❗ 1. 3개의 구역으로 나누어서 배경화면을 넣어준다. 2. 1개의 배경화면 구역에 text 3개를 1/3 위치에 넣어준다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있... CSSjavascript30wesBosfrontendvanilla jsJavaScriptjshtmlCSS [Javascript 30] 1. Drum-Kit 일단 flex-box를 이용해서 9개의 박스를 한 줄로 가운데에 위치시킬 것이다. ✔ 일단 우리가 채크해야되는 부분 2. 키를 누르는 순간 소리가 나고, 검은색 테두리가 노란색 테두리로 변하고, 키의 크기가 커졌다가 작아져야 한다. ✔ Data-* ✔ 참고 블로그 : ✔ kbd flex-box를 이용해서 위치를 원하는 곳에 놓아주었다. ✔ 100vh ≠ 100% 라고 한다. min-heigh... JavaScriptjavascript30vanilla jsjswesBosfrontendJavaScript
[Javascript 30] 5. Flexbox + JS Image Gallery ✔ 참고 블로그 : ✔ 참고 공식 문서 : ✔ 참고 공식 문서 : ❗❗ 레이아웃 처럼 만들기 위해서 진행해야하는 과정 ❗❗ 1. 3개의 구역으로 나누어서 배경화면을 넣어준다. 2. 1개의 배경화면 구역에 text 3개를 1/3 위치에 넣어준다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있... CSSjavascript30wesBosfrontendvanilla jsJavaScriptjshtmlCSS [Javascript 30] 1. Drum-Kit 일단 flex-box를 이용해서 9개의 박스를 한 줄로 가운데에 위치시킬 것이다. ✔ 일단 우리가 채크해야되는 부분 2. 키를 누르는 순간 소리가 나고, 검은색 테두리가 노란색 테두리로 변하고, 키의 크기가 커졌다가 작아져야 한다. ✔ Data-* ✔ 참고 블로그 : ✔ kbd flex-box를 이용해서 위치를 원하는 곳에 놓아주었다. ✔ 100vh ≠ 100% 라고 한다. min-heigh... JavaScriptjavascript30vanilla jsjswesBosfrontendJavaScript