분류 전체보기

뒤늦게 알아서 뼈아픈 유용한 CSS : gap (flexbox)

맨날 flex 줘놓고도 margin-right 주고 nth-child에 margin-right:0주는 식으로 작업해왔는데, 요게 물건이다. margin-right 주고 삭제하고 할 필요 없음. 반응형도 거뜬하다. 사파리 등 브라우저들의 이전버전에서는 지원 안한다니 참고. (아래 지원 안하는 브라우저에서 쓰는 방법 참고) /* 단일 값 */ gap: 20px; gap: 1em; gap: 3vmin; gap: 0.5cm; /* 단일 값 */ gap: 16%; gap: 100%; /* 이중 값 */ gap: 20px 10px; gap: 1em 0.5em; gap: 3vmin 2vmax; gap: 0.5cm 2mm; /* 이중 또는 혼합 값 */ gap: 16% 100%; gap: 21px 82%; /* cal..

[드림코딩] 콜백함수 (4) : 콜백지옥 탈출, Promise (callback hell 코드개선하기)

Callback Hell 예시 이전시간에 만들었던 콜백지옥 예시다. // 기본세팅 class UserStorage { loginUser(id, password, onSuccess, onError) { setTimeout(() => { if ( (id === 'master' && password === 'master00') || (id === 'submaster' && password === 'submaster00') ) { onSuccess(id); } else { onError(new Error('not found')); } }, 2000); } getRoles(user, onSuccess, onError) { setTimeout(() => { if (user === 'master') { onSucce..

[드림코딩] 콜백함수 (3) : promise로 Error Handling하기 (reject, catch 활용)

Error Handling const turnonLaptop = () => new Promise((resolve, reject) => { setTimeout(() => resolve(`노트북 실행.`), 1000); }); const loginBlog = blog => new Promise((resolve, reject) => { setTimeout(() => reject(new Error(`Error! ${blog} => 블로그 진입.`)), 1000); }); const writePost = post => new Promise ((resolve, reject) => { setTimeout(() => resolve(`${post} => 게시 완료.`), 1000); }); producer 코드를 작성했..

뒤늦게 알아서 뼈아픈 유용한 CSS : webkit-box

여태까지 여러줄 텍스트를 overflow hidden하기 위해 max-height를 설정하는 뻘짓거리를 해왔다. 반응형에서는 심지어 구간별로 바꿔주기까지 했는데.. 문득 그런 css가 없을리 없다는 생각이 들었다. 역시나.. 바로 나왔다. ㅠㅠ .example p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; } 호환성 : 전부 가능

여태까지 고쳐온 오류들 : 사파리 video가 안보인다/재생도 안 된다

사파리에서 videos태그로 걸어둔 video가 안 보이는(정확히는 재생버튼만 허공에 떠있는) 경우가 있다. 버튼을 눌러도 재생되지 않는데, 이 경우 확장자가 webm인지 확인해보자. 사파리는 webm 확장자를 못 읽는 듯 하다. + 사파리에서는 백그라운드 컬러를 지정해줘야 재생버튼이 허공에 둥둥 떠있지 않다. background-image로도 활용해 볼 수 있을 듯 하다..

기타 자주 쓰는 CSS : background 투명 블러 넣기

background-color: #193988a6; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);