개발자의 정보/Web12 Youtube iframe width 100% height auto 유튜브 영상을 블로그나 페이지에 삽입시 고정 너비로 삽입하기 싫을 경우가 있다. 이럴때는 몇가지 @media 사이즈를 정해서 할 수도 있지만 너비가 유동적일 때는 width 값을 100%로 주고 높이를 auto로 해주고 싶다. 이럴때 사용 하는 팁! 유튜브 영상 자동으로 높이조절하기! 1. css 코드를 추가한다. .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left:.. 2020. 2. 23. 웹에서 3D 단백질 모델 그리기 업무의 특성상 웹 화면에 단백질 3D 모델을 표현해야 한다. 방법을 몰라 이리저리 고민하게 되었다. MD (Molecular Dynamics) 관련 작업을 하다보니 어쩔 수 없는 일이었다. 구글신은 모든 것을 알고 계신다! 검색만이 답이다. 구글을 돌리고 돌리고 또 돌리고 링크를 타고 타고 또 타고 다니며 알게 된 사이트 들이 몇가지 있다. 아래의 목록이 그 결과이다. 1. PV – JavaScript Protein viewer (MIT license) https://biasmv.github.io/pv/ 2. JMOL (GNU license) http://jmol.sourceforge.net/ 3. NGL (MIT license) https://github.com/arose/ngl 4. Molsoft h.. 2020. 2. 13. javascript opener 사용권한이 없습니다. 자바스크립트를 통해 opener에 접근하거나 생성한 창에 접근할 때에 사용권한 문제에 간혹 부딪히곤 합니다. 이럴 때에 체크해 보아야 할 것은 도메인이 서로 다른 웹사이트일 경우 윈도우가 생성된 이후 다른 도메인을 지나왔을 경우 http, https 와 같은 프로토콜이 다른 경우 이렇게 세가지 경우가 가장 많은 것 같습니다. 이 때 창을 close 하는 등의 controll을 하려 들면 사용권한이 없다는 메시지가 계속 나오게 되는데 모든걸 해결할 수는 없지만 간단한 문제는 해결 가능한 꼼수가 있습니다. javascript 로는 접근이 안되지만 form 전송의 target 으로 지정하여 다른 페이지를 열 수 있다는 점입니다. 다른 창에서 close 명령을 내리려 할 경우 close 명령이 있는 빈 페이지를.. 2020. 2. 1. 오프라인 Application Cache 오프라인 혹은 인터넷 연결이 불안정하거나 연결 속도가 좋지 않을 때 좀더 나은 환경을 지원해주는 기술이 HTML5에 공식 지원되고 있다. 자세한 내용은 http://html5.clearboth.org/offline.html 이곳을 통해 확인할 수 있다. 간단히 사용법을 기술하자면 우선 html 최 상단에 아래와 같은 코드를 삽입해 준다. 그리고 해당 캐쉬정의파일 에서는 가장 첫줄에 "CACHE MANIFEST" 라는 문구를 써주고 그 아래부터 캐싱할 파일을 한줄에 하나씩 경로를 적으면 된다. 주석은 "#" 를 사용하여 줄단위로 주석처리가 가능하다. 보다 자세한 내용은 위에 언급한 아래의 링크를 참조하기 바란다. http://html5.clearboth.org/offline.html 2011. 5. 26. 웹과 색상 웹 색상의 16진법 표기 웹에서 십육진수쌍으로 색을 표현하는 방법은 RGB 가산혼합에 의한 것이다. RED, GREEN, BLUE에 해당하는 두자리 십육진수 세 쌍으로 색깔을 나타낼 수 있다. 한 채널당 1 바이트가 할당되므로 모두 3 바이트의 정보로 색을 표현한다. 웹에서 색을 지정할 때에는 특수기호 #과 3 쌍의 두자리 십육진수를 연속하여 사용한다. 표기형식 특수기호 RED 채널 GREEN 채널 BLUE 채널 # 00~FF 00~FF 00~FF 표기 예 표기 색상 #000000 #ff0000 #00ff00 #0000ff 표현 범위 두자리의 십육진수가 표현할 수 있는 범위는 00부터 FF까지(십진수 0에서 255까지)이다. (십육진법 참조) 즉, 하나의 채널은 256 가지의 색을 표현할 수 있다. 웹 .. 2011. 5. 25. Javascript 성능 향상을 위한 Tip 갈수록 javascript(이하 js) 의 사용이 늘고 있다. 예 전의 간단한 js 가 더이상 아니게 되었고 오히려 javascript 가 html 보다 더 많은 내용을 차지하고 있는 것을 보는 것은 이제 흔한일이 되어 버린 것이다. 이렇듯 js 의 사용이 늘고 양이 점점 방대해져 가는 만큼 js 의 퍼포먼스(performance)도 더이상 남들만의 이야기는 아닐 것이다. 그래서 준비해 보았다. 목 적 : js 의 성능 향상을 위한 몇가지 테스트와 그 결과에 따른 tip 들을 정리 해 본다. 성능 테스트를 하기 위해 몇가지 툴을 사용할 수 있겠지만 좀더 직관적으로 빠르게 누구나 test 해보고 눈으로 확인할 수 있도록 간단한 퍼포먼스 객체를 만들었다. 1: 2: var PerformanceTool = f.. 2011. 5. 24. 이전 1 2 다음
