타이머, 숫자 가변폭 폰트를 고정폭 폰트로 font-variant-numeric CSS 타이머 UI에서 숫자 값을 감싼 wrapper이 움직이는 문제가 있었다.이유는 날짜와 시간이 동적으로 들어가기때문에 고정폭을 적용하지 않은 UI였고, 이 때문에 발생했다.동영상을 잘보면 미세하게 끝이 움직인다. 적용 전 왜 이런 이슈가 생기는 걸까?고정폭 폰트, 가변폭 폰트가 각각 존재하기 때문이다.말 그대로 고정폭 폰트는 각 글자가 동일한 폭을 차지하며 가변폭은 글자의 폭이 동일하지 않는 폰트를 말한다. 이때는 어떻게 고정폭으로 적용할까?아래 CSS만 적용하면 바로 해결된다. *물론 사용하는 폰트가 OpenType 포맷이어야함font-variant-numeric: tabular-nums; 적용하고나니 숫자모두 동일한..
(work-break="keep-all") 골치 아픈 이슈 발견해서 기록상 작성
뒤에 필수표시(*)를 적용 시키려고 하다가 발견한 이슈로... word-break="keep-all"이 아닌 경우에는 붙이기가 굉장히 쉬웠다. 그냥 position: absolute해서 우측에 가져다가 붙이면 되니까. 여기서 이제 모바일에서 단어 기준으로 끊으려고 하다 발견. 떨어지는 공백 '자차'의 크기만큼 영역이 유지되고 있다. 따라서 떨어지는 글자수의 값이 다르면 필수표시(*)의 위치 값도 달라진다. 중요한 이슈가 아니다보니, 그냥 줄 바꿈 처리를 위해서 문자열 끝에 붙이기로 했다.
크롬 사용자에이전트 문자열(UA, User agent string) 점진적 삭제
사용자에이전트란? " 사용자 에이전트는 사용자를 대신하여 일을 수행하는 소프트웨어 에이전트이다. 예를 들어, 이메일 리더에서는 메일 사용자 에이전트이고, 사용자 에이전트를 뜻하는 용어인 세션 개시 프로토콜에서는 통신 세션 양 쪽 끝을 말한다 " - 위키백과 주로 User agent string로 브라우저를 체크하여 방문자를 분기하는 작업을 할때 쓰고는 했습니다. 브라우저를 체크하는 스크립트에서 user agent를 사용한 예시를 보겠습니다. 점진적 삭제를 결심하게된 이유 개인정보 강화 - UA(User agent string)에는 브라우저이름, 브라우저버전, OS이름, OS버전등을 담고 있기 때문입니다. 구글 측 "한번 사용한 매케니즘이 다른 측면의 골치거리가 됐다." 정리가 잘 된 글 https://k..
input 태그 타입 checkbox, radio 스타일 커스텀하기
checkbox를 커스텀하는 예제입니다. radio도 똑같은 방법으로 커스텀하면 될 것 같습니다. HTML 환불 계좌 정보를 정확하게 입력하였습니다. CSS .wrap input[type="checkbox"]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } .wrap input[type="checkbox"] + label{ display:inline-block; position:relative; padding-left:26px; cursor:pointer; } .wrap input[type="checkbox"] + label:before{ cont..