본문 바로가기

WWWEB138

[ 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.
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.
[vscode 테마] Bearded Theme vscode 수많은 테마 중 제가 사용하고 있는 테마가 바로 "Bearded Theme". 그동안 노트패드, 에디트플러스, 어도비 브라켓, 서브라임텍스트, 인텔리J, 이클립스까지... 여러가지 편집 프로그램을 사용하면서 가장 공을 들이는 부분 중 하나가 바로 컬러테마 고르는 일 같은데~ 비주얼스튜디오코드(vscode)를 접하면서 구글에 추천 테마가 뭐 있나 정말 많이 찾아보기도 하고, 무작정 익스텐션 리스트에 있는 테마를 설치해보기도 했는데, 그 중에서 단연 "Bearded Theme"가 꽤 마음에 들어 현재 집과 회사에서 사용하고 있는 중이다. vscode에 Extension이나 마켓플레이스에서 설치 가능하다. "Bearded Theme"를 설치하면 30여개의 테마가 있는데, 개인적으로 컬러들을 잘 뽑.. 2023. 1. 25.
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.
https&http Mixed content 문제 오류 해결은 meta태그로 콘솔에서 Mixed Content 빨갛게 오류표기된 것을 발견했다. Mixed Content: The page at '{ ... }' was loaded over HTTPS, but requested an insecure script ' ... '. This request has been blocked; the content must be served over HTTPS. 번역 뭐라고 하는지 번역기를 돌려본다. https를 써서 파일을 제공하라는 의미~ 해결법 이 문제를 해결하기 위해서는 에 아래 를 넣어주면 간단히 해결된다. * 참고 url https://stackoverflow.com/questions/35178135/how-to-fix-insecure-content-was-loaded-over-ht.. 2023. 1. 6.
[git] LF will be replaced by CRLF ... 오류 "LF will be replaced by CRLF ......." 깃에서 "LF will be replaced by CRLF..." 라는 메시지가 나왔다. 오류는 언제나 싫다 싫다 싫다를 줄여... 씷다... ( 응? - . - ) LF는 Line Feed의 줄임말로 컴퓨터에서 커스를 한 줄 밑으로 내리라는 의미를 가진 코드라고 한다. 이때 유닉스 계열(리눅스, macOS 등)은 줄바꿈 시 LF만 쓰지만, 윈도우에서는 CR(Carriage Return)을 사용하기에 이런 줄바꿈 방식의 차이로 프로그램 오류가 발생할 수 있어서 git에서는 어떤 방식을 사용할지를 묻는 것. 해결 방법 //false (default): 파일에 있는 줄바꿈 문자 그대로 반영 git config --global core.aut.. 2023. 1. 5.
javascript로 style 삭제 방법 javascript로 html에 인라인 스타일로 들어가 있는 style을 삭제하려고 찾아보니 여러가지 다양한 방법을 찾을 수 있었다. 아래 코드들을 통해 정리해봄. 1. removeProperty() document.querySelector( 'button' ).onclick = function(){ const obj = document.getElementById( 'container' ); obj.style.removeProperty( 'border' ); } 2. 빈 문자열 document.querySelector( 'button' ).onclick = function() { const obj = document.getElementById( 'container' ); obj.style.border =.. 2023. 1. 2.
728x90
반응형

티스토리툴바