웹개발 종합반 개발일지

키워드 : html css bootstrap js

간단한 자바스크립트 기능과 css로 정적 페이지를 구현하는 법을 배웠다! 심화과정 3번째

유저가 사용하기 편하게 만든 템플릿 사이트는 부트스트랩 말고도 여러가지가 있다.
단순히 컴포넌트 형이 아닌, 자바스크립트 기능을 갖춘 코드도 cdn만 있으면 간편하게 적용시킬 수 있다.

부트스트랩 http://bootstrapk.com/javascript/#modals

웹개발 종합반에서 추천하는 템플릿 사이트
안정적이고 기능이 많다. 장점 - js특화, 매직박스 + 밸런스형이라 초보자에게 적합 / 단점 - 안이쁨

크리에이티브 팀 - 부트스트랩 https://www.creative-tim.com/bootstrap-themes/free

부트스트랩으로 제작한 페이지 템플릿 사이트
장점 : 이쁘다, 무료도 많다! / 단점 : 유료도 많다...

제이쿼리 ui https://jqueryui.com/tabs/#ajax

제이쿼리를 활용한 ui공유 사이트
장점 : 부트스트랩보다 심화된 기능들 / 단점 : 더 안이쁨, 매직박스 형이라 스타일 변화주기 힘듦

머터리얼 ui https://mui.com/components/

리액트 특화 아이콘+ui공유 사이트
장점 : 가져오기 변형하기가 쉽다 / 단점 : 리액트에 대한 이해가 필요함

테일윈드css https://tailwindcss.com/docs/box-decoration-break

css 특화 라이브러리 사이트
장점 : css를 이쁘게 빨리 만들 수 있음 / 단점 : only css특화 + cdn일 경우 타 라이브러리에 무척 폐쇄적

폰트어썸 https://fontawesome.com/v4.7/icon/address-card

svg 없이 cdn과 단어 몇개만으로 아이콘을 쓰게 해주는 사이트
장점 : 아이콘이 이쁘고 코드가 짧음 / 단점 : import하지 않으면 5버전 이상의 최신 아이콘들은 적용되지 않음

스위퍼.js https://swiperjs.com/swiper-api#parameters

js기반 슬라이드 라이브러리 사이트
장점 : 테일윈드와 충돌하지 않음 / 단점 : 공식문서가 눈아픔

애니메이트css https://animate.style/

100개 이상의 css 기반 애니메이션 프리셋 라이브러리 사이트
장점 : 간단하고 이쁜 애니메이션 / 단점 : 프리셋 이름이 길어서 공식문서 보면서 해야 함

와우.js https://wowjs.uk/docs.html

애니메이트css에 스크롤 효과 더하고 싶을때 쓰는 라이브러리 사이트
장점 : 유명해서 한국어 강좌 블로그가 많음 / 단점 : 애니메이트css특화라 쓰려면 둘다 잘알아야함

애니미스타 https://animista.net/play/entrances/bounce-in

cdn도 필요없는 초간편 애니메이션 코드 공유 사이트
장점 : 간편하고 직관적인 사이트 이용, 조절옵션이 많아 좋음 / 단점 : 프리셋들이 동작이 쪼금 과한면이 있음

테일윈드css 템플릿 사이트 추천

쓰다보니 테일윈드가 좋다. 직관적이고 이쁘다.

테일블록스 https://tailblocks.cc/

테일윈드 페이지 템플릿 사이트
컬러파레트 변경, 반응형 웹, 야간모드 완벽지원!

크리에이티브 팀 - 테일윈드 스타터키트 https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/css/progressbars

위에 부트스트랩 템플릿 파는 분들이 만든 컴포넌트 템플릿 사이트
자바스크립트 기반의 유용한 컴포넌트들이 많음!

테일윈드 컴포넌츠 https://tailwindcomponents.com/

알파인.js와 연동한, 특색있는 아이템들이 올라오는 템플릿 '공유사이트'

코드펜 https://codepen.io/

이것도 템플릿 '공유사이트', 프레임워크 별 아이템 찾기 수월함