본문 바로가기

WWWEB107

[UI/UX] gent.midea (패럴럭스, SVG, canvas 등) https://www.gent.media/ 사이트를 보고, 다양하게 참고해볼만한 것들이 많아 이러저리 살펴봄. ABOUT - 타이틀인 "award-winningdesigner/creativedeveloper" 글자는 각 글자를 태그로 감싸서 animation-delay를 이용. - 나머지 작은 글자들을 모두 으로 감싸기는 어려우니 아래에서 위로 올라오는 모션을 줌. - GENT - about 페이지와 동이한 타이포 애니메이션. - 스크롤다운 아이콘 효과. - canvas로 구현한 우주 효과... 아마도 three.js인 듯 - 스크롤을 없애고, 페이지 길이를 오른쪽 bar로 줌. - 포폴사이트들의 패럴럭스 효과가 괜춘~ 2023. 5. 4.
[css] clip-path를 이용한 텍스트 안 wave 애니메이션 열심히 일하며 달려오다가 잠깐 시간이 되서, 그동안 생각만 하고 있던 wave 효과들을 한 번 나중에 써먹어볼 생각으로 구글링 하던 중 지금까지 생각하지 못한 clip-path 방법으로 wave 효과를 주는 방법이 있어서 따라해 봄~ 일단 결과물은... 직접 해보니 쉽게 구현이 가능함.🙀 예시 코드 minitoy 코드를 보면 글자 안에 들어가있는 것처럼 보이게 하는 핵심 코드는 바로 clip-path임. clip-path clip-path는 inset, circle, ellipse, polygon와 같이 기본적인 도형부터 직접 도형을 그릴 수 있는 path()도 가능함. (포토샵의 path툴처럼!) 이제 왠만해서 포토샵에 있는 기본적인 기능들은 브라우저에서 가능한 느낌이... 혹시 크롬에서만 되는게 아닌.. 2023. 4. 26.
[ js ] 스크립트 동적 생성하기 - 스크립트는 동적으로 추가하여 실행하는 경우 async와 같이 비동기로 실행됨. - 즉, 스크립트가 추가가 되는 즉시 다운로드를 시작하며, 다운로드가 완료되면 바로 실행함. - 아래와 같이 "js.async=false"를 주는 경우에 스크립트는 문서에 추가된 순서대로 실행하게 됨. let js = document.createElement( "script" ); js.src = "async-script.js"; js.async = false; // 문서에 추가된 순서대로 실행해야 하는 경우 사용. document.body.append(script); // body에 추가. 2023. 4. 25.
[ js ] defer vs async 브라우저는 HTML을 읽을 때 태그를 만나면 DOM생성을 멈추고 스크립트를 먼저 실행하는데, 이런 경우 아래와 같은 문제점이 발생함. 1. 스크립트가 먼저 작성된 경우 DOM요소에 접근할 수 없음. 2. 스크립트의 크기가 큰 경우 해당 스크립트를 다운받고 실행할 때까지 아래쪽 페이지를 볼 수 없음. 이런 문제를 해결할 수 있는 속성이 바로 defer와 async임. 두 속성은 기본적으로 페이지 렌더링을 막지 않는 공통점을 갖고 있으나 아래와 같은 차이점이 있음. defer - 페이지 생성을 막지 않아 페이지 콘텐츠가 바로 출력됨. - DOM이 준비된 후 실행됨. - DOMContentLoaded 이벤트 발생 전 실행됨. - 스크립트 크기와 상관없이 작성 순서에 맞게 실행됨. - 에 src 속성이 없으면 .. 2023. 4. 25.
단어가 짧을 때 양쪽 정렬(text-align: justify) 방법 [only css] 글의 길이가 길지 않을 때 justify 속성이 잘 먹지 않는데, 해당 요소에 width 값과 text-align: justify를 주고, 가상요소인 :after가 핵심인데, display: inline-block 및 width: 100%를 주면 justify 속성을 적용할 수 있다. 아래 코드를 참고해보자. 코드 이 름 휴 대 전 화 이 메 일 ※ 주의: 강제로 준 width보다 글자의 길이가 큰 경우를 깨질 수 있음~ ※ 수동으로 길이를 맞춰야하다 보니 2023. 4. 11.
[ css ] position: sticky가 안 먹는 경우, 적용 조건 기존에 스크립트를 이용해서 스크롤 이벤트로 만들었던 sticky 네비는 css에서 "position: sticky"을 쓰는 것만으로도 간단히 적용할 수 있는데, 가끔 요 스티키를 써도 안 먹는 경우가 있는데, position: sticky가 동작이 안되는 경우, 아래 체크 리스트를 참고해! check list ① sticky 속성을 준 엘리먼트에 top, left, right, bottom를 같이 줘야 함. → sticky는 top, left, right, bottom 중 하나 이상 같이 사용해야 한다. ② 부모 노드에 height를 확인해 보자. → height: OO%와 같이 퍼센트로 설정하면 동작하지 않음. (height: auto, height: OOpx, height: OOem, height: .. 2023. 3. 28.
[ js ] 크로스도메인에서 iframe 높이값 자동 처리하기 서로 다른 도메인을 가진 아이프레임 페이지를 부른 후 높이값을 맞춰주고 싶은데, top.document, parent.frame 등과 같이 직접 접근이 불가하다. 이 경우 window.postMessage() method를 사용하면 되는데, 이 method는 윈도우 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 한다. 아래 예시 코드로 확인해보자. 부모 페이지 (parent-site) function fn_postMessageController( e ){ if( e.origin === "http://child-site.com" ){ document.querySelector( "#iframe-id" ).setAttribute( "height", parseInt( e.data ) );.. 2023. 3. 2.
[css] 말줄임 여러 줄 예시 여러 줄 말줄임을 사용할 경우 한 줄 말줄임에서 사용하는 "display" 속성 변경 및 "white-space: nowrap"을 삭제하고, "-webkit-line-clamp"와 "-webkit-box-orient"를 사용하면 된다. 예시 코드 /* 한 줄 말줄임 */ .single-line-ellipsis{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 여러 줄 말줄임 */ .multi-line-ellipsis{ display: -webkit-box; overflow: hidden; max-height: 3em; line-height: 1.5; text-overflow: ellipsis; -web.. 2023. 2. 14.
gude-**.log 파일 생성 버그 언제부터 폴더에 gude-***.log과 같은 파일이 만들어져 있다. 해킹......? ...은 다행히 아니었고, -_- 어도비 커뮤니티에 찾아 들어가보니 현재 버전 오류라고 이미 알고 있어서 고쳐줄거라고 한다. https://community.adobe.com/t5/photoshop-ecosystem-bugs/p-photoshop-gude-log-created-when-working-with-files/idi-p/12878831 + 추가 포토샵 버전 24.2 이후 고쳤다고 함 자동 업데이트를 설정해놓지 않았다면, 포토샵 메뉴에 Help > Updates...를 해보자! https://community.adobe.com/t5/photoshop-ecosystem-bugs/p-photoshop-creates.. 2023. 2. 3.
728x90
반응형