세연아빠의 개발과 일상의 모습

트위터 sns url 공유방법 및 소스 트위터 sns url 공유방법 및 소스 이번엔 소셜(SNS) 연동관련 4번째 포스팅으로 트위터 연동에대한 작업을 해보겠습니다. 앞에서 설명한 3가지 방법과 비슷하고 더 간단합니다. 연동방법은 마찬가지로 원하는 이미지를 위치시키고 자바스크립트를 사이에 넣어놓은후 해당 사이트 페이지의 url 만 수정하면 끝 아래의 이미지는 트위터 공유 버튼을 클릭후 오픈된 화면이다. 이것 역시 로그인이 되어 있다면 해당 사이트 url 을 등록할 수 있게된다. 소스파일은 압축하여 공유합니다 모든 포스팅이 끝나게 되면 해당 소스를 한꺼번에 자바스크립트 함수로 정의해 놓으면 편하게 각 소셜(SNS) 공유할 수 있는 페이지를 만들 수 있게 됩니다.

카카오스토리 sns url 공유소스 카카오스토리 sns url 공유소스 지난 포스팅에서 네이버와 페이스북에 대한 SNS 공유 하는 방법을 소스와 함께 설명해보았다. 이번시간은 카카오스토리 SNS URL 연동 방법과 소스를 공개한다. 위 페이에서처럼 SNS 공유가 필요한 페이지 내에서 카카오스토리 공유버튼 클릭시 작동시키는 방법을 간단하게 작성해 보겠습니다. 위와 같이 원하는 위치에 이미지를 위치시키고 자바스크립트 소스는 사이에 적용한후 실행시키게 되면 아래와 같이 공유가능한 페이지가 활성화 된다. 카카오스토리에 로그인이 되어 있다면 해당페이지가 그렇지 않을경우엔 로그인 페이지가 오픈된다.

페이스북 sns url 공유하기소스 페이스북 sns url 공유하기소스 SNS URL 연동중 페이스북 연동은 거의 모든 웹사이트에서 사용하고 있는 소셜 공유이며, 이것역시 네이버나 기타 다른 소셜공유처럼 간단하게 처리할 수 있다. 네이버 공유에서 보여줬던 상세페이지에서 페이스북 부분의 처리방법 입니다. 해당 자바스크립트를 사이에 삽입후 적용하고자 하는 홈페이지 주소를 수정하시고 고유값 은 내용에 따라 수정적용하시면 됩니다. 위 모습은 해당 페이스북 아이콘 클릭시 스크립트가 실행되어 화면에 노출된 모 습으로 해당페이지의 meta tag 상의 정보 를 가지고 와서 등록할 수 있는 페이지 노출입니다.

네이버 sns url 공유소스 네이버 sns url 공유소스 웹사이트 개발시 특정 페이지의 내용을 소셜(SNS)로 공유해야할 필요성이 있는 페이지 작업이 있다. 기본적으로 공유해야할 소셜들은 네이버, 네이버밴드, 카카오스토리, 페이스북, 트위터 정도일것 한데 네이버를 시작으로 순차적으로 간단한 연동방법을 공유해보고자 한다. 예를들어 위와 같은 공연안내의 상세페이지 정보를 네이버에 공유하고자 한다면 공유 소스는 아래와 같다. 사이에 자바스크립트를 정의하고 원하는 위치에 이미지 경로를 설정하면 끝. 공유하고자 하는 페이지의 meta tag 가 설정되어 있다면 위와같이 기본 페이지 제목과 설명 그리고 이미지등이 자동으로 불러들여지고 블로그나 카페등으로 연동되어 해당글을 등록할 수 있게 된다. 다음 포스팅은 페..

이미지 사이즈 조절 한꺼번에 하는 간편한방법이미지 사이즈 조절 한꺼번에 하는 간편한방법 우리가 웹 작업을 하거나 이미지 작업을 다보면 전문적인 편집이 아닌 단순한 이미지 작업을 할 때가 종종 있다. 그럴대마다 포토샵을 실행한다 든지 하게되면 좀 복잡하다 이럴땐 큰 프로그램을 실행할 필요없이 간단하게 이미지 사이즈를 조종 할 수 있는 유틸을 찾게 되는데 여러가지 방법이 존재 하겠지만 그중에 알씨 라는 프로그램이 설치된 상황에서의 방법을 설명하도록 하겠다. 1 알씨 설치하기 알씨 설치법에 대하여 자세하게 설명하고 싶지만 알씨 회사와 전혀 상관이 없는 필자로써는 괜한 오해를 살까 하여 그냥 간단하게 사이트 링크만 하여둔다 http://www.altoos.co.kr 2 원하는 이미지 사이즈 조절하기 원하는 이미..

구글 본고딕 다운로드 및 TTF 제공구글 본고딕 다운로드 및 TTF 제공 구굴(Google) 과 어도비(Adobe)의 합작품 무료폰트 본고딕 Noto San CJK KR 본고딕은 상업적으로도 사용이 가능한 무제한 무료폰트 입니다 한국어와 일본어 중국어가 포함된 하나의 폼트로 사용가능해서 약자를 CJK 표현됨. 구글 본고딕 다운로드 페이지 바로가기 1 다운로드 페이지 이동 다운로드 페이지에서 검색창에 KOREAN 을 입력한다. 검색된 Noto Sans CJK KR 을 다운로드 한다. 다운로드된 파일의 압축을 풀고 사용하면 된다. 아마도 디자인 작업을 하다보면 TTF 파일이 필요할 것이다. 필요한 경우엔 링크를 걸어놓았다 다운로드하여 사용하면 된다. 본고딕TTF 다운로드 이글이 도움이 되셨다면 아래에 로그인..

포토샵 미리보기 PSD 미리보기포토샵 미리보기 PSD 미리보기 안녕하세요? 오늘은 그래픽 작업을 하시는 분들이라면 포토샵을 꼭 사용하실텐데요.. 포토샵 파일을 일일이 열어보지 않고 바로바로 미리 보기로 내용을 확인할 수 있는 프로그램을 소개하겠습니다. 보통 포토샵 파일이라면 확장자가 PSD 파일입니다. PSD 파일을 미리보기 할 수 있는 프로그램중에 'SageThumbs' 미리보기를 지원하는 프로그램 입니다. Cherubicsoft사의 홈페이지에서 무료로 다운로드할수 있는데요. [바로가기] 클릭으로 접속하셔서 다운받으시면 됩니다. 박스부분을 클릭하면 다운로드 창이 오픈되고 실행하게되면 아래와 같은 설치 메뉴가 시작이 됩니다. OK 버튼 클릭하여 설치를 진행하자 설치가 모두 완료되게 되면 프로그램 목록에서..

크롬 개발자도구 사용법크롬 개발자도구 사용법 1 개요 웹사이트를 개발하다보면 간단한 수정도 웹페이지 수정후 재업로드 브라우저 확인작업을 하여야 제대로 수정이 되어졌는지 확인이 가능하지만 좀 더 간편하게 수정될 페이지에서 개발자 도구를 이용하여 미리 간편하게 수정하고 웹페이지상의 수정된 내용을 직관적으로 확인할 수 있는 방법을 이용한다면 더 편하게 개발을 할 수 있을것이다. 개발자는 물론 웹디자이너나 코더라면 더욱더 활용도가 높은 방법이 되겠다. 2 실행법 우선 수정이나 확인을 원하는 페이지를 크롬으로 접속후 단축키 F12 를 누르게 되면 위와 같은 화면이 나타나게 된다. 1번 선택버튼을 클릭후 수정이나 확인을 원하는 위치에 2번처럼 올려놓게되면 3번 위치에 해당 HTML 코드가 노출이 되고 해당 HTML..

네이버 브라우저 웨일(whale) 뭔가 특별한놈이 나왔다. 네이버 브라우저 웨일(whale) 뭔가 특별한놈이 나왔다. 우연히 들어가서 보게된 네이버 웨일 브라우저. 직업이 웹개발자라 호기심이 생겨 한번 테스트 해보고 싶은 생각에 설치해보았다. 텝이동없이 한 화면에서 작업가능한 멀티테스킹, 그리고 페이지가 모바일사이즈로 보여지는 기능이 있어 최근에 모바일 개발에 도움이 될것같다. 다운로드 화면에서 윈도우 버젼을 클릭하고 설치를 진행하였고, 다운된 파일은 2.62M 바이트 생각보다 용량이 작았지만 아마도 설치시 추가모듈 은 다운로드 되면서 설치되는것 같다. 설치시간이 생각보다 조금더 걸린다. 아무튼 설치는 정상적으로 진행되었고, 아래는 설치후 첫 화면이다. GUI 의 첫느낌은 익스플로러 보다는 크롬에 가깝다..

네이버 웹마스터도구 등록하자 (사이트맵, robots.txt 검색등록) 네이버 웹마스터도구 등록하자 (사이트맵, robots.txt 검색등록) 네이버 웹마스터도구는 ? 포털 사이트 NAVER 에서 2016년부터 웹사이트 홈페이지 등록신청대신 웹마스터 도구라는 툴을 통하여 웹사이트 등록을 개인이 할 수 있도록 지원하는 정책을 진행하고 있다. 자 홈페이지 홍보에 있어 좋은 기회가 온것이다 내 홈페이지가 SEO [ Search-Engine Optimization ] 에 맞게 개 발이 되어졌다면, 이제 웹마스터 도구를 통하여 등록하고 검색이 노출되게 하자... 어렵지 않다. 누구나 따라만 한다면. 가능하다. 1 우선 웹마스터 도구에 접속하여 내 사이트를 등록하기 이전에 준비하여야할 작업들이 몇가지 있다. Sit..