목록2014/12/31 (3)
web sprit
input에 대한 설명을 input안에 설명으로 연하게 써져있고 그 부분에 클릭을 하거나 글씨를 입력할경우 사라지는 방식으로 input에 대한 설명을 표현한 것을 본적이 있을것이다. placeholder 플러그인(ie7 ~ 8도 적용 가능) placehoder라는 속성은 원래 HTML5태그 속성으로 최근 브라우져가 아닌 낮은 브라우져에서는 적용이 안된다.위의 플러그인을 사용하면 낮은 브라우져 ie7 ~ 8도 모두 적용되어 화면에 나온다.
어느 블로그나 홈페이지를 들어가면 상단 영역이라던가 상단 메뉴부분이 스크롤시 상단에 붙어 있는듯한 UI를 많이 보았을 것입니다. 그 기능은 CSS 와 j-Query 를 이용하여 구현해 보았습니다. 제가 만든 소스를 그대로 사용하시기 보다는 좀더 보안하여 응용형식으로 사용되었음 좋을 것 같습니다. HTML1234567891011121314151617 상단 배녀 영역 상단 고정 영역 하단 contents 영역 Colored by Color Scriptercs CSS1234567891011.wrap{}.wrap div{width:100%; text-align:center; font-size:20px; font-weight:700; color:#fff;}.top_bar_fix{position:fixed; top..
상단메뉴나 퀵메뉴를 눌럿을때 앵커설정으로 인해서 앵커의 아이디 값으로 이동하는것을 경험해 보았을 것이다.단순히 앵커의 기능으로 갑자기 정적으로 위치이동 보다는 앵커를 눌럿을때 동적으로 보다 부드럽게 이동하는 제이쿼리를 소개하려 한다. 앵커이동 제이쿼리 - *제이쿼리 부분123456789Colored by Color Scriptercs *CSS 부분12345.red{height:1000px; background:red;} .blue{height:1000px; background:blue;}.yellow{height:1000px; background:yellow;}.start_zone{background:#e7e7e7;}.start_zone a{font-size:20px; color:#666; font-we..