[CSS 기초와 활용] 구글 클론 사이트 만들기! 개발자도구와 Bootstrap, codepen 활용

CSS의 개념과 기초 문법에 대해 학습하고 이를 이용해 Google 유사 클론 웹사이트(Joogle)를 만드는 학습 영상입니다. 영상에 나온 것 처럼 CSS를 모두 외워서 사용하는 것이 아니라 google에 검색하여 관련 내용을 찾아서 적용하시면 훨씬 시간을 아낄 수 있습니다. 또, Bootstrap, Materialize, Semantic UI 등 CSS를 미리 만들어 놓은 라이브러리를 이용하시면 조금 더 쉽게 원하는 사이트를 구축하실 수 있습니다. (MIT라이센스 - 상업적 이용 무료)

Bootstrap: https://getbootstrap.com
Materialize: https://materializecss.com
Semantic-Ui: https://semantic-ui.com

Codepen은 독특하고 화려한 UI요소들이 많지만 개인 개발자분들이 올려주신 것이라 별도의 라이센스 확인이 필요합니다. 보통 MIT라이센스(상업적 이용 무료)를 따르며 어떻게 쓰든 상관없이 주석으로 라이센스만 붙여넣으시면 전혀 문제가 없습니다. 그러나 특정 작품은 Private 라이센스를 등록한 경우도 있으니 유의하여 꼭 확인해보세요!
Detail View - License 에서 확인 가능
(참고로 여기서 HTML, CSS, JS 파일을 편리하게 작성할 수 있어 간단한 것은 여기서 코딩하시는 분들도 많습니다!)

라이센스 설명: https://blog.codepen.io/legal/licensing
라이센스 확인 방법: https://blog.codepen.io/documentation/views/details-vew

이번 영상이 조금 어렵게 느껴지시는 분들은 css기초 학습 사이트에서 이론 공부를 조금 하시고 다시 시청하시면 이해가 더 잘 되실겁니다! 질문사항은 언제든 댓글 남겨주세요~!

추천 기본 개념 학습 사이트
- Codecademy(미션) : https://www.codecademy.com/learn/learn-css
- 생활코딩(영상) : https://opentutorials.org/course/3086
- 웨버스터디(문서) : webberstudy.com

완성 코드 보기
https://github.com/youtube-jocoding/google-clone-joogle

Видео [CSS 기초와 활용] 구글 클론 사이트 만들기! 개발자도구와 Bootstrap, codepen 활용 канала 조코딩 JoCoding