무찌르자 단팥빵 무찌르자 단팥빵

canvas size 이해devicePixelRatio(dpr)은하나의 css 픽셀을 그릴 때 사용되는 장치의 픽셀 수이다. dpr이 다르더라도 보여지는 모습이 달라지지 않도록 구현하는 방법을 알아본다.내용의 출처는 맛있는 코딩 님 강의에서 가져왔다.     const canvas = document.querySelector('canvas');canvas.style.backgroundColor = 'gold';const ctx = canvas.getContext('2d');const dpr = window.devicePixelRatio;const canvasWidth = 400;const canvasHeight = 400;canvas.width = canvasWidth * dpr;canvas.height..

Material Symbols, Material Icons 사용 방법 Material Symbols, Material Icons 차이점 https://fonts.google.com/icons 에 들어가면 아이콘의 스타일이 Material Symbols(default) 와 Material Icons으로 나뉘어져 있다. 이 둘 모두 구글의 공식 아이콘 세트이다. Material Icons는 클래식 세트인 반면 Material Symbols는 가변 글꼴 기술을 기반으로 2022년 4월에 도입되었다. Material Symbols 는 세 가지 스타일과 4가지의 조정 가능한 가변 글꼴 축 (채우기, 두께, 등급, 광학 크기)으로 제공된다. 아래는 현재 Material Icons에서 사용할 수 없는 기능이다. va..

noto sans 웹폰트 다운로드 사용 방법 cdn을 걷어내기 위해 웹폰트를 다운로드하여 사용하게 되었다. 아래 글은 그 여정을 돌아보며 특별히 noto sans kr 웹폰트 사용 방법을 정리한 내용이다. noto sans 웹폰트를 어디서 다운로드 받아야 하는지, 어떤 파일타입을 받아야 하는지, css에 폰트 설정을 어떻게 해야 하는지 위 세 가지를 중점으로 살펴 본다. 먼저 웹에서 사용하는 폰트는 압축률이 좋은 woff2 혹은 모든 브라우저에서 지원하고 w3에서 추천하는 woff 타입을 사용해야 한다. 뒤에서 다시 살펴 보겠지만, @font-face src 속성에 적을 때도 woff2 url를 먼저 적고 그 다음 woff url을 적는다. woff2, woff 타입으로 noto sans kr 다운로드 ..

transform-origin : 요소 변환의 기준점을 설정 transform-style : 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정 flat : 자식 요소의 3D 변환을 사용하지 않음 default preserve-3d : 자식 요소의 3D 변환을 사용함 perspective : 하위 요소를 관찰하는 원근 거리를 설정 persepective 속성은 관찰 대상의 부모(조상) 요소에 적용하여 하위 요소들을 관찰하는 원근거리를 설정, 기준점 설정 perspective-origin transform:perspective() 변환함수는 관찰대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정, 기준점 설정 transform-origin perspective-origin : 원근 거리의 기준..

flex-basis flex의 item 요소 속성 중 flex-basis에 대해 정리해 본다. flex-basis를 제대로 알게되면 반응형을 의도 대로 정확하게 구현할 수 있다. flex-basis 값에 따라(auto, 0, 단위값) flex item 요소의 크기가 어떻게 결정되는지 아래의 예제를 보자. See the Pen flex test by sunghee (@dimorin) on CodePen. 출처 : https://heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible ..

테이블 헤더 고정 sticky thead 고정시키기 table의 tbody 내용이 많아지면, 스크롤에 넘어가지 않도록 thead를 고정시켜야 할 때 있다. thead 고정하는 방법 - datagrid 라이브러리 이를 구현하기 위해 datagrid 라이브러리를 사용하는 것이 가장 안정적이고 편하기도 하겠지만, 단순히 thead의 고정만을 위해 datagrid 라이브러리를 사용하는 것은 비효율적이다. thead 고정하는 방법 - 만으로 thead를 고정시키는 방법에 대해 서치를 해보면 몇 가지 방법이 나오는데, 모든 상황을 만족시키는 방법은 없다. 특히, table-layout 속성을 변형(fixed) 시키면서까지 헤더 고정 기능을 구현하는 방법은, 순수 이 가지고 있는 너무나 큰 장점들을 버리게 된다. (..

FontAwesome CSS Pseudo-elements ::before 와 같은 pseudo-element를 활용해 FontAwesome 아이콘을 페이지에 추가할 수 있다. CSS Pseudo-elements를 사용하여 아이콘을 정의하는 방법 가상요소 ::before ::after 둘 중 하나를 사용한다. 아래 표를 참고하여 font-family 값을 설정한다. 아래 표를 참고하여 font-weight 값을 설정한다. Style Availability @font-face weight @font-face font-family Solid Free Plan 900 Font Awesome 5 Free or Font Awesome 5 Pro (for pro users) Regular Pro Plan Requir..