맥에서 멀쩡하던 카드 레이아웃이 윈도우 모니터에서 너무 크게 보이는 문제를 고치면서 구조 자체를 뜯어고친 과정을 정리함. 문제: 모니터마다 카드 크기가 달라짐 맥에서 볼 때는 카드 높이가 적당했는데, 윈도우 모니터로 보니 카드가 너무 커졌음. 원인은 카드 높이를 65vh로 잡아놨기 때문이었음. vh는 뷰포트 높이 기준이라 모니터가 크면 그냥 비례해서 커짐. 가로폭도 마찬가지였음. 그리드 컨테이너를 max-width: 90vw로 잡아놨는데, 27인치 모니터에서는 90vw가 엄청 넓어짐. 카드 높이 고정 시도 처음엔 vh를 픽셀로 바꾸는 것만 해봤음. ...
Hugo + GitHub Pages로 블로그를 세팅하면서 겪은 문제들을 정리함. CSS가 아예 안 먹히는 문제 처음 배포했을 때 스타일이 전혀 적용되지 않았음. Chrome 개발자도구를 열어보니 이런 에러가 있었음. Failed to find a valid digest in the 'integrity' attribute for resource 'stylesheet.css' with computed SHA-256 integrity '...'. The resource has been blocked. SRI(Subresource Integrity) 해시 불일치 문제였음. Hugo는 빌드할 때 CSS 파일의 SHA-256 해시를 계산해서 HTML의 integrity 속성에 자동으로 박아줌. 브라우저는 이 값을 실제 파일이랑 대조해서 위변조 여부를 검증하는데, 값이 다르면 보안상의 이유로 파일 로드를 차단함. ...