JavaScript챌린지 05,06

transition 그룹

.class {
	transition:
    	font-size 0.5s cubic-bezier(a,b,c,d),
        flex 0.5s cubic-bezier(a,b,c,d),
        background 0.2s;
}

쉼표(,)로 이어나갈수 있고 cubic-bezier는 애니메이션 속도를 내맘대로 커스텀할수있게 해준다고 배웠다.

flex

알고 있는개념이지만 좀더 정확하게 안 부분이 있어서 적는다.

.class > * {
	flex : 1 0 auto;
}

일단 셀렉터 (>)는 바로 자식element를 찝는 셀렉터고,

flex를 3개의 value로 쓸때는 (flex-grow,flex-shrink,flex-basis)순이다.

• flex-grow

  flex-container 할당받을 공간을 정의

• flex-shrink

1. flex-container보다 flex-item이 더 클때 적용
2. 설정된 숫자값에 따라 flex-container요소 내부에서 flex-item의 요소크기가 축소된다 (그 숫자비율에 따라 축소됨)

• flex-basis(*)

1. flex-item의 초기 크기를 지정.
2. auto가 아닌경우 flex-basis의 값과 flex-item의 width (flex-direction이 column일 경우 height)값을 동시에 주면 flex-basis가 우선한다.

그래서 flex 1 0 auto하면 거의 완벽한 1:1:1 비율이 된다.

cross-browsing(상당히 별거아님)

별건 아니지만 아~~~주 간단한 예

//transitionend 이벤트

function toggleActive(e){
	if(e.propertyName.includes('flex'){
    	this.classList.toggle('open')
    }
}
ele.addEventListner('transitionend',toggleActive)

e.propertyName에 'flex-grow'오는게
Safari는 'flex' Chrome은 'flex-grow'라고 온다.
그래서 단순히 flex-grow라고 if문을걸면 Safari에서는 작동이 안될거니까 공통인 'flex'를 includes로 확인하는 조건을 건것.

e는 이벤트고 this는 해당 엘리먼트다 혼동 니은

---

string.match(regExp)

string에 regExp에 해당하는 부분이 있으면 배열하나를 return하고, 없으면 null을 return한다.

string.replace(before,after)

많이 쓰던거지만 before에 정규식이 들어갈수있다는게 핵심.

const change = string.replace(regx,`<span class="hl">${value}</span>`

//해당문자에 색을 다르게하거나 하이라이트를 주기위해 <span>태그로 감싸서 replace하는 모오습

change이벤트

몰랐는데 change이벤트는 변경이 있고 focus를 잃어야! 발동된다.
그래서 사용감을위해 keyup이벤트와 함께.