Huzylog

카테고리CSS 값예제설명일반링크와 상태선택드래그 앤 드롭크기 조절과 스크롤확대와 축소

const isJson = (str: string) => {
  try {
    const json = JSON.parse(str);
    return json && typeof json === 'object';
  } catch (e) {
    return false;
  }
};

Copy & Paste 시에 텍스트만 가져오도록 처리 onpaste 이벤트에 걸면된다.

const getTextByPasteClipboard = (e) => {
  e.preventDefault();
  let text;
  const clp = (e.originalEvent || e).clipboardData;
  if (clp === undefined || clp === null) {
    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
    // @ts-ignore
    text = window.clipboardData.getData('text') || '';
    if (text !== '') {
      text = text.replace(/<[^>]*>/g, '');
      if (window.getSelection) {
        const newNode = document.createElement('span');
        newNode.innerHTML = text;
        window.getSelection().getRangeAt(0).insertNode(newNode);
      } else {
        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
        // @ts-ignore
        document.selection.createRange().pasteHTML(text);
      }
    }
  } else {
    text = clp.getData('text/plain') || '';
    if (text) {
      text = text.replace(/<[^>]*>/g, '');
      document.execCommand('insertText', false, text);
    }
  }
};

const getImageSize = (file: File, callback: (width: number, height: number) => void) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (e) => {
    const image = new Image();
    image.src = e.target.result as string;
    image.onload = function () {
      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
      // @ts-ignore
      callback(this.width, this.height);
    };
  };
}

div에 overflow를 사용해 scroll 를 만들었을때, ios 등에서 smooth scroll이 안될 경우.

* {
    -webkit-overflow-scrolling: touch;
}

위 코드 삽입. * 로 설정은 부담이 될 수 있으므로 해당 태그에만 적용시켜도 된다.

프로젝트에서 상단 하단 position:fixed된 레이아웃 상태에서

아이폰X 웹뷰 대응 방법이다.

1. 메타태그 뷰포트쪽에 viewport-fit=cover 를 추가
2. padding-top: env(safe-area-inset-bottom);

2번의 속성값을 응용하는 건데 기본적으로

env(safe-area-inset-bottom); // IOS 11.0 이상 (신)
constant(safe-area-inset-bottom); // IOS 11.0 버전 (구)ios 11.2 업데이트에서 constant가 제거됨 env를 사용.

해당 값이 필요한 부분에 위값을 응용하여 집어 넣었다. (저는 커스텀한곳에 위 env,constant 둘다 삽입 했습니다;)

safe-area-inset의 기본값이 있어 값을 수정하고 싶으면

padding-bottom: calc(env(safe-area-inset-bottom) - 5px);

css의 calc를 사용하여 원하는 곳에 속성을 추가한후 값을 조절해서 사용하면 되겠다.

예제 )

1. 하단에 고정 버튼이 있다고 할때.

수정 전

수정 후

2. 위의 수정 후사진처럼 변경을 하려면

// 기본 CSS
.button-fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
background: #fff;
}
// 변경값을 줄 클래스
.button-fixed-bottom {
padding: 12px 16px; // 기본 값을 지정해 준후
padding: 12px 16px calc(constant(safe-area-inset-bottom) + 12px) 16px; // 변경이 필요한 부분은 하단의 패딩값이기 때문에 constant로 구버전 값을 넣고
padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px) 16px;
} // env로 신규버전 값을 넣어준다.

3. constant / env 값을 둘다 추가해야 IOS 구버전, 신버전 대응이 가능하다

참고 : 링크

I just played with this CodePen and it seems that if you set the background-color to transparent for all three properties below (and in this example also remove box-shadows), the scrollbar is not visible at all:

#style-1::-webkit-scrollbar-track {
  //    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
  background-color: transparent;
}

#style-1::-webkit-scrollbar {
  background-color: transparent;
}

#style-1::-webkit-scrollbar-thumb {
  //    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: transparent;
}

This was tested in Chrome Desktop, Chrome for Android, and iOS Safari (v8.4) on an iPhone 6+.

I would however recommend for user experience (usability/accessibility) to keep the scrollbar visible though, as even I, knowing what I was doing, got a bit confused when there was no scrollbar.

저금리시대, 지금 시대를 이렇게 표현하고는 하는데 왠일인지 고금리 적금 상품들이 연일 쏟아져 나온다. 어찌된 일일까. 일단 지금 나오는 고금리 적금 상품은 크게 2가지로 나뉘는 것으로 보인다. 

1. 이벤트성, 그러나 금액과 기간이 짧다.

입금가능 최대 금액이 20~30만원에 불과하고 기간도 6개월에서 12개월이 전부다. 핀크같이 24개월짜리도 나오긴 했으나 SKT 요금제 5만원이상 조건을 갖고있다. 이자가 5% 7% 라고 해도 이자수익이 5만원, 7만원에 불과하다. 하지만 알뜰한 사람들은 이 돈도 큰 돈이다. 

1번의 경우 우대금리 조건을 따져 2%대 이상만 되어도 가입하는게 사실 이득이다. 예금금리가 1%도 안되는 0%대에 진입했기 때문에 예금 입출금계좌에 돈을 놀게 냅두는건 정말 상상조차 할 수 없는 짓이다. (필자는 혹시몰라 천원 남겨놨다.)

2. 신용카드 사용조건

은행은 기본금리를 제공하고, 신용카드를 일정 금액이상 사용시 혜택을 제공하는 식이다. 근데 여기서 중요한게 있는데 신용카드를 발급하게 되면 연회비가 발생하고, 또 신용카드를 발급할때 페이백을 받으며 개설하는것은 거의 국룰이다. 그 페이백 국룰의 현재 수준은 8만원선에서 12만원 선으로 (토스, 카뱅참고) 10만원 안팎의 비용 지출시 페이백이 된다. 

한번 더 강조하자면 신용카드 사용조건으로 고금리 적금을 제공할때 이자수익과, 사용해야하는 금액조건이 있을때, "XX카드 이용실적이 N개월간 없는 고객" 이라는게 있는지 꼭 보도록 하자. 위에 국룰보다 더 싸게 신용카드 고객을 낼름 하려는 수작이 아닐 수 없다. 기존 자사 카드를 사용중인 고객은 가입조차 할 수 없는 적금인 셈이다. 

당연히 가입안하는게 정상이며 페이백도 받고 적금 금리도 제공받을수 있는지는 카드사에 문의를 해보아야 겠지만, (왠지 안해주겠지..?) 적금 가입 Process 에서 카드발급을 병행하고 있기 때문에 될리가 없으리라 예상한다.