여행자의 책

유튜브링크를 긁어 iframe에 넣으면 아래처럼 종종 전체화면이 되지 않는 문제가 있다. 온갖 방법을 다 시도해봤는데 안되서 문제 해결한 과정을 정리해둔다. 전체화면을 구현할 수 있는 방법은 먼저 iframe 자체에서 구현해주는 기능을 사용해도 되고 만약 구현되어 있지 않다면 JS(Javascript)를 이용해 구현하면된다. 오늘은 긁어온 링크가 유튜브 처럼 자체 전체화면을 지원한다는 가정하에 작업을 진행하도록 하겠다. 먼저 iframe이 아마 아래처럼 생겼을 것이다. HTML 삽입 미리보기할 수 없는 소스 이제 iframe에 하나만 추가해주면된다. allowfullscreen 이다! 자 이제 추가하고 한번 확인해보자! HTML 삽입 미리보기할 수 없는 소스 다들 나처럼 고생하지 않았으면 한다! 도움이 ..

헤더의 경우, 반응형으로 디자인 할 때 화면 사이즈 변경시 이미지 높이 변화없이 이미지의 중앙만 보여줘야 할 때가 있다. 본래의 경우 화면크기가 줄어들면서 이미지 크기가 비율에 맞게 줄어들거나 아래와 같은 조건을 주면 img{ display:block; margin: 0 auto; } 하지만 이렇게 해준다면 오른쪽부터 사라지도록 되어 있다. 하지만 헤더의 특정 영역에 화면에 크기에 관계없이 반드시 노출되어야할 이미지나 로고 있다면 위와 같은 방식으로는 조금 어려울 것이다. 오늘은 화면 사이즈 변경시에도 이미지의 중앙을 보여주는 css를 알아 보겠다. body 태그 내의 코드는 다음과 같다. 이 상태에서 css는 다음과 같다. .img-container-size{ position: relative; wid..

웹에서 화면 비율을 이것저것 맞춰보고 모바일로 넘어가서 확인 보는데 다 맞는데 가로전환했을 때 이상하게 뜨는 경우가 있다. (그게 바로 내 경우다..) 아래의 미디어 쿼리의 orientation property를 이용해 가로 전환의 경우에 css를 바꿔주면된다. #가로 모드일 때 @media(orientation: Landscape){ body { padding-top:100px; margin-right:20px; margin-left:20px; } } #세로 모드일 때 @media(orientation: Portrait){ body { padding-top:100px; margin-right:20px; margin-left:20px; } } css는 프로그래밍언어가 아니다... 수십번 되뇌인다...

textarea관련해서 자주사용하는 style과 스크립트 코드를 정리해두었다. 1. 글자 간격 조절 textarea{ line-height: 20px; } 2. 테두리 제거 textarea{ border: none; } 3. 포커싱 되었을 때 테두리 제거 textarea:focus{ outline:none; } 4. 줄 바꿈시 높이 변경

1. Uncaught InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state 웹소켓이 아직 맺어지지 않았는데 메세지를 전달하려고 해서 발생하는 문제 Arrow Function을 이용해 아래와 같이 해결한다. var accessSocket = new WebSocket( 'ws://localhost:8003/ws/connectTrack/sdfg/' ); accessSocket.onopen = () => accessSocket.send(JSON.stringify({ 'event_pk': event_pk, 'participant_pk' : 1, 'isConnected' : 'true', }));

html 태그에 변수명 사용해서 바로 함수 처럼 사용할 수 있는 프레임워크 github.com/alpinejs/alpine alpinejs/alpine A rugged, minimal framework for composing JavaScript behavior in your markup. - alpinejs/alpine github.com utility-first css frame work semantic ui와 비교대상 tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 참고로..

날짜 : 2020/12/5 TypeError in plugin "gulp-csso"Message: Cannot read property '0' of undefined 버전 문제 Node 14.15.1 에서 아래의 버전에서는 잘 동작합니다. "devDependencies": { "gulp-postcss": "^9.0.0", "gulp-sass": "^4.1.0", "node-sass": "^5.0.0" "autoprefixer": "^9.8.6", "gulp": "^4.0.2", "gulp-csso": "^4.0.1", "postcss": "^8.1.14", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1" }