주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

타이머, 숫자 가변폭 폰트를 고정폭 폰트로 font-variant-numeric CSS 타이머 UI에서 숫자 값을 감싼 wrapper이 움직이는 문제가 있었다.이유는 날짜와 시간이 동적으로 들어가기때문에 고정폭을 적용하지 않은 UI였고, 이 때문에 발생했다.동영상을 잘보면 미세하게 끝이 움직인다. 적용 전 왜 이런 이슈가 생기는 걸까?고정폭 폰트, 가변폭 폰트가 각각 존재하기 때문이다.말 그대로 고정폭 폰트는 각 글자가 동일한 폭을 차지하며 가변폭은 글자의 폭이 동일하지 않는 폰트를 말한다. 이때는 어떻게 고정폭으로 적용할까?아래 CSS만 적용하면 바로 해결된다. *물론 사용하는 폰트가 OpenType 포맷이어야함font-variant-numeric: tabular-nums; 적용하고나니 숫자모두 동일한..

뒤에 필수표시(*)를 적용 시키려고 하다가 발견한 이슈로... word-break="keep-all"이 아닌 경우에는 붙이기가 굉장히 쉬웠다. 그냥 position: absolute해서 우측에 가져다가 붙이면 되니까. 여기서 이제 모바일에서 단어 기준으로 끊으려고 하다 발견. 떨어지는 공백 '자차'의 크기만큼 영역이 유지되고 있다. 따라서 떨어지는 글자수의 값이 다르면 필수표시(*)의 위치 값도 달라진다. 중요한 이슈가 아니다보니, 그냥 줄 바꿈 처리를 위해서 문자열 끝에 붙이기로 했다.

라이브러리를 사용할때, 보통 class나 id는 지정되있기 마련이죠. 또한 이런 것을 수정해야하는 경우도 종종 생깁니다. 이때 css를 수정하는 방법을 알아보도록 하겠습니다.! (next, styled-components 사용 방법입니다.) 첫번째 방법은 css 파일을 import하는 방법입니다. 즉 전체 페이지에 대한 스타일시트를 가져오는 방법입니다. 먼저 pages/ 폴더 하위에 _app.js 파일을 생성한 후 스타일시트를 import해주면 됩니다. import '../styles.css'; export default function MyApp({ Component, pageProps }) { return } https://nextjs.org/docs/basic-features/built-in-css..

(강의내용과 큰 상관없습니다. 강의 듣고 결과물 만드는 작업 중입니다.) 작업물에 wifi 애니메이션이 필요해서 제작해보기로했습니다. 뭐 대충 이런거.. 딱히 기능은 없고 css 애니메이션으로만.. codepen.io에서 간단한 코드를 발견해서 크기만 수정해서 사용하기로 했습니다. 감사합니다 ㅎㅎ 코드 출처입니다. https://codepen.io/roncallyt/pen/GymuE Wifi signal, pure CSS Português: Fazendo um sinal de wifi usando somente CSS e animações CSS3 através da regra @keyframes. English: Making a wifi signal using only CSS and ... codepe..