.list type decimal 출력 결과 : 1. 2. 3. .list_type_nodot 출력 결과 : 1 2 3 .list_type_circle 출력 결과 : ① ② ③ /* list type decimal */ .list_type_decimal{ counter-reset: type-decimal; } .list_type_decimal li{ display: block; } .list_type_decimal li:before{ margin-right: 4px; content: counter(type-decimal) "."; counter-increment: type-decimal; } /* list type decimal remove dot */ .list_type_nodot{ counter-re..
@font-face에서 unicode-range로 폰트를 변경하는 방법 영문과 숫자는 Roboto로 나머지 폰트는 Noto Sans KR로 적용 body {font-family:'Roboto' ,'Noto Sans KR', 'sans-serif';} @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('※'), url('../fonts/Roboto-Regular.eot'), url('../fonts/Roboto-Regular.eot#iefix') format('embedded-opentype') url('../fonts/Roboto-Regular.woff') format('woff'), url('../fo..
자바스크립트로 카운트다운 이벤트 구현하기 HTML DAYS HRS MINS SECS CSS .count_wrap ul{ display: flex; justify-content: center; align-items: center; } .count_wrap ul li{ position: relative; text-align: center; } .count_wrap ul li + li{ margin-left: 40px; padding-left: 40px; } .count_wrap ul li + li:before, .count_wrap ul li + li:after{ display: block; content: ''; position: absolute; top: 20px; left: -4px; width: 8p..
위로 올라가는 텍스트 animation jQuery로 구현하기 jQuery animate 무한 반복은 call back에 함수 이름을 작성해주면 된다 *jQuery animate 사용 방법 (진행 방식과 call back은 생략 가능) .animate({적용되는 속성}, speed, 진행 방식, call back) 진행 방식 값은 linear, swing, null 등이 있음 function scrollTest(){ var scrollRolling = $('.textrolling'), scrollHeight = scrollRolling.height(), scrollTime = scrollHeight * 50; scrollRolling.css('margin-top', '150px'); scrollRolli..
테이블 코딩한 cell의 폰트 사이즈가 특정 iOS 모바일 디바이스에서 들쭉날쭉 크게 보이는 현상이 있었다 iOS는 viewport가 변경되면 자동으로 font size를 조정하는데 그에 따른 현상이라고 한다 이때 필요한 text-size-adjust text-size-adjust는 비표준 속성이므로 벤더 프리픽스를 사용해야 한다 html, body{ -webkit-text-size-adjust : none; /* 크롬, 사파리, 오페라 신버전 */ -ms-text-size-adjust : none; /* IE */ -moz-text-size-adjust : none; /* 파이어폭스 */ -o-text-size-adjust : none; /* 오페라 구버전 */ } text-size-adjust: no..
data-tab 값을 활용해 filter로 해당 data 값 가진 요소 찾는 click event $('.btn_tab').on('click', function(){ var tabData = $(this).data('tab'), tabMenu = $('.tab_menu'), tabConbox = $('.tab_conbox'); tabMenu.children().removeClass('active'); tabMenu.children().filter('[data-tab=' + tabData + ']').addClass('active'); tabConbox.hide(); tabConbox.filter('[data-tab=' + tabData + ']').stop().fadeIn(); })
탭 메뉴에 data-name 값을 각각 부여하고 이동할 섹션에는 ID값으로 같은 값을 부여한 뒤 탭 클릭 시 해당하는 섹션으로 스크롤 이동하도록 구현 HTML menu1 menu2 menu3 jQuery $('.tab_menu li a').on('click', function(){ var targetId = $(this).data('name'), targetSec = $('#' + targetId).offset().top; $('html').animate({ scrollTop : targetSec }, '2000'); return false; })
- Total
- Today
- Yesterday
- 그리드반응형
- 스크롤커스텀css
- calendarflipjavascript
- 에러이미지속성
- 에러이미지마크업
- 흘러가는텍스트효과
- 스티키효과
- flipanimation
- marquee javascript
- marquee html
- php조건문
- php조건문축약형
- clockflipanimation
- marquee css
- 2단레이아웃반응형
- 퍼블리셔이직
- 인쇄스크립트
- flipjavascript
- 자동인쇄script
- sticky제이쿼리
- rwdImageMaps
- a태그다운로드
- phpif조건문
- flipjavascriptanimation
- 텍스트플로팅효과
- 스크롤커스텀
- 이미지맵반응형
- calendarflipanimation
- 이미지onerror
- 경력직웹퍼블리셔이직
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |