분류 전체보기73 css-tricks.com (css 관련 여러 정보 모음) css-tricks.com/ CSS-Tricks CSS-Tricks is a website about websites. css-tricks.com 2020. 12. 25. 네이버 NULI ( for. front 초보용 info ) 1. nuli.navercorp.com/ NULI nuli.navercorp.com 접근성에 관련한 자료부터 체험관까지 갖가지 정보가 가득합니다. 2. wit.nts-corp.com/ WIT블로그 NTS UIT개발실 기술블로그 wit.nts-corp.com front 관련 정보가 가득한 곳. 방문 강추~!!! 2020. 12. 25. 문법검사해보자 잘 만든 사이트인지 온라인으로 HTML , CSS 문법검사 해보기. 1. HTML 문법검사 validator.kldp.org/ The W3C Markup Validation Service 파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업로드가 되지 않을수도 있습니다. 이 경우에는, W3C QA 사이트의 information page 를 참고 하십시오. 직접 입력하여 유효성 검사 validator.kldp.org 2. CSS 문법검사 jigsaw.w3.org/css-validator/ W3C CSS 검사 서비스 파일 업로드를 통한 검사 직접 입력을 통한 검사 jigsaw.w3.org 2020. 12. 25. 웹 접근성 관련 1. Accessible Rich Internet Applications (WAI-ARIA) 1.1 www.w3.org/TR/wai-aria-1.1/ Accessible Rich Internet Applications (WAI-ARIA) 1.1 A section of a page that consists of a composition that forms an independent part of a document, page, or site. An article is not a navigational landmark, but may be nested to form a discussion where assistive technologies could pay attention to article ne www... 2020. 12. 25. 국제 접근성 가이드 WCAG2.1가이드 : https://www.w3.org/TR/WCAG21/ Web Content Accessibility Guidelines (WCAG) 2.1 Additional information about participation in the Accessibility Guidelines Working Group (AG WG) can be found on the Working Group home page. A.2 Other previously active WCAG WG participants and other contributors to WCAG 2.0, WCAG 2.1, or supporting resou www.w3.org 국제 접근성 가이드 입니다. 해외 사이트 제작시 참고하세요. 국내 사이.. 2020. 12. 25. gallery 따라 만들기 See the Pen gallery animation by ziziziczic (@ziziziczic) on CodePen. 아래 영상 강의를 보고 비슷하게 만들어 보았습니다. 자세한 내용은 영상을 참고하세요. 구현시 어려웠던 점. 1. button의 아웃라인을 초기화 하지 않아서 border가 계속 클릭시 마다 나왔다. 해결법 : button { outline:none; } 2. 코딩시 오타 주의 ! (시간 잡아먹는다.) 3. .gallery: before 와 after 의 위치 잡아주는 것. transform : translate(50%, 50%) 필요없다고 생각했다가 엉뚱한 곳에서 애니메이션이 시작됨. 2020. 12. 25. 테두리에 애니메이션을 적용해보자 See the Pen menu animation by ziziziczic (@ziziziczic) on CodePen. 2020. 12. 24. px에서 rem으로 쉽게 변환해주는 사이트 nekocalc.com/px-to-rem-converter PX to REM converter (instantly and bidirectional) PX ↔︎ REM conversion tables PixelsREM1px0.06rem2px0.13rem3px0.19rem4px0.3rem5px0.3rem6px0.4rem8px0.5rem10px0.6rem12px0.8rem14px0.9rem15px0.9rem16px1rem18px1.1rem20px1.3rem24px1.5rem25px1.6rem28px1.8rem32px2rem36px2rem40px3rem44px3rem48px3rem50px3re nekocalc.com px를 rem으로 손쉽게 변환해보자. 2020. 12. 19. 캐러셀 구현 - owl carousel 플러그인 (feat. jquery) Owl Carousel 플러그인은 터치스크린 지원, 자동 스크롤, 속도 조절, 오른쪽에서 왼쪽으로 스크롤등 여러가지 기능을 갖추고 있습니다. 특징은 화면상에 1개부터 n개까지 이미지를 표시가 가능하다는 것입니다. github.com/OwlCarousel2/OwlCarousel2 OwlCarousel2/OwlCarousel2 DEPRECATED jQuery Responsive Carousel. Contribute to OwlCarousel2/OwlCarousel2 development by creating an account on GitHub. github.com html 본문 보여주고 싶은 이미지를 item에 넣고, 이 item을 owl-carousel로 감싼다. script 내용 $(function().. 2020. 12. 18. 캐러셀구현 - bxSlider 플러그인 (feat. jquery) 장점1 : 캐러셀에 필요한 다양한 기능 지원 장점2 : 반응형 지원으로 모바일 캐러셀을 구현가능 bxslider.com/ jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com 주의점1 : 사용할 이미지들은 div에 각각 담기. 주의점2 : 전체 이미지들을 한 div로 감싸기. 주의점3 : 스크립트 파일에서 주의점2에서 지칭한 div를 선택. bxSlider() 함수를 호출한다. script 사용법 (div.bxslider로 전체이미지를 묶어둔 상태, 주의할 점은 bxslider는 지정된 클래스명입니다. ) $(function(){ $('.bxslider').bxSlider(); }); $(functi.. 2020. 12. 18. 이전 1 2 3 4 5 6 7 8 다음