평범한 게 제일 어렵다

웹페이지(html)에, 혹은 내 웹사이트에 PPT 파일 뷰어 기능을 넣고 싶다면 어떻게 해야 할까요? 이번 포스팅에서는 웹페이지에서 PPT 파일을 출력하는 방법을 알아보겠습니다. 웹 개발 관련 커뮤니티를 돌아다니다 발견한 정보인데, 유용한 것 같아서 정리해봤습니다. 해당 방법은 마이크로소프트사의 웹 오피스(파워포인트) 기능 + HTML 아이프레임 태그를 기반으로 동작합니다. (마이크로소프트 온라인 오피스 사이트에서는 반드시 로그인을 해야 오피스 기능이 사용 가능하나, 해당 포스팅 내용의 웹 PPT 파일 출력은 별도의 과정이 필요 없습니다) 정말 쉽습니다. 핵심 소스는 딱 1줄입니다. 1 cs https://view.officeapps.live.com/op/embed.aspx?src=PPT파일경로에서 PP..

이번 포스팅의 주제는 그누보드 게시판의 이미지에 워터마크를 삽입하는 방법입니다. 이미 업로드된 이미지에는 적용이 불가능하며, 새롭게 업로드 하는 이미지에만 적용 가능합니다. 첨부 파일과 스마트에디터2를 통한 이미지 업로드에 모두 적용 가능합니다. 이미지의 용량이나 서버 부하 등은 고려하지 않았으니 유의 바랍니다. 소스는 그누보드 공식 사이트인 sir.kr, 구글 검색 결과 등을 참고하였습니다. 워터마크 삽입을 위해 필요한 파일은 watermark.php write_update.tail.skin.php 2가지이며 아래에 소스가 있습니다. 1. watermark.php 해당 파일을 그누보드의 /bbs/ 경로에 업로드합니다. 꼭 /bbs/ 에 넣을 필요는 없습니다. 편의상 넣었습니다. add_water_tex..

웹사이트에 내 페이스북을 가져오는 방법에 대해서는 아래와 같이 이전에 썼던 글이 있습니다. 페이스북 그래프 API로 내 페이스북 글 가져오기 (Graph api) - 2019. 09. 04 추가 - 포스팅 내용을 조금 수정하였습니다. 테스트 결과 포스팅 내용을 따라하면 페이스북 게시물이 제대로 출력되고 있습니다. - 2018. 05. 31 추가 - 현재 페이스북 api 정책 변경으 tonhnegod.tistory.com 다만 이 글은 너무 오래전에 썼던 것이기도 하고, 변경된 내용도 몇 가지 있어 최신으로 업데이트합니다. (20-11-11 업데이트) 포스팅을 하기 전에 테스트 페이지를 열어보았는데, 내 페이스북 게시글이 문제없이 잘 가져와지고 있습니다. 차근차근 잘 따라하시면 문제없이 구현 가능하리라 생..

이번 포스팅에서는 PHP로 이미지에 워터마크 넣는 방법을 알려드리겠습니다. PHP 기본 소스와 이미지 함수 등을 사용하였으며, PHP GD라이브러리가 사용 가능해야 하는 점 참고 바랍니다. 워터마크를 텍스트로 넣는 방법, 이미지로 넣는 방법 2가지를 모두 살펴보겠습니다. 1. PHP 워터마크 텍스트로 삽입하기 워터마크를 텍스트로 삽입하기 위해서는 TTF 폰트 파일이 필요합니다. (폰트 파일은 구글링으로 쉽게 구할 수 있음. 저작권 등은 잘 알아보고 사용하세요) 여기서는 배민 주아체를 사용해보았습니다. 예제 소스입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 ..

얼마 전에 웹 PDF 뷰어 관련 포스팅을 했었습니다. 2020.11.07 - [웹 개발 & 정보/기타] - 웹페이지에서 PDF 파일 보여주기 (PDF 뷰어 넣기) 이것을 응용하여 그누보드 basic 게시판 스킨에 적용해보았습니다. 게시판 스킨 파일은 포스팅 최하단에 첨부되어있습니다. 그누보드 5.4.3 버전, 기본 테마에서 작업했습니다. PDF 뷰어는 PDF.js(mozilla.github.io/pdf.js/)가 사용되었습니다. PC, 모바일 둘 다 적용되었습니다. IE는 11버전 이상만, 사파리 브라우저는 지원되지 않습니다. 지원 안되는 브라우저 대응 작업은 필요시 따로 하시면 되겠습니다. 1. 게시판 목록 각 게시물에 PDF 파일이 있는지 체크하여 PDF 아이콘을 출력합니다. PDF 파일이 첨부되어있..

ㅇ웹 사이트에 내 인스타그램 가져오기 (22. 06. 17. 정상 작동 확인, 내용 보완) 인스타그램이 페이스북에 인수되고 여러 가지 정책의 변화로 인해, 기존에 소개해드렸던 인스타그램 가져오기 방법이 한동안 작동하지 않았습니다. 알 수 없는 이유로 페이스북 계정 차단까지 당해 시도조차 못 해보고 있었는데요. 이번에 페이스북, 인스타그램 계정과 긴 씨름 끝에 api 연동에 성공하여 새롭게 글을 씁니다. 필수 조건 1. 반드시 페이스북 계정, 인스타그램 계정이 모두 있어야 합니다. 2. 인스타그램 계정을 프로페셔널 계정으로 전환해야 합니다. 3. HTTPS 사이트만 가능합니다. 한 번 해보고 나면 그리 복잡하지 않지만, 처음 할 때는 굉장히 복잡하고 귀찮게 느껴지는 과정입니다. 차근차근 따라오시기 바랍니다..

오늘은 웹페이지에 PDF 파일을 보여줄 수 있는 방법을 알려드리겠습니다. 웹페이지에서 특정 버튼 클릭 시 PDF 파일을 새창으로 출력하고 싶은 경우, 게시판에서 게시글과 함께 PDF 첨부 파일을 출력하고 싶은 경우, 그밖에 웹페이지(웹사이트)에서 필요한 상황에 응용하여 사용할 수 있습니다. 소개해드릴 방법은 총 3가지입니다. PDFObject.js / PDF.js / iframe 태그 먼저 3가지 PDF 뷰어 기능을 적용했을 때, 총 5가지의 웹 브라우저에서 어떻게 출력되는지 비교해보도록 하겠습니다. 1. 크롬 크롬에서는 어떤 것을 사용해도 문제없이 PDF 파일이 출력됩니다. 굳이 js를 사용할 필요 없이 iframe 태그를 사용해도 될 것 같습니다. 2. 파이어폭스 파이어폭스 또한 PDF 파일이 문제없..

이번 포스팅에서는 Adobe XD에서 이미지 선택 영역 자르는 방법을 알려드리려고 합니다. 디자인 툴을 어느 정도 다룰 줄 아시는 분이라면 보실 필요가 없을 것 같습니다. 저같이 디자인 툴에 서투르거나, 가끔씩 사용하는 분들에게 조금이나마 도움이 될까 하여 올리는 글입니다. 저는 웹 개발자 및 퍼블리셔로 일하고 있는데요. 이미지 편집 (이미지 자르기 정도) 할 때가 잦은 편인데, 주로 그림판이나 포토샵을 이용합니다. 간단한 단축키 Ctrl + C / Ctrl + V, Ctrl + Shift + C / Ctrl + V 정도로도 어떤 이미지든 잘라 쓰는데는 문제가 없었습니다. 그런데 얼마 전에 난관에 부딪혔습니다. 디자인을 XD 파일로 전달 받아서, 부랴부랴 Adobe XD를 설치했는데... 포토샵에서 하던..

얼마 전 PC가 고장 나서 포맷을 하다가, 실수로 오랫동안 쌓아온 자료들을 모두 날려버렸습니다. 이제 중요한 자료들은 꼭 블로그에 기록 해두리라 다짐했습니다... 오늘 포스팅에는 제 크롬 즐겨찾기 목록에 살아남은 웹 디자인 참고 사이트를 정리해보았습니다. 1. 디비컷 (https://www.dbcut.com/) 최근 오픈, 리뉴얼된 사이트들이 지속적으로 업데이트됩니다 외국 사이트, 모바일 웹, 반응형 웹, 워드프레스 등 다양한 사이트를 참고할 수 있습니다. 국내에선 가장 방대한 양의 자료가 있는 곳이라 생각됩니다. 2. Korea Web Design (http://koreawebdesign.com/) 활성화가 잘 되는 곳은 아니지만, 앞서 소개드렸던 디비컷에는 없는 사이트가 이곳에는 등록되어있는 경우가 ..

이번 포스팅에서는 네이버 오픈 API와 PHP 를 사용하여, 네이버 뉴스 검색 결과를 내 사이트에 출력하는 방법을 알려드리겠습니다. 이 API는 사용 방법이 쉬우므로 비교적 짧은 포스팅이 될 것 같네요. 1. 뉴스 검색 API 개발 페이지로 접속 -> https://developers.naver.com/docs/search/news/ 검색 API 페이지 접속 후, 오픈 API 이용 신청 버튼을 클릭합니다. 로그인 상태가 아니라면 네이버 아이디로 로그인 해주시면 됩니다. 2. 검색 API 애플리케이션 등록 API 등록 방법은 매우 간단합니다. - 애플리케이션 이름 : 아무거나 적어도 상관없습니다. - 사용 API : 건드리지 않아도 됩니다. - 비로그인 오픈 API 서비스 환경 : WEB 설정 을 선택합니..