본문 바로가기

전체 글385

[ 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.
한 달 동안 이용해본 class101 간략 후기 클래스101에서 구독제로 변경이 되면서 무려 1,000원에 한 달 동안 사이트를 이용해볼 수 있는 이벤트를 하길래 바쁜 플젝 중에도 저렴한 가격과 호기심에 홀딱 신청해보았고, 간간히 출퇴근길에 보면서 개인적으로 느낀점을 적어본다. (이용환경: iOS, Safari Browser) 제가 느끼기에 사이트를 이용할 때 제일 먼저 느낀 점은 다른 학습 사이트와는 달리 각 클래스마다 미리보기 사진 퀄리티가 굉장히 이쁘다는 것~ 즉, 다크한 배경에 심플하면서 퀄리티 있는 사진을 통해 사용자에게 각각의 클래스에 대해 신경을 쓰고 있다는 느낌과 전문가적 아우라를 느끼게 해주며, 배움에 대한 호기심을 높여주는 역할을 잘 해내고 있는 것 같다. 커리큘럼과 자료 정리까지 잘 정리되어 있는 부분이나 영상을 시청할 때 집중할 .. 2023. 1. 30.
[vscode 테마] Bearded Theme vscode 수많은 테마 중 제가 사용하고 있는 테마가 바로 "Bearded Theme". 그동안 노트패드, 에디트플러스, 어도비 브라켓, 서브라임텍스트, 인텔리J, 이클립스까지... 여러가지 편집 프로그램을 사용하면서 가장 공을 들이는 부분 중 하나가 바로 컬러테마 고르는 일 같은데~ 비주얼스튜디오코드(vscode)를 접하면서 구글에 추천 테마가 뭐 있나 정말 많이 찾아보기도 하고, 무작정 익스텐션 리스트에 있는 테마를 설치해보기도 했는데, 그 중에서 단연 "Bearded Theme"가 꽤 마음에 들어 현재 집과 회사에서 사용하고 있는 중이다. vscode에 Extension이나 마켓플레이스에서 설치 가능하다. "Bearded Theme"를 설치하면 30여개의 테마가 있는데, 개인적으로 컬러들을 잘 뽑.. 2023. 1. 25.
host 파일 위치와 관리자 권한 문제 호스트 파일 경로 C:\Windows\System32\drivers\etc 그런데, 윈도우 버전에 따라 관리자 권한이 필요하다. 폴더에서 직접 찾아 들어가서 hosts를 실행 및 수정하는 경우 위와 같이 안 되는 경우가 발생하기도 하는데, 이때는 먼저 메모장을 관리자 권한으로 실행한 후, 메모장 메뉴에서 "파일 > 열기"를 통해 hosts파일을 찾아 들어가면 된다. 2023. 1. 10.
CSS grid 간략 공부 개인적으로 지금까지 실무에서는 grid는 1도 사용하지 않고 있었다. 그 이유는 역시 익스플로러였...ㅋ 그러나 caniuse.com에서 살펴보니 ie를 제외하고는 거의 대부분의 브라우저에서 grid 사용이 가능하기 때문에 실무에서도 적극적으로 사용해보려고 한다. 코드 이제 아래 코드 예제로 간략히 알아본다. /* HTML */ ... ... ... ... /* css */ 위에서 조금 이해가 어려운 부분은 .item에 준 grid-column과 grid-row 속성값. 1/4, 2/4와 같이 수학의 분수처럼 표현된 부분은 calc와 같이 계산을 하는 것이 아니라 grid에서의 꼭짓점 좌표를 나타냄. 즉, 위와 같은 grid박스가 있다고 한 경우, 1/4는 꼭짓점 1번부터 4번까지, 2/4는 2번부터 4.. 2023. 1. 10.
728x90
반응형

티스토리툴바