[css] 1. css 편의성, 디자인, 참고자료 준비하기

안녕하세요. 오늘은 CSS 편의성과 디자인에 유용한 사이트를 소개해드리겠습니다.

 

 다들 처음 웹페이지를 디자인 할때 머리속이 하얗게 되면서 아무 생각이 안들때가 있습니다.

그럴때는 무작정 여러가지 예시를 보고 따라하면서 경험치를 쌓는게 좋다고 생각합니다.

 

 제가 즐겨찾기에 넣어둔 CSS참고자료 사이트를 소개해드리겠습니다.

 

 

1. 부트스트랩 Bootstrap

 

  가장 대표적으로 사용하는 사이트라고 생각합니다.

 무료이며, 편리하게 다양한 디자인을 사용할 수 있습니다.

 기본색상은 단졸하게 느껴질 수 있기 때문에 꼭 응용하셔서 사용하기를 추천해드립니다. 

 

 css링크와 Js링크를 추가하셔서 사용하셔야합니다. 

 

https://getbootstrap.com/

Bootstrap

2. W3school

 

 부트스트랩보다는 더 이쁜 디자인을 예시로 보여주진 않지만 충분히 참고할 수 있는 예시들이 있습니다.

 무료이며, 이쁜 디자인을 알려주기보다는 CSS를 배울수 있는 공간입니다. 

 정말 학교처럼 매우 다양한 것들을 배울 수 있다고 생각합니다.

 

https://www.w3schools.com/

W3Schools Free Online Web Tutorials

3. CSS 방법론 _ BEM 방식

 

 저도 이 방법을 보기 전까지는 class, id를 막 지어서 짜가지고 매우 자주, 많이 변경했었는데.. 

 이 글을 보고 최소한 어떤식으로 짜면 편리한지 알게 됐습니다. 여러분도 참고가 되면 좋겠네여

 

https://nykim.work/15

[CSS 방법론] BEM 방식

 

4. CSS3 상자 그림자 생성기

 

 상자, 폰트, 테두리 변경 등등 홈페이지에서 예시를 만들고 코드를 따올 수 있습니다. 

 굳이 안써도 되지만 조금 편하기 위한 사이트입니다.

 

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

CSS3 Box Shadow Generator - CSS3gen

 

5. Animista 주문형 css 애니메이션

 

 정말 다양한 애니메이션 예시를 만들어 사용할 수 있습니다.

 활용하는 만큼 좋은 퀄리티를 만들 수 있습니다.

 저는 개인적으로 애니메이션을 잘 사용하지 않아 들어가지 않습니다. ㅎㅎ

 

https://animista.net/play/basic/shadow-drop

Animista - CSS Animations on Demand

 

 

 

게시물을 좀 더 깔끔하게 만들고 제대로 된 정보를 전달해드리도록 노력하겠습니다.

(아직 좀 어렵네요 😢)

 

틀린부분이 있다면, 자유롭게 지적해주세요. 수정하겠습니다