본문 바로가기

work

[그누보드5] tag(태그) 사용이 가능한 게시판 web.paper | 그누보드5그누보드 스킨 공유http://webpaper.kr/youngcart/ tag(태그) 사용이 가능한 게시판 > SIR글작성시 태그를 등록하고, 그 태그를 활용하여, 태그가 있는 게시물만 볼 수 있는 게시판 스킨입니다. #1 태그 입력 부 - 태그 입력은 단어를 입력하여, 스페이스바(spacebar)를 누르면 추가됨 - 추가된 태그의 옆 엑스(x) 버튼을 클릭하면 태그 삭제 #2 view 페이지 > 하단에 입력된 태그 보임 https://sir.kr/g5_skin/27608 글작성시 태그를 등록하고, 그 태그를 활용하여, 태그가 있는 게시물만 볼 수 있는 게시판 스킨입니다. #1 태그 입력 부 - 태그 입력은 단어를 입력하여, 스페이스바(spacebar)를 누르면 추가됨 - ..
[jquery/css] 간단한 탭메뉴 만들기 tab menu jquery 와 css 을 이용한 간단한 탭메뉴 만들기 head 부분에 jquery 호출 tab 메뉴를 구현할 box 만들기 box는 가로 200px 세로길이는 컨텐츠에 따라 자동으로 늘어나는 auto height로 구성 height:auto; overflow:hidden; .tab{ width:200px; height:auto; overflow:hidden; } 클릭하여 동작할 tab 부분 css 작업 tab을 3개 넣을거라 33.3333% 로 작업 / 같은 크기의 3개의 탭 높이는 텍스트의 line-height 로 잡음 (40px) tab을 클릭해야 함으로 cursor:pointer 로 마우스 커스를 올렸을때 손가락 모양이 나오게 함 그리고 tab이 선택된 것을 표시하기 위해 .on 클래스로 표기함 ..
[fontawesome] 4 version 폰트어썸 / fontawesome 옛날 버전 사용하기 Font Awesome, the iconic font and CSS toolkitFont Awesome, the iconic font and CSS frameworkhttps://fontawesome.com/v4.7.0/ 폰트어썸(fontawesome) 최신버전 말고 옛날 버전으로 사용하는 주소 그누보드는 이 버전을 사용하는 거 같으네요; 4버전 : head 추가 사용예 5버전 : head 추가 사용예 다운로드 링크는 아래에 있습니다. https://fontawesome.com/v4.7.0/assets/font-awesome-4.7.0.zip
[내 아이피 주소] IP 주소확인하기 / IP 주소로 지도표시하기 며칠을 싸움하다,,, 겨우 이 정도 수준으로 완성한 내 아이피 주소보기 web.paper | 내 아이피 주소확인내 아이피 주소로 위치확인http://www.webpaper.kr/ip 일단 기능은 이렇다. # 현재 접속자의 IP 주소를 보여준다.# 그 IP 주소를 바탕으로 위도/경도 값을 표출한다. # 위도 경도 값을 바탕으로 지도를 표출한다. (네이버지도) 일단 IP 주소를 가져오는 코드 echo $_SERVER['REMOTE_ADDR']; 이 코드로 공인 IP 주소를 가져온다. IP주소로 위치값 가져오기 이 경우 본인의 접속 IP로 geolocation을 이용해 위치값을 가져올 수 있다. 관련해서 참고한 내용은 아래 링크에서 확인 가능하다. HTML5 - 지오로케이션HTML5 - 지오로케이션좌표 읽기구..
[웹폰트아이콘] Google Material Design Icons 사용하기 fontawesome을 많이 사용했었는데,, 요즘은 구글 아이콘에 빠져있다. 그래서 사용법을 살짝 공유해보려한다. [Google Material Design Icons 사용는 방법] Icons - Material DesignMaterial icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.https://material.io/tools/icons/index.html 에 아래 코드를 추가한다. 그리고는 사용하고픈 아이콘을 클릭해서 그 코드를 복사해서 사용한다. ▲ Sel..
[그누보드5/그누보드스킨] 무한스크롤 가능한 게시판 스킨 스크롤을 통해서 다음글을 불러오고, 혹은 이전글을 불러오는 스킨입니다. 작업하면서 고민한 점은 페이징 처리입니다. 게시글을 들어가고, 글을 확인 한 다음 다시 목록으로 돌아왔을 때 어떻게 보여줄 것인가를 고민하다 마우스 스크롤을 올리면 이전글을 불러오는 형태의 스킨을 구현해보았습니다. 스크롤 부분은 이렇습니다. $(window).scroll(function(){ // 최하단일 경우를 체크하기 위해 최하단 위치값을 지정 // 화면 문서전체의 길이에서, 현재 창 높이를 뺀 것이 최하단 값 var chkBtm = parseInt($(document).height()) - parseInt($(window).height()); if(chkBtm == $(window).scrollTop()){ // 최하단으로 도달..
[그누보드/티스토리] 그누보드 게시물을 티스토리에 등록하기 (티스토리 OPEN API) 스킨은 첨부파일로 받으실 수 있습니다. 글 작성 · GitBook블로그에 글을 작성하는 API 입니다.https://tistory.github.io/document-tistory-apis/apis/v1/post/write.html 티스토리 OPEN API를 이용해서, 그누보드 게시물을 티스토리에 등록하는 스킨입니다. 글작성시 자동으로 티스토리에 등록되는 형태는 아니고, 게시물을 작성한 후에 티스토리로 옮기는 형태입니다. 보완사항 - 첨부파일 / 대표이미지등의 등록은 안됨 - 그누보드에서 입력한 링크 등도 안옮겨짐 - 단, 전달하는 부분에서, 첨부파일링크 나 링크의 주소를 본문에 넣을수는 있을 것 같음 # 글쓰기 버튼 옆에 티스토리 등록이라는 버튼을 생성합니다. view.skin.php 에서 새창으로 팝업..
[티스토리/tistory] 티스토리 Access Token 발급 티스토리 토큰받기APP ID와 CallBack 주소로 Access Token 발급http://webpaper.kr/getaccess 티스토리 OPEN API를 이용해 글을 불러오거나, 글작성을 하려면 Access Token를 받아야 가능하다. 사실 그누보드를 사용해 만든 홈페이지에서 글작성시 자동으로 티스토리에도 등록되게 하려고 시작했는데,, 아직 그 경지까지는 도달하지 못했다. 하나씩 하다보면 되겠디.. 일단 그 전에 미리 해야할 것이 Access Token을 발급 받는 것이다. #1 티스토리 API 페이지로 이동 > 티스토리 홈페이지 하단에 보면 오픈 API 라고 링크가 있다. OpenAPI - TISTORY나를 표현하는 블로그를 만들어보세요.https://www.tistory.com #2 티스토리 ..

티스토리툴바