Peep

타이머, 숫자 가변폭 폰트를 고정폭 폰트로 

font-variant-numeric CSS

타이머 UI에서 숫자 값을 감싼 wrapper이 움직이는 문제가 있었다.

이유는 날짜와 시간이 동적으로 들어가기때문에 고정폭을 적용하지 않은 UI였고, 이 때문에 발생했다.

동영상을 잘보면 미세하게 끝이 움직인다.

적용 전

왜 이런 이슈가 생기는 걸까?

고정폭 폰트, 가변폭 폰트가 각각 존재하기 때문이다.

말 그대로 고정폭 폰트는 각 글자가 동일한 폭을 차지하며 가변폭은 글자의 폭이 동일하지 않는 폰트를 말한다.

이때는 어떻게 고정폭으로 적용할까?

아래 CSS만 적용하면 바로 해결된다. *물론 사용하는 폰트가 OpenType 포맷이어야함

font-variant-numeric: tabular-nums;

적용하고나니 숫자모두 동일한 고정폭을 가지게 되었기 때문에 시간초가 줄어도 끝이 움직이지 않는다.

적용 후 

숫자의 폭이 동일해졌으므로, 숫자 정렬이 깔끔하다.

font-variant-numeric의 속성에는

proportional-nums(가변폭),

tabular-nums(고정폭) 외에도

lining-nums, oldstyle-nums,, diagonal-fractions, stacked-fractions 같은 속성들이 존재한다.

아 자고로, 해당 속성은 OpenType 기능을 지원하는 폰트만 사용 가능하다는데....

OpenType은 폰트 포맷의 하나로 Microsoft와 Adobe가 공동으로 개발한 디지털 서체 기술이라고 한다.

단일 파일로 여러 언어와 스크립트를 지원하도록 설계되었고, 글꼴의 고급 렌더링을 지원한다. (=> font-variant-numeric도 때문에 사용 가능.)

css도 끝없이 공부해야 몸이 고생안하는듯 하다!

뒤에 필수표시(*)를 적용 시키려고 하다가 발견한 이슈로...

word-break="keep-all"이 아닌 경우에는 붙이기가 굉장히 쉬웠다.

그냥 position: absolute해서 우측에 가져다가 붙이면 되니까.

여기서 이제 모바일에서 단어 기준으로 끊으려고 하다 발견.

떨어지는 공백 '자차'의 크기만큼 영역이 유지되고 있다.

따라서 떨어지는 글자수의 값이 다르면 필수표시(*)의 위치 값도 달라진다.

중요한 이슈가 아니다보니, 그냥 줄 바꿈 처리를 위해서 문자열 끝에 붙이기로 했다.

사용자에이전트란?

"

사용자 에이전트는 사용자를 대신하여 일을 수행하는 소프트웨어 에이전트이다.

예를 들어, 이메일 리더에서는 메일 사용자 에이전트이고, 사용자 에이전트를 뜻하는 용어인 세션 개시 프로토콜에서는 통신 세션 양 쪽 끝을 말한다

"
- 위키백과

주로 User agent string로 브라우저를 체크하여 방문자를 분기하는 작업을 할때 쓰고는 했습니다.

브라우저를 체크하는 스크립트에서 user agent를 사용한 예시를 보겠습니다.

점진적 삭제를 결심하게된 이유

개인정보 강화

- UA(User agent string)에는 브라우저이름, 브라우저버전, OS이름, OS버전등을 담고 있기 때문입니다.

구글 측 "한번 사용한 매케니즘이 다른 측면의 골치거리가 됐다."

정리가 잘 된 글

https://kkumalog.tistory.com/81

계획

- chrome 81(2020/3) : 경고 표시

- chrome 83(2020/6) : 버전 정지, OS 버전 통합

- chrome 85(2020/9) : 데스크톱 OS 문자열 브라우저 공통 값으로 통합, 모바일 OS/ 기기 문자열 비슷한 공통값으로 통합

또한 타 브라우저들도 UA 점진적 삭제를 지지한다고 표명했습니다.

하지만 시행 여부 및 시행일자는 확정되지않았습니다.

점진적 삭제에 대한 기사

국내 https://www.zdnet.co.kr/view/?no=20200115102836:

국외 https://www.zdnet.com/article/google-to-phase-out-user-agent-strings-in-chrome/

대안으로 나온 client Hint

https://wicg.github.io/ua-client-hints/

client hint 메타태그 예시

https://frontdev.tistory.com/entry/%EC%9D%B4%EB%AF%B8%EC%A7%80-User-Agent%EA%B0%80-%EC%82%AC%EB%9D%BC%EC%A7%84%EB%8B%A4%EA%B3%A0-%EC%9D%B4%EB%AF%B8%EC%A7%80-Client-Hints-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

javascript 예시

https://medium.com/@galmeiri/get-ready-for-chrome-user-agent-string-phase-out-c6840da1c31e

관련해서 읽어볼 유익한글

User-Agent Client Hints의 도입, UA 프리징을 대비하라

d2.naver.com/helloworld/6532276

checkbox를 커스텀하는 예제입니다. radio도 똑같은 방법으로 커스텀하면 될 것 같습니다.

HTML

<div class="wrap">
  <input id="agree" type="checkbox">
  <label for="agree">
    <span>환불 계좌 정보를 정확하게 입력하였습니다.</span>
  </label>
</div>

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{ 
	content:''; 
    position:absolute; 
    left:0; 
    top:3px; 
    width:18px; 
    height:18px; 
    text-align:center; 
    background:#fff; 
    border:1px solid #ccc; 
    box-sizing:border-box; 
}

/* 보여질 부분의 스타일을 추가하면 된다. */
.wrap input[type="checkbox"]:checked + label:after{ 
	content: ''; 
    position:absolute; 
    top:3px; 
    left:0; 
    width:18px; 
    height:18px; 
    background-color:skyblue;
}

예제

See the Pen xxwMxYX by leeyoonseo (@okayoon) on CodePen.