[CSS 기초와 활용] 구글 클론 사이트 만들기 (feat. 개발자도구, 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...

 

이번 영상이 조금 어렵게 느껴지시는 분들은 css기초 학습 사이트에서 이론 공부를 조금 하시고 다시 시청하시면 이해가 더 잘 되실겁니다!

질문사항은 언제든 댓글 남겨주세요~!

추천 기본 개념 학습 사이트

- Codecademy(미션) : https://www.codecademy.com/learn/lear...

- 생활코딩(영상) : https://opentutorials.org/course/3086

- 웨버스터디(문서) : webberstudy.com

 

안녕하세요! 누구나 배울 수 있는 쉬운 코딩 채널을 만들어가는 조코딩입니다.

이번 영상에서는 CSS에 대해 알아보겠습니다.

CSS는 앞선 강의서 배운 HTML을 꾸며주는 역할을 하는 언어입니다.

특정 HTML 요소를 지정하고 위치를 움직이거나 색이나 크기 등을 바꿀 수 있죠.

CSS를 처음부터 끝까지 다루기에는 양이 너무 많을 수 있어서 상세한 내용은 HTML 1강에서 소개 드린 학습 사이트를 참고하시면 좋을 것 같습니다. 우리는 바로 CSS를 활용하는 부분으로 넘어가도록 하겠습니다.

그래도 CSS를 전혀 모르고 이 영상을 보시는 분들도 이해할 수 있도록 가장 기본적인 개념은 알려드리고 화면을 통해 실습을 해보면서 막히는 부분이 있을 때 어떻게 Google링을 통해 해결할 수 있는지도 알아보겠습니다.

또, CSS를 잘 몰라도 완전 있어보이는 사이트를 만들 수 있는 엄청난 꿀팁도 드릴 예정이니 영상 함께 끝까지 봐주시기 바랍니다

그러면 화면을 통해 함께 보시죠!

 

그런데 이것 처럼 h1 태그가 여러개 있을 때

각각 다른 색으로 바꾸고싶을 때는 어떻게 해야할까요?

바로 class 혹은 id로 태그를 선택하고 선택한 태그만 바꿀 수 있습니다.

먼저 Class는 여러 요소를 공통적으로 바꿀 때 사용됩니다. 여기서 바나나와 망고는

공통적으로 노란색이기에 때문에 같은 클래스를 지정하여 모두 바꿀 수 있습니다.

사용법은 점을 찍고 클래스 이름을 작성하여 선택하시면 됩니다.

반면 id는 단 하나의 요소를 선택할 때 사용됩니다. 여기서 보라색은 포도 밖에 없어서 ID를 사용하여 바꿀 수 있고 사용법은 샵 뒤에 아이디 이름을 작성하여 선택하시면 되겠습니다.

그러면 이렇게 브라우저에서 각각 다르게 표현된 것을 볼 수 있죠.

참고로 선택자는 태그 보다는 CLASS가 쌔고 CLASS 보다는 ID가 쌔서 이렇게 H1으로 다 빨간색을 만들어 놓더라도 각각의 색으로 덮어쓰기가 됩니다.