본문 바로가기

POST LIST489

[ 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.
아이들과 함께 하남 워터파크 오랜만에 시간을 내서 아이들과 하남 스타필드에 있는 아쿠아필드에 다녀왔다. 코로나19 이전에는 워터파크를 잘 데리고 다녔었는데, 드디어 3년만에 마스크를 벗고 워터파크를 방문~ 점심시간에 사람이 몰려서 그런지 식당쪽 청소가 아쉬운 부분이 있었지만 실내 온도 및 물도 아주 따뜻해서 놀기 딱 좋았고, 수질도 괜찮았다. 무엇보다 아이들이 아주아주 즐거워하는 모습을 볼 수 있어서 행복한 하루였다. 이용팁 1. 결제 : 네이버멤버십으로 예약하는게 가장 저렴했다. 2. 주차 : 스타필드가 넓어서 주차는 최대한 워터파크 입구 근처로(건물 중앙쯤)... 3. 사람 : 시간이 지날 수록 많아지는 사람들. 일찍 가는게 좋은 듯~ 4. 준비물 : 다른 워터파크와 달리 모자를 쓰지 않아도 됐고, 구명조끼는 120cm이하는 필.. 2023. 2. 20.
[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.
css3 카드 뒤집기 효과 (backface-visibility: hidden;) 카드를 뒤집는 효과를 줄 때 기억해야 할 css는 1. 카드 앞뒷면에 적용해야 할 "backface-visibility: hidden;" 2. 카드를 3d 적용을 위해 카드 앞뒷면의 부모에게 적용해야 할 "transform: preserve-3d;"가 있다. 속성 설명 transform: preserve-3d; 자식 요소들에게 3d 적용 속성 (부모에게 적용) backface-visibility: hidden; 요소를 180도로 돌렸을 때 뒷면 숨김처리 아래 예시 짤과 예시 코드를 참고~ 코드 ... 2023. 1. 31.
728x90
반응형