[HTML, CSS] 4. HTML, CSS 유용한 사이트 정리 (by Nomad Coders)

강의를 보며, 혹은 Slack을 통해 알게 된 몇 가지 사이트들 정리

 이번 시간에는 노마드 코더 HTML&CSS 강의를 들으며 알게된 몇 가지 팁들이나 알면 좋은 사이트들을 정리해보고자 한다. 생각나는대로 이것저것 적어갈 예정이라 혹시 필요한 부분이 있다면 알아서 찾아가길 바란다.

 

 

유용한 사이트들

  1. Animista

CSS 애니메이션 효과를 주고 싶은데 간편하게 복사해서 주고 싶은 분들을 위한 사이트. 페이지에 들어가서 각 버튼들을 눌러보면 어떤 애니메이션 효과가 작동하는지 알 수 있다.

 

https://animista.net/

Animista - CSS Animations on Demand

 

  2. Box-Shadow Generator

CSS로 그림자 기능을 넣고 싶을 때 이 사이트를 활용하면 좋다. 값을 이리저리 바꾸면서 마음에 드는 그림자 정도를 찾고 아래에 가서 복사-붙여넣기를 하면 완성이다. 직관적으로 구성이 돼있어서 아마 보면 바로 할 수 있을 것이다. 

 

https://css3gen.com/box-shadow/

CSS3 Box Shadow Generator - CSS3gen

 

  3. Unsplash

저작권 프리 무료 고퀄 이미지 사이트이다. 좋은 사진들이 많아서 아마 이 곳은 아마 자주 이용하게 될 것이다.

 

https://unsplash.com/

Beautiful Free Images & Pictures | Unsplash

 

4. BEM (Block, Element, Modifier)

CSS 방법론 중 하나인 BEM에 대해 친절하게 예시와 함께 써주신 블로거 분의 글이다. BEM이란 'CSS 클래스네임을 어떻게 지으면 좋을지' 에 대한 이야기로, 나중에 만나게 될 어마어마한 양의 CSS 코드들을 찾기 쉽게 만들어줄 방법이라 거의 필수로 알아둬야 한다.

 

https://nykim.work/15

[CSS 방법론] BEM 방식

5. Poiemaweb

패스트캠퍼스에서 강사로 활동중이신 이웅모 님의 홈페이지인데, 이 곳에 프론트엔드 개발자를 목표로 하는 분들이라면 어떤 것을 공부해야 하는지 잘 알 수 있다. 복습 겸 쭉 훑어보는 것도 추천한다.

 

https://poiemaweb.com/

웹 프로그래밍 튜토리얼 | PoiemaWeb

6. Flexbox Froggy

아마 예상컨데 CSS를 하며 헷갈릴 수 있는 부분이 바로 Flex와 관련된 부분일 것이다. 이 사이트를 통해 Flex의 사용법을 게임으로 재미있게 이해할 수 있다.

 

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

7. Selector 연습 사이트

Selector를 연습할 수 있는 사이트이다. 정확히 어떻게 쓰는지는 헷갈리지만 6번과 동일하게 게임 형식으로 배울 수 있다고 한다.

 

https://flukeout.github.io/#

CSS Diner

 

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 스타일 수정하기_커스텀 스타일

9. Font Awesome

폰트 사이트이다. 마음에 드는 아이콘을 선택해 HTML 코드를 따서 붙여넣으면 자동으로 생성된다!

 

https://fontawesome.com/

Font Awesome

10. 폰트 트렌드 

다양한 폰트 아이디어를 얻고 싶다면 이 사이트를 추천한다.

https://photoshopvip.net/120163

HTML/CSSで表現できる、すごいテキストエフェクト用スニペット44個まとめ - PhotoshopVIP

 

 

11. Kakao Clone github page

내가 만든 카카오 클론 깃헙 페이지이다. 노마드코더에는 챌린지 라는게 있는데, 거기서 마지막에 제출해야하는 과제가 바로 이것이다. 어떤 느낌인지 궁금하다면 한번씩 클릭해보길 추천한다. 허접하긴 하지만 마음에 들면 팔로우도..ㅎ

 

https://sangseophwang.github.io/kakao-clone/

Niko+ Run Talk