[웹 개발]나만 알고싶은 웹 개발 시 유용한 사이트 엄선 10선 공유&모음(폰트, 배경, 아이콘 등..)
안녕하세요
오늘은 웹 개발 시 유용한 사이트 공유를 해보려고 합니다
미리 소개했던 부분도 있고
유용할 만한 사이트 몇가지 알려드리도록 하겠습니다
사이트 링크와 제가 포스팅했던 적있는 글들도 같이 링크 남기도록 하겠습니다
1. Google Font(구글 폰트)
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
웹 상의 폰트를 바꾸거나 내 폰트를 바꿀 때 엄청 유용한 사이트입니다
워낙 유명해서 아마 대부분 아실거라고 생각이 됩니다
2020/12/23 - [웹코딩 공부&공유/css] - (공유) 나만 모르는 웹 폰트 사용법이 있다? - 혹시 구글폰트 몰라?
(공유) 나만 모르는 웹 폰트 사용법이 있다? - 혹시 구글폰트 몰라?
안녕하세요 ~ HTML / CSS를 공부하고 있는 학생입니다 여러분들 보통은 웹 개발에 처음 오게 되시면 다른 동영상이나 다른 개발하시는 분들을 봐도 대부분 Visual Studio Code를 추천하시니까 많이들 사
homnay.tistory.com
혹시 모르시는 분들을 위하여
제가 포스팅 한 적이있으며
참고하셔서 예쁜 폰트 골라서 사용해보시는거 추천 드립니다
2. Font Awesome
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
웹상의 아이콘을 이미지 형식이 아닌 텍스트형식으로 제공해주는 사이트입니다
이 사이트 역시 워낙 유명해서 대부분 아실거라고 생각이 됩니다
생각보다 저는 아이콘 사용을 자주 하는 편이기 때문에
아주 유용하게 사용하고 있는 사이트 입니다
이 역시 제가 포스팅 한 적이 있어서 링크 남기도록 하겠습니다
모르시는 분들은 한번 사용해 보시길 추천 드립니다
2020/12/25 - [분류 전체보기] - [html/css] 웹 개발시 폰트형 아이콘을 사용해보자 - FontAwesome 사용법 & 활용하기
[html/css] 웹 개발시 폰트형 아이콘을 사용해보자 - FontAwesome 사용법 & 활용하기
안녕하세요 오늘은 폰트형 아이콘을 사용하는 방법을 알려드리겠습니다 저는 메뉴, 로고 등에 텍스트만 있으면 심심해서 이 사이트를 자주 애용하는 편입니다 자주 애용하는 정도가 아니고 항
homnay.tistory.com
3. Pinterest
디자인을 함에 있어서 항상 새로운 디자인이 생각날 수는 없는거 같습니다
공부할때는 디자인을 생각하는거 보다
제 기술을 높이는게 먼저라고 생각 되기 때문입니다
많은 사람들의 웹 페이지를 보면서 이렇게도 하는구나
저렇게도 하는구나 하는걸 느끼면서
똑같이 만들어도 보고 만들어서 바꾸어도 보고 하면서 기술이 확 올라가지 않을까 싶습니다
요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요.
www.pinterest.co.kr
저는 보통 검색창에
홈페이지, 반응형 홈페이지, responsive website
라고 검색을 하여서 다양하게 보고 있습니다
그 이외에도 포트폴리오 등을 검색하셔서 많은 디자인들을 참고하시기에 좋습니다
4. Codepen.io
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
Visual Code를 사용할 필요없이
웹상에서 즉각적으로 코딩할 수 있는 사이트 입니다
다른 여러 사람들이 한것을 토대로 코드를 들고와서
수정을 해볼 수 도 있고, 공부를 할 수도 있습니다
잘 하시는 분들이 많기 때문에
필요한 부분을 한번 검색창에 검색하시면서 공부해보시기 바랍니다
5. W3school
처음 제가 웹 언어를 공부하면서 많은 도움을 받았던 사이트 입니다
HTML5, CSS3, Javascript, 그 외 활용법 등
다양하게 소스들이 존재하기 때문에 처음 공부하실 때 아마 엄청 도움 되실것 같습니다
하지만, 이렇게 자료들을 찾아보다 보니
여타 다른 분들중에는 "자료가 오래되서 좋지 않다" 라고 하시는 분들도 계시더라고요
그래도, 가볍게 공부하고 참조하신다는 느낌으로 한번 찾아보시면 좋습니다
www.w3schools.com/html/default.asp
HTML Tutorial
HTML Tutorial HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn - You will enjoy it! Start learning HTML now » Easy Learning with HTML "Try it Yourself" With our "Try it Yourself" editor,
www.w3schools.com
6. MDN
요즘에 W3school 보다는 이 사이트를 많은 분들이 사용하고 계시더라고요
그 만큼 다양한 소스도 여기에 존재하고 있습니다
또한, 세부적인 내용까지 같이 담고 있고요
옛날에는 한글이 지원이 안되어서 어려움이 많았다고 하던데...
얼마나 오래전인지 저는 잘 모르겠네요..
지금은 거의 대부분 다 번역이 되어있어서 접근성이 아주 좋습니다
MDN Web Docs
MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문
developer.mozilla.org
7. Pixabay
라이센스 걱정 없이 사용하는 이미지, 동영상을 찾으시면 이 사이트가 제격입니다
정말 방대한 사진, 이미지, 일러스트들이 있습니다
물론, 돈 주고 이미지를 사는 사이트들에 비하면
내 마음에 쏙 드는 사진을 찾기는 힘들지만
아직도 저는 잘 활용하고 있는 사이트 입니다
무료로 제공 해주는게 어디인가 싶어서요 ㅎㅎ
8. Dribble
Dribbble - Discover the World’s Top Designers & Creative Professionals
Discover the world’s top designers & creatives Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals. Sign up
dribbble.com
핀터레스트와 마찬가지로 제공이 되지만
여기서 올려주시는 분들은 좀 더 좋은 스킬을 가지신 분들 작품을 많이 볼 수 있습니다
웹 개발 이외에도 디자이너 분들이 많이 사용한다고 하시더라고요
제가 아직 그정도가 아니라서 그런지 잘 보진 않지만
다양한 분들의
예쁜 고퀄리티 작품을 보고싶으신 분들은 여기서 보시면 좋을것 같습니다
9. Unsplash
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
이 사이트 또한 다양한 이미지를 제공하고 있는 사이트 입니다
Pixabay에서 찾지 못한 이미지들은 여기서 한번 찾아보세요
저도 왔다 갔다 하면서 이미지를 찾아보곤 합니다
10. 생활코딩
아마 처음 언어를 공부하실 때 대부분 이분 동영상을 한 번이라도 지나치거나
들어보셨다 하시는 분들이 많을거라고 예상이 됩니다
그만큼 잘 가르쳐주시기도 하시구요
저 역시 텍스트로만 글 읽는게 싫어서 동영상 강의를 많이 봤었지만
기초를 잡는데 참 좋았던 사이트 입니다
WEB - 생활코딩
2018년 8월 1일부터 14일까지 10일동안 코딩야학 4기가 시작됩니다. 혼자 공부하지 마시고, 함께 공부해보세요. 현업의 엔지니어들이 기술지원과 상담을 해드리고, 완주하신 분들께는 수료증도 드
opentutorials.org
이상으로 나만 알고싶은 웹 개발 시 필요한 10선 포스팅 마치도록 하겠습니다
꼭 해야한다는 아니지만 한 번씩 들어가보시는 걸 추천드립니다
저 또한 그랫듯..
상당한 도움이 되지 않을까 싶습니다
글 읽어주셔서 감사합니다
혹시 모르시는 사항 또는 궁금하신 사항 또는 지적사항 댓글로 꼭 알려주세요
같이 공부하면 너무 좋을것 같습니다 !!
댓글