본문 바로가기

퍼블리싱/기타정보

(11)
크로스브라우징 익스플로러 잡기 크로스브라우징이란! 크로스 브라우징은 W3C에서 채택된 표준 웹 기술을 적용해 모든 브라우저에 다흔 기종의 운용체계나 HTML 렌더링 기술로 웹페이지를 제작하는 방법론이다. 인터넷 익스플로러, 오페라, 파이어폭스, 크롬, 사파리 등등 많은 브라우저들이 있고, 사용자들이 어떤 브라우저를 통해서 웹사이트를 들어오던지 문제 없이 웹사이트가 보여지도록 만들어야 한다. 또한 나이가 어린사람, 시각 장애인, 노약자도 웹을 쉽게 사용 할 수 있도록 맞춰야 한다. 사실 브라우저마다 생각보다 많이 다르고, 한 브라우저에서 완벽했는데, 다른 브라우저로 들어가면 난리가 나는 상황을 자주 만나곤 합니다...지금 작업하는 웹사이트를 크로스브라우징하면서 있었던 이슈에 대해 정리해 놓을 겸 블로그를 적어보려 합니다. 우선, 크롬을..
SSL인증서 없이 HTTPS에서 HTTP로 되돌리기 https요청에서 http상태로 되돌리려고 시도해본 과정에 대해 적으려고 합니다. 상태는 SSL 인증서를 이용해서 https 프로토콜을 사용하고 있었는데, SSL 인증서가 만료되어 안전하지 않다는 경고창이 뜨게 되었습니다. 인증서가 만료될때마다 인증서를 재인증해야 한다는 점과 더이상 필요성을 못느껴 그 전 HTTP 프로토콜을 쓰던 상태로 되돌리고 싶어졌습니다. 시도했던 해결방법 01. 우선 사이트 주소를 https에서 http로 변경했지만, 주소만 브라우저에 적었을때 https로 연결되는 문제점이 있었습니다. 02. .htaccess 파일을 변경 RewriteEngine On RewriteCond %{HTTPS} on RewriteRule (.*) http://%{HTTP_HOST}%{REQUEST_UR..
SSL 인증서 무료 이용(ZEROSSL 리뉴얼 후) SSL 인증서란!? SSL 프로토콜은 처음에 Netscape사에서 웹서버와 브라우저 사이의 보안을 위해 만들어졌다. SSL은 Certificate Authority(CA)라 불리는 서드 파티로부터 서버와 클라이언트의 인증을 하는데 사용된다. (출처. http://wiki.kldp.org/HOWTO/html/SSL-Certificates-HOWTO/x70.html) HTTP는 Hypertext Transfer Protocol의 약자다. 즉 Hypertext 인 HTML을 전송하기 위한 통신규약을 의미한다. HTTPS에서 마지막의 S는 Over Secure Socket Layer의 약자로 Secure라는 말을 통해서 알 수 있듯이 보안이 강화된 HTTP라는 것을 짐작할 수 있다. HTTP는 암호화되지 않은 ..
무료 이미지 사이트 소개 합니다! / Pexels, StockSnap.io 안녕하세요!! 또랑입니다 +_+ 오늘은 디자인 및 그래픽 작업에 필수적인 이미지들을 얻을 수 있는 사이트를 소개 해드릴거에요! 특히.. 높은 퀄리티임에도, 무료로 상업적으로도 사용할 수 있어요. Pexels에서는 문장으로 풀어서 Pexels의 모든 사진과 동영상을 무료로 사용할 수 있습니다. 저작권을 고지하지 않아도 됩니다. 꼭 포토그래퍼나 Pexels를 출처로 밝혀야 하는 것은 아니지만 언제든 밝혀주시면 감사하겠습니다. Pexels의 사진과 동영상을 수정할 수 있습니다. 창의력을 발휘하여 원하는 대로 편집하세요. 라고 명시를, StockSnap에서는 cc0 라이선스로 명시 해뒀습니다. ※ cc0란? creativecommons.org/publicdomain/zero/1.0/deed.ko Creative..
프론트엔드 테스트 사이트! codepen, jsfiddle, js bin 안뇽하세용! 또랑입니다 ㅎㅎ 오늘은 프론트엔드 테스트 사이트 간단히 몇가지 소개 합니다. 사실 저는 기본적으로는.. 직접 파일을 만들어가면서 테스트 하는 방법을 사용하지만, 조금 아리송하고 계속 코드를 바꿔가며 확인 해야 하는 트러블 슈팅에서는 아래 툴들을 사용하는게 상당히 편한 방법이에요. 사용하는 것은 크게 세가지가 있습니다. (codepen, jsfiddle, js bin) 간단히 UI를 소개 드리자면- 01. codepen https://codepen.io/ 02. jsfiddle https://jsfiddle.net/ 03. js bin https://jsbin.com/ 저는 개인적으로는 jsfiddle을 가장 자주 사용합니다. (UI도 마음에 들고, 가입하라는 암묵적인 강요도 없어서요!) 하지..
웹페이지 전체를 한번에 캡쳐하기 웹사이트 전체를 캡쳐하고 싶은데, 스크롤을 내려야 하기 때문에 한번에 캡쳐하기 힘들다. 그럴때 유용하게 쓸 수 있는 구글 앱 중 하나를 소개하려고 한다. ' full page screen capture' 01. 구글 웹스토어에 들어간다. 크롬브라우저에 북마크부분의 앱을 눌러주면 들어갈 수 있다. 구글 앱스토어 02. full page screen capture를 검색해 추가해준다. 사실 다른 비슷한 앱도 많이 있는데, 사용자가 가장 많아 이걸 받았다.ㅎㅎ 03. 추가 후 크롬브라우저 오른쪽 상단에 보면 카메라 모양의 아이콘이 생긴다. 먼저 캡쳐하고 싶은 페이지를 열어둔 후 저 카메라를 눌러준다. 그럼 위에서부터 캡쳐를 해준다. 04. 캡쳐 후 이미지를 다운받을 수 있는 페이지로 이동 시켜준다. 여기서 오..
카톡 오픈그래프 메타태그 및 이미지 사이즈 & 캐시삭제 01. 오픈그래프(OPEN GRAPH) 카카오톡, 페이스북 등의 여러 SNS에 웹사이트를 공유하면 미리보기로 간략한 웹사이트의 정보가 제공 됩니다. 이런 정보를 메타태그를 이용해 미리 설정해주면 원하는 미리보기를 전달할 수 있습니다. 이렇게 META 태그는 해더 안에 넣어주면 링크를 전송시 META안에 정보를 가지고 와서 보여주게 됩니다. 02. 오픈그래프 메타태그 03. 카카오톡 오픈그래프 이미지 사이즈 이미즈 사이즈를 다양한 사이즈를 실험해봤는데, 같은 사이즈, 같은 확장자를 해도 어떤 링크는 이미지가 짤리는 현상을 보였다. 카톡 가이드에 맞춰 만들었을때 오류가 적었다. 이미지 사이즈 800px * 800px 가이드 파일을 다운받으면 이미지 전체크기와 로고 위치와 크기가 설정되어 있어요! 04. 카카..
번역하기 옵션 없애는 방법 및 코드 번역하기 옵션 없애는 방법 01. 사이트입장 - 사이트에 메타태그 넣어주기 02. 사용자입장 - 크롬 옵션세팅변경 01. 사이트에 메타태그 넣어주기 메타태그를 사이트 에 넣어주면 끝 02. 크롬 옵션세팅변경 - 브라우저 오른쪽 상단 점버튼 클릭 > 설정 - 고급 > 언어 > 맞춤법 검사 사용 > 비활성화