 8������ �ε� �ִϸ��̼� ȿ���� ���� ������ �� �ִ� �ҽ��� �Բ� �����ϰ� �ֽ��ϴ�. Show ��� �߾ӿ� source�� Ŭ���ϸ� �˾��������� â�� �߰� HTML�� CSS �ҽ��� �����ؼ� �����ϰ� �ֽ��ϴ�.
강의를 보며, 혹은 Slack을 통해 알게 된 몇 가지 사이트들 정리이번 시간에는 노마드 코더 HTML&CSS 강의를 들으며 알게된 몇 가지 팁들이나 알면 좋은 사이트들을 정리해보고자 한다. 생각나는대로 이것저것 적어갈 예정이라 혹시 필요한 부분이 있다면 알아서 찾아가길 바란다.
유용한 사이트들1. AnimistaCSS 애니메이션 효과를 주고 싶은데 간편하게 복사해서 주고 싶은 분들을 위한 사이트. 페이지에 들어가서 각 버튼들을 눌러보면 어떤 애니메이션 효과가 작동하는지 알 수 있다.
https://animista.net/
Animista - CSS Animations on Demand Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use. animista.net
2. Box-Shadow GeneratorCSS로 그림자 기능을 넣고 싶을 때 이 사이트를 활용하면 좋다. 값을 이리저리 바꾸면서 마음에 드는 그림자 정도를 찾고 아래에 가서 복사-붙여넣기를 하면 완성이다. 직관적으로 구성이 돼있어서 아마 보면 바로 할 수 있을 것이다.
https://css3gen.com/box-shadow/
CSS3 Box Shadow Generator - CSS3gen Use this CSS3 Box Shadow Generator to generate box-shadow CSS3 snippets for your project. The CSS3 box-shadow property allows you to add depth to your website's design without the need for images or extra container elements. css3gen.com
3. Unsplash저작권 프리 무료 고퀄 이미지 사이트이다. 좋은 사진들이 많아서 아마 이 곳은 아마 자주 이용하게 될 것이다.
https://unsplash.com/
Beautiful Free Images & Pictures | Unsplash Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos. unsplash.com 4. BEM (Block, Element, Modifier)CSS 방법론 중 하나인 BEM에 대해 친절하게 예시와 함께 써주신 블로거 분의 글이다. BEM이란 'CSS 클래스네임을 어떻게 지으면 좋을지' 에 대한 이야기로, 나중에 만나게 될 어마어마한 양의 CSS 코드들을 찾기 쉽게 만들어줄 방법이라 거의 필수로 알아둬야 한다.
https://nykim.work/15
[CSS 방법론] BEM 방식 오늘은 CSS 방법론을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지' 고민해보는 거죠. 방법론에는 여러 가지가 있는데, 최근 BEM을 실무에 도입하 nykim.work 5. Poiemaweb패스트캠퍼스에서 강사로 활동중이신 이웅모 님의 홈페이지인데, 이 곳에 프론트엔드 개발자를 목표로 하는 분들이라면 어떤 것을 공부해야 하는지 잘 알 수 있다. 복습 겸 쭉 훑어보는 것도 추천한다.
https://poiemaweb.com/
웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb.com 6. Flexbox Froggy아마 예상컨데 CSS를 하며 헷갈릴 수 있는 부분이 바로 Flex와 관련된 부분일 것이다. 이 사이트를 통해 Flex의 사용법을 게임으로 재미있게 이해할 수 있다.
https://flexboxfroggy.com/#ko
Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com
7. Selector 연습 사이트Selector를 연습할 수 있는 사이트이다. 정확히 어떻게 쓰는지는 헷갈리지만 6번과 동일하게 게임 형식으로 배울 수 있다고 한다.
https://flukeout.github.io/#
CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io
8. <input type="range"> 커스터마이징에 관한 내용과제를 하며 range의 디자인을 수정하고자 했는데 뭔가 적용이 안되는 것이었다. 그 때 알게 된 내용이 바로 이것이다. 나는 크롬을 사용하는데, IE나 파이어폭스에 비해 Range를 커스터마이징할 수 있는 폭이 좁다는 것을 알게 되었다.
https://okayoon.tistory.com/entry/input-%ED%83%80%EC%9E%85-range-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%88%98%EC%A0%95%ED%95%98%EA%B8%B0%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%8A%A4%ED%83%80%EC%9D%BC
input 타입 range 스타일 수정하기_커스텀 스타일 ++ 추가 사항 태그로 제작한 부분이 모바일에서 터치 이동이 안되는 이슈가 있었습니다. 그래서 어쩔수 없이 태그를 사용하여 커스텀하는 형식으로 작업했습니다. 기록상 글을 작성합니다. 글 okayoon.tistory.com 9. Font Awesome폰트 사이트이다. 마음에 드는 아이콘을 선택해 HTML 코드를 따서 붙여넣으면 자동으로 생성된다!
https://fontawesome.com/
Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 10. 폰트 트렌드다양한 폰트 아이디어를 얻고 싶다면 이 사이트를 추천한다. https://photoshopvip.net/120163
HTML/CSSで表現できる、すごいテキストエフェクト用スニペット44個まとめ - PhotoshopVIP この記事では、CSSで表現できる新作テキストエフェクト用HTMLスニペットをまとめています。コピー&ペーストで利用できるサンプルやテクニックが満載です。 photoshopvip.net 11. Kakao Clone github page내가 만든 카카오 클론 깃헙 페이지이다. 노마드코더에는 챌린지 라는게 있는데, 거기서 마지막에 제출해야하는 과제가 바로 이것이다. 어떤 느낌인지 궁금하다면 한번씩 클릭해보길 추천한다. 허접하긴 하지만 마음에 들면 팔로우도..ㅎ |
애니메이션 효과 사이트 - aenimeisyeon hyogwa saiteu
관련 게시물
저작권 © 2024 toptenid.com Inc.
