본문 바로가기
  • search_ _ _ _
  • search_ _ _ _
  • search_ _ _ _

분류 전체보기51

[JavaScript] Sprite Sheets 애니메이션 1. html- canvas 태그 생성   2. cssbody{ position: relative; height: 100vh;}canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color:rgb(248 224 217);} 3. javascript 1). 이미지 호출 - drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)매개변수(sx, sy)는 스프라이트 시트(소스)의 시작 위치,(dx, dy)는 캔버스(대상)의 시작 위치며 기본적으로 왼쪽 상단이 (0.. 2024. 6. 14.
[JavaScript] 스크롤 애니메이션 (Apple 제품 페이지) 1. html- canvas 태그 생성  2. css - 스크롤시  호출되는 이미지는 화면의 중앙에 위치 해야하므로 fixed사용body{ width: 100vw; height: 500vh; background-color: #000;}canvas{ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 50vw; max-height: 50vh;} 3. javascript_1const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); .. 2024. 6. 13.
[Aura] renderAs="pdf" 속성 renderAs="pdf" 속성  작업하면서 어려움이 많았다. 내가 발견한 어려움    1. dl,dd,dt 태그 안됨- 정확히 말하면 css에서 준 속성이 적용이 안된다.  2. css에서 flex 안됨- 당연히 grid 안된다.  3. font-family: Arial Unicode MS !important; - pdf 전환시 이 폰트만 한글을 지원한다.-없으면 한글 출력자체가 안됨  4. Arial Unicode MS Arial Unicode MS doesn’t support bold or italic font-weight.- Arial Unicode MS은 bold가 되지 않는다!! 애초에 지원을 하지 않기 때문!-이것 때문에 시간을 많이 뺏음;;https://developer.salesforce.. 2024. 5. 8.
[JavaScript] 웹페이지 scroll이벤트 -상단에 네비를 클릭하면 매칭되는 컨텐츠 페이지 이동-스크롤시 컨텐츠와 매칭되는 네비에 이벤트 ***html 1 2 3 4 1 2 3 4  const $link = [...document.querySelectorAll('a')];const $scroll = document.querySelector('.scroll-container');const $page = [...$scroll.querySelectorAll('.scroll-page')];$link.forEach((_,i) => { _.addEventListener('click', (e) => { //$link(상단의 숫자)를 클릭시 이벤트 실행 e.preventDefaul.. 2024. 4. 25.
[CSS] scroll-* 유연한 스크롤을 만들어주는 CSS속성 scroll-* 1. scroll-* 사용법컨텐츠 영역과 컨텐츠를 감싸는 부모 요소를 만든다. 1 2 3 4    See the Pen scroll-* by gaae (@gaae) on CodePen. 2. scroll-behavior 속성scroll-behavior :   auto   |   smooth   |   initial   |   inherit문서이동시 스크롤 효과를 준다.  컨텐츠 감싸는 부모요소    ex) scroll-container · auto : 직선점프 효과. 기본값· smooth  : 부드러운 c롤 효과· initial  : 초기 기본값 설정· inherit : 상위요.. 2024. 4. 23.
[JavaScript] style.setProperty() ChatGPT에게 style.setProperty()에 대해 물어보았다. ChatGPT 'style.setProperty' 메소드는 JavaScript를 사용하여 HTML 요소의 스타일 속성을 동적으로 설정하거나 업데이트할 때 사용됩니다. 이 메소드는 CSS 스타일 속성의 이름과 값을 매개변수로 받아서 해당 요소의 스타일을 설정할 수 있게 해줍니다. 이 방법은 CSS 속성 이름을 문자열로 직접 지정하기 때문에 표준 CSS 속성 이름을 사용해야 하며, JavaScript에서 일반적으로 사용하는 camelCase 대신 CSS에서 사용하는 kebab-case를 사용해야 합니다. 사용 방법 'style.setProperty(propertyName, value, priority)' 메소드는 세 가지 매개변수를 받.. 2024. 4. 19.

티스토리툴바