webpaper | 웹페이퍼

Cloudcraft – Draw AWS diagramsDraw AWS diagrams with Cloudcraft: Snap together components like EC2s and ELBs on an isometric gridhttps://cloudcraft.co/

NHN AD, UI/UX Lab 공식블로그 : 네이버 블로그NHN AD의 UI/UX Lab 공식 블로그 입니다.https://blog.naver.com/uiux_lab

순전히 일을 하다가 필요할거 같아서 만들어 보았습니다. 포토샵으로 시안을 작업할 경우 같은 사이즈의 배너를 같은 간격으로 정렬해야 되는 경우가 있습니다. 자주는 아니지만, 가로 간격은 제한적이고, 배너 숫자를 고려햇을 때 간격과 배너의 크기는 얼마나 할 것인가 .. 항상 엑셀을 켜두고 계산을 했습니다. 물론 엑셀로 하면 되지만,, 재미삼아 만들었습니다. 원리는 이렇습니다. 예를 들어, 가로폭이 1450px의 화면에 5개의 배너를 20px 간격으로 배치를 합니다. 이럴 경우 계산을 하죠, 가로폭 - 간격의 합(배너숫자에서 -1 * 20px) ex ) 1450 - ((5-1)*20) = 1325 1325 나누기 배너개수 = 1325/5 = 265 이러면 가로폭이 265px 배너를 20px 간격으로 배치를 하..

로딩화면을 만드는 방법 간단하게.. #1 먼저 css 로 로딩중에 보여줄 화면을 만듭니다. 보통 화면을 덮어서, 만듭니다. .loading{ width:100%; height:100%; position:fixed; left:0px; top:0px; background:#fff; z-index:1000; /* 이 값으로 레이어의 위치를 조정합니다. */ } #2 로딩으로 보여줄 div 를 화면에 넣습니다. 보통 body 바로 담에 넣으면 됩니다. #3 페이지가 로드되었을 때 로딩화면을 감춥니다. 이렇게하면, 일단 페이지가 로드되면 하얀 loading div 가 보이고, 페이지가 로드되면, 그 div 가 사라집니다.

web.paper | 그누보드5그누보드 스킨 공유http://webpaper.kr/youngcart/ tag(태그) 사용이 가능한 게시판 > SIR글작성시 태그를 등록하고, 그 태그를 활용하여, 태그가 있는 게시물만 볼 수 있는 게시판 스킨입니다. #1 태그 입력 부 - 태그 입력은 단어를 입력하여, 스페이스바(spacebar)를 누르면 추가됨 - 추가된 태그의 옆 엑스(x) 버튼을 클릭하면 태그 삭제 #2 view 페이지 > 하단에 입력된 태그 보임 https://sir.kr/g5_skin/27608 글작성시 태그를 등록하고, 그 태그를 활용하여, 태그가 있는 게시물만 볼 수 있는 게시판 스킨입니다. #1 태그 입력 부 - 태그 입력은 단어를 입력하여, 스페이스바(spacebar)를 누르면 추가됨 - ..

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 클래스로 표기함 ..

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

며칠을 싸움하다,,, 겨우 이 정도 수준으로 완성한 내 아이피 주소보기 web.paper | 내 아이피 주소확인내 아이피 주소로 위치확인http://www.webpaper.kr/ip 일단 기능은 이렇다. # 현재 접속자의 IP 주소를 보여준다.# 그 IP 주소를 바탕으로 위도/경도 값을 표출한다. # 위도 경도 값을 바탕으로 지도를 표출한다. (네이버지도) 일단 IP 주소를 가져오는 코드 echo $_SERVER['REMOTE_ADDR']; 이 코드로 공인 IP 주소를 가져온다. IP주소로 위치값 가져오기 이 경우 본인의 접속 IP로 geolocation을 이용해 위치값을 가져올 수 있다. 관련해서 참고한 내용은 아래 링크에서 확인 가능하다. HTML5 - 지오로케이션HTML5 - 지오로케이션좌표 읽기구..

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..

스크롤을 통해서 다음글을 불러오고, 혹은 이전글을 불러오는 스킨입니다. 작업하면서 고민한 점은 페이징 처리입니다. 게시글을 들어가고, 글을 확인 한 다음 다시 목록으로 돌아왔을 때 어떻게 보여줄 것인가를 고민하다 마우스 스크롤을 올리면 이전글을 불러오는 형태의 스킨을 구현해보았습니다. 스크롤 부분은 이렇습니다. $(window).scroll(function(){ // 최하단일 경우를 체크하기 위해 최하단 위치값을 지정 // 화면 문서전체의 길이에서, 현재 창 높이를 뺀 것이 최하단 값 var chkBtm = parseInt($(document).height()) - parseInt($(window).height()); if(chkBtm == $(window).scrollTop()){ // 최하단으로 도달..