운영중이던 티스토리 실험실(http://tistory-lab.tistory.com) 블로그를 정리하기위해 본 블로그로 포스팅 이동합니다.------------------------------------------- 제목이 좀 길죠? ^^모바일 화면은 안그래도 작은데 상단에 고정된 네비게이션바가 자리를 차지하고있습니다. 참조:https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c 모바일이라면 바로 확인 가능하고, 데스크탑이라면 브라우져 크기를 줄여서 모바일 크기에서 스크롤을 올렸다내렸다하면 확인할 수 있습니다. 적용 방법 Fastboot 스킨 사용중이라면 그대로 적용하시면 되고, 다른 스킨이라면 약간의 수..

local에서 node.js개발을 하려면 node.js만 컴퓨터에 설치하면 쉽게 개발을 시작할 수 있다. 하지만 여러 컴퓨터를 이동하며 개발하고자 할때에는 web IDE가 여러모로 편리하다.IDE는 Integrated Development Environment의 약자로 통합개발환경이라는 뜻이고, 개발에 필요한 여러가지 환경들을 한데 몰아서 제공해주는 것이다. web IDE는 웹상에 IDE를 구현하여 웹에 접속하여 이용할 수 있는 IDE를 말한다. 이 포스트는 필자가 node.js를 지원하는 여러 개발환경을 접해본 결과 무료환경에서 괜찮았던 서비스를 추천하기위해 작성되었다. c9.io (https://c9.io/) c9.io는 web IDE라는 말이 정말 잘 어울리는 서비스이다. 코딩부터 디버깅, 터미널도..

주로 애드센스를 가운데 정렬하고 싶을 때 다음과 같이 태그를 사용합니다. 광고코드 하지만 어떤 환경에서는 작동하고, 어떤 환경에서는 작동하지 않습니다. 왜 작동하지 않는지, 대체법은 무엇인지 알아보겠습니다. 결론부터 말씀드리면 광고코드 대신 광고코드 를 쓰면 됩니다. HTML5에서는 center태그가 지원되지 않는다 웹페이지를 표시하는 언어인 html은 여러 버전을 거쳐 현재 표준은 HTML 5입니다. 각 버전마다 지원하는 기술이 다르고 태그도 달라질 수 있습니다. center태그는 html5 이전 버전까지만 지원되고 html5부터는 가운데정렬은 CSS를 이용하는 방식으로 표준이 변경되었습니다.center tag 레퍼런스 페이지 확인하기 HTML 5가 표준이 된지도 꽤 많은 시간이 지났기에 최근의 티스토..

문법이 굉장히 너그러운 js를 독학으로 익히다보니 잘못배운 문법을 php에 적용하다 애를 먹는 경우가 많다.가장 많이 틀리는것이 echo 뒤에 semicolon(;)을 찍지 않은 것.. 이거 안찍었다고 internal sever error를 띄워버리니당황스럽다. 나름 새롭게 알게된 사실도 있다.js에서는 줄바꿈 문자 \n을 double quote(")나 single quote(') 어디서나 써도 상관 없지만,php에서는 double quote(")안에서 사용해야 작동한다.double quote안에서 더 많은 경우의 escape문자가 작동한다고한다. 예)jsvar a = "첫째줄\n둘째줄";var b = '첫째줄\n둘째줄';출력값a"첫째줄둘쨰줄" b"첫째줄둘쨰줄" php$a="첫째줄\n둘째줄";$b='첫째..

제가 Material T 스킨을 처음 만들때에는 이런 템플릿? 툴킷? 같은 도구가 없어서 구글의 디자인 가이드라인에 따라 직접 하나씩 스타일을 만들었었는데요. Material Design Lite 줄여서 MDL을 이용하면 아주 쉽게 머티리얼 디자인을 구현할 수 있습니다. https://getmdl.io/index.html 시작하기 쉽게는 HTML에 3줄을 추가하는 것 만으로도 MDL을 사용할 수 있습니다. 가장 쉽고 가장 많이 이용하실 방법같네요. 그밖에 직접 다운로드해서 사용하거나 빌드용, bower, NPM에서 설치하는 방법도 소개되어있습니다.https://getmdl.io/started/index.html . 이용할 수 있는 컴포넌트의 종류가 소개되어있습니다.Material T 스킨에는 구현이 어려..

안드로이드 롤리팝에서 크롬을 사용중이라면, 어떤 사이트에 들어가면 주소창이랑 멀티태스킹키를 눌렀을 때 색깔이 변하는걸 관찰 할 수 있습니다. 예)페이스북에 접속하면 주소표시줄이 파란색으로 변합니다. 바로 theme-color속성을 가진 메타태그를 이용한 방법입니다. 현재 이 블로그에도 메뉴바랑 같은색상으로 테마가 설정되어있는데요. 적용법이 매우 쉬우니 한번 알아보도록 하겠습니다. . theme-color 적용 방법 skin.html에서 태그 바로 앞에 다음을 추가하면 됩니다. 파란색 표시한 부분을 원하는 색상 코드로 바꿔주시면됩니다. 추가로, 멀티태스킹 키를 눌렀을때 나타날 썸네일 아이콘은 다음과같이 지정할 수 있습니다. 기본정보에 이미지에 업로드한 사진이 아이콘으로 나타납니다.

머티리얼 디자인에서 버튼을 클릭하면 잉크가 퍼지는듯한 효과를 따라하고 싶어서 찾아봤습니다. Ref : http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design 원작자의 것은 여러번 클릭해도 잉크가 하나만 나타났는데, 저는 여러번 클릭하는대로 잉크효과가 나타나도록 수정해봤습니다. 클릭! 적용방법 CSS/*ink effect*/ .ripplelink{ display:block; position: relative; overflow: hidden; text-align:center; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: ..

대부분의 사이트에서 모바일 환경을 인식하기 위해 user agent 정보를 활용합니다. User agent란 원래 사용자를 대신하는 소프트웨어입니다.Http에서는 user agent header를 통해 사용자의 환경을 인식하게합니다. 예를들어 스마트폰에서 티스토리 링크를 클릭하면 ~~tistory.com/m/ 으로 시작하는 모바일웹 사이트로 Redirect됩니다.티스토리서버가 사용자의 user agent정보를 읽어서 모바일환경임을 인식하면 모바일웹으로 이동시키게 되는 것이죠. 아래에 현재 당신의 User agent정보가 나타날 것입니다. . UserAgent를 통한 모바일 인식 자바스크립트 if(navigator.userAgent.match(/Mobile|iP(hone|od)|BlackBerry|IEMo..

특정 요소만 그대로 두고 주변 전체를 어둡게하는 기법을 사용하는 것은 무언가 강조하고 싶을 때 유용한 기법입니다. 다른 사이트들을 참조해보니 대부분 선택 요소 뒤에 전체를 가리는 div태그를 생성하고, 배경색상을 투명한 검정색으로 주고 있었습니다. 여기서 소개드릴 방법은 CSS만으로 배경을 어둡게 하는 방법입니다. 배경 어둡게 하기 화면을 가리는 태그를 추가로 생성하지 않고 CSS3의 box-shadow옵션을 쓰면 됩니다. 참고로 box-shadow는 다음 이상의 브라우저에서만 지원합니다. http://www.w3schools.com/cssref/css3_pr_box-shadow.asp 아래는 배경을 어둡게하는 CSS 코드 입니다.box-shadow : rgba(0,0,0,0.5) 0 0 0 9999px..

웹페이지에서 데이터를 저장하는 방법은 쿠키와 웹스토리지 두가지방식이 있습니다. 쿠키는 서버가 유저를 기억하기위한 수단으로, 전통적으로 사용되었습니다.예를들어 웹페이지에서 ID:123 이라는 쿠키를 저장해놓으면, 다음에 유저가 접속했을 때에 서버가 ID쿠키를 읽어들여 유저가 123이라는 것을 확인하는 식이죠. 반면, 웹스토리지는 HTML5에서 표준으로 지정되었으며,local storage와 session storage 두종류가 있습니다.쿠키에 비해서 큰 데이터를 저장할 수 있고, 서버로는 전송이 되지 않는 차이점이 있습니다.Local storage는 데이터에 유효기한이 없고, session storage는 창을 닫으면 데이터가 초기화되는 점만 제외하면 완전히 같습니다. 쿠키는 HTML header에서 서버..