Written by java-style
on 2021-09-22

Day 10 - 20

Day - 11 | Event KeyCodes

javascript event keycode site

inline-flex

Inline 특성의 Flex Container를 정의 ( flex는 Block )

Day - 12 | FAQ Collapse

unicode로 font awesome 사용하기

content: "\f075"; font-family: "Font Awesome 5 Free";

부모 element 가져오기

el.parentNode;

Day - 13 | Random Choice Picker

자유로운 input을 만들땐 textarea 태그 사용 ( html5 기본 태그)

스크립트에서 tag생성

const tagEl = document.createElement("span"); tagEl.classList.add("tag"); tagEl.innerText = tag;

randomInt ( 0 ~ limit )

Math.floor(Math.random() * limit);

Day - 14 | Animated Navigation

linear-gradient 로 반땅하기

background-image: linear-gradient( to bottom, #eafbff 0%, #eafbff 50%, #5290f9 50%, #5290f9 100% );

ul 스타일 없애기

list-style-type: none;

margin-top, margin-bottom 의 auto는 실제론 0 이다

수직정렬 가운데로 맞추는건 margin으로 하는건 불가능하다.

Day - 15 | Incrementing Counter

data-* attribute 사용하기

const counter = document.querySelector(".counter"); const data = counter.dataset; const target = counter.getAttribute("data-target");

.counter::before { content: attr(data-target); } .counter[data-target="7500"] { width: 400px; }

String -> Number

const c = +counter.innerText;

Number -> String

counter.innerText = "" + Math.ceil(c + increment);

증가하는 모션 카운더 만들기

Day - 16 | Drink Water

flexbox로 여러줄 만들기 > flex-wrap: wrap; 이용

.cups { display: flex; flex-wrap: wrap; width: 280px; }

필요하다면 display: flex 덕덕지 나쁘지 않은 듯?

드래그 방지

user-select: none;

DOM은 남기지만 보이지는 않게하기

if (fullCups == totalCups) { remained.style.visibility = 'hidden' remained.style.height = 0 } else { remained.style.visibility = 'visible' remained.style.height = 'auto'

Day - 17 | Movie App

input에서 placehold 스타일 바꾸기

.search::placeholder { color: #7378c5; }

페이지 통째로 리로드 시키기

window.location.reload();

Day - 18 | Background Silder

font awesome

background 설정 good practice

background-position: center center; background-size: cover;

js에서 element의 background image 가져오기

body.style.backgroundImage = slides[activeSlide].style.backgroundImage;

Day - 19 | Theme Clock

CSS | Dark mode

:root { --primary-color: #000; --secondary-color: #fff; } html { transition: all 0.5s ease-in; } html.dark { --primary-color: #fff; --secondary-color: #333; } html.dark { background-color: #111; color: var(--primary-color); }

toggleEl.addEventListener("click", (e) => { const html = document.querySelector("html"); if (html.classList.contains("dark")) { html.classList.remove("dark"); e.target.innerText = "Dark Mode"; } else { html.classList.add("dark"); e.target.innerText = "Light Mode"; } });

분기없이 flex 쓰기

display: inline-flex;

Nested Template literals `${hoursForClock}:${minutes < 10 ? `0${minutes}`: `${minutes}`}${ampm}`

Day - 20 | Button Ripple Effect

버튼 클릭시 퍼지는 효과

button .circle { position: absolute; background-color: #fff; width: 100px; height: 100px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); animation: scale .5s ease-out; } @keyframes scale { to { transform: translate(-50%, -50%) scale(3); opacity: 0; }

event | clientX, clientY

브라우저 창 좌상단 모서리를 기준으로, 마우스의 x, y 좌표

const x = e.clientX const y = e.clinetY

event.target | offsetX, offsetY

해당 객체를 기준으로 한 마우스의 X, Y 좌표

const buttonTop = e.target.offsetTop; const buttonLeft = e.target.offsetLeft;

event | this

에로우 함수일 경우 => Window

일반 함수일 경우 => 호출하는 DOM ( ex. )

from http://arthur.tistory.com/12 by ccl(A) rewrite - 2021-09-22 23:27:08

Top