[ad_1]
https://i.ytimg.com/vi/_YrXKxY8PTY/hqdefault.jpg
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
Original source
34 responses to “[CSS 기초와 활용] 구글 클론 사이트 만들기! 개발자도구와 Bootstrap, codepen 활용”
처음에 !표 누르고 tab를 눌렀더니 아무것도 안 돼요.
저는 버전이 달라서 그런지 자동 완성 기능이 있기는한데 ! + tap은 안돼내요
오늘은 좀 어려웠어요 ㅠㅠ그래도 계속 공부~
죽을?주글?
잘 따라가고 있었는데 중간부터 visual studio 저장에러가 계속 나서 힘들었네요.
웹상에서 확인하기 위해 save하면 "Failed to save ~~" save as로 해서 열면 열리고…
기존 파일은 아예 열리지도 않고…무슨 현상일까요? ㅠ
그래도, 끝까지 완주(?)는 했습니다. 감사합니다.
정말 쉽게 잘 설명해주셔서 이해가 잘 됩니다~ 감사해요^^
그 검색할때 검색창에 "아아"라고 하고 버튼을 눌렀을때 아아라는 이벤트를 어떻게 api로 넘겨주나요 고정값이 아닌 변수로 어떻게 주고받나요
ㅇ..이해가 안되는게 정상이겠..조ㅡ?
조코딩님.. 코드펜에서 html, css를 따와서
<link rel =stylesheet href="style.css">연결까지 하고
html css 다 복사하고 자바까지 html에 <Script>로 복붙하는데
코드펜 다 완벽하게 가져오지를 못해요..
새파일에서까지 해도….
jquery따오시는거 보면 <script>링크 뭐 넣던데 코드펜은 찾아봐도 없고…
도와주세요 조코딩님 ㅠㅠㅠ
안녕하세요. 좋은 영상 감사드립니다. 영상을 보고 코딩을 시작 하였는데 bootstrap에서 Caruosel이라는 것을 사용하기 위해 작성중인 html 파일에 넣었습니다. 하지만 적용이 제대로 되지 않고, 예시 처럼 나오지 않습니다. 아무리 찾아봐도 방법이 없어서 여기서 질문 드립니다. 아래는 작성한 html코드이며 css파일의 내용은 공백입니다. 해결방법 부탁드립니다. 감사합니다!!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>COMHELP</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">COMHELP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">조립가이드<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">수리가이드</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">월간 견적</a>
</li>
</ul>
</div>
</nav>
</header>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="…" class="d-block w-100" alt="…">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="…" class="d-block w-100" alt="…">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="…" class="d-block w-100" alt="…">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
초반부분에 index.html이랑 style.css 추가 하셨잖아요,
로또 번호 랜덤으로 나오게 rails 쓰려면 어떤거 검색하고 추가해야 되나요??
안녕하세요 CSS배우고 싶은 초등학생입니다 혹시 마우스 모션블러라는 사이트가 있던데 이거는 어떻게 하는지 알려 주실수 있나요?
https://codepen.io/igcorreia/pen/pJvOpL
유용한 기초 영상 감사합니다. 좋아요 완료!!!
안녕하세요 조코딩님. 4:58에서 index 크기가 0kb로 떠서 더블클릭했을때 아무화면이 안뜨는데 어떻게 해야하나요? 조코딩님이랑 똑같이 했는데..
이렇게 이해 잘되게 설명해주는 영상 없는거같아요ㅜㅜㅜ 너무 감사해요~ 앞으로도 잘보겠습니다
아이고 머리야…
최고에요….
너무 빨라요.천천히 좀..말씀해주세요. 그리고 몇가지 빠뜨리거나 흘려서 말하는거랑 정확하게 어디에 붙이는지 버튼 없애는 영상도 사라지고….모르는사람은 그런거 그냥 지나가버리면 찾게되고 헤메게 됩니다.어떻게 된거지??하고 ….영상이 길어도 좋으니 잘 보고 따라할수있게 좀 천천히 정확하게…….부탁드려요 ㅜㅜ
코딩 조님! 제가 h1~h6까지 사용해서 사이트를 만들고 있는데 h7부터는 없더라구요… 어케 해야 되나요? 스팬까지 써도 적어서..
대학에서 ppt로 문법 잔뜩 써놓고 하나하나 읽어주는데 이 영상이 더 도움되네요
키 자막 보고 깜짝 놀랐습니다.
세세한 부분까지 이렇게 챙겨주시다니..
감사합니다.
충격적이다.. 강의 퀄리티가 정말 좋네요
안녕하세요
또 댓글을 남기게 됬네요……….(죄송합니다)
혹시
Bootstrap는 저작권 문제가 있나요?
항상 감사합니다 제가 가장 좋아하는 코딩 유튜브 채널입니다 🙂
너무 재밌게 잘 따라하면서 배웠습니다 ㅎㅎ 기본지식을 배우고 강의를 보니깐 더 유용하게 느껴지네요 감사합니당 더 배울려고 보니 css강의는 하나밖에 없더라구요ㅠ 이런 클론이나 유용한 다른 css강의도 올려주시면 열심히 배우겠습니다 다른강의도 차근차근 배우겠습니다 ㅎㅎ 감사합니당
Alt w책갈피9:32
10:43 부모자식
Bootstrap 으로 검색창 만들기
스포이트가 안나타나네요ㅠㅠ
저 조코딩님 코딩공부하다 궁금한게있는데요 지금 처음 인강보면서 공부중입니다 인강에서 html css 강좌관련해서 강의내용에관한소스코드를 깃허브에올려주시는데요 이걸보고 제가직접 모든소스코드를다작성해보면서 공부하는게도움될까요? 소스코드는 어떤식으로이용해서 공부하는건지 궁금합니다 그리고 소스코드 작성하실때 모든 코드가 어떤개념인지 생각하면서 공부하는법은 좋은건가요? 강의잘보고있습니다!
코로나 때문에 갇혀있어서 너무 힘들었는데 우연히 조코딩채널을 알게되서 팔자에도 없던 코딩 공부하고 있는데 왠지 점점 재밌어지고 있네요 ^^
이참에 간단한 채팅사이트나 커뮤니티사이트 같은거 프로젝트로 정해놓고 실습삼아 한번 만들어봐야겠네요. (지금 기분에는 왠지 가능할꺼 같지만 힘들겠죠?ㅋㅋ)
이런 유용한 강의를 만드는데 시간도 많이 들었을텐데 컨텐츠 양이 너무 부족해 유튜브 수익은 얼마 안나오겠네요. (열정페이도 아니고 완전히 재능기부네요)
수익도 좀 나고 해야 강의영상 만들 기분도 날텐데.. 지치지 마시고 계속 좋은 강의 부탁드립니다!
오늘부터 조코딩이 내 코딩스승입니다! ^^
좋은 강의 감사드립니다. 독학하는데 정말 많은 도움이 됩니다. 앞으로도 꾸준히 강의 시청하겠습니다.
좋은 컨텐츠 만드기 위해 얼마나 노력 하시는지 상상도 안됩니다. 앞으로도 좋은 영상 많이 올려주세요 감사합니다. 화이팅
생활코딩 css까지 듣고 넘어왔습니다. 개념은 이해했는데 막상 실습할만한게 없어서 막막했는데 정말 따라하면서도 너무 유용한 강의 감사합니다.
영상 너무 좋은 정보 감사합니다.같이 따라도 해보고너무 신기하고 재미도 있습니다. 그동안 몰랐던 코딩이랄지 기초 지식이 많이 없었는데 너무나도 쉽게 이해할수 있도록 영상 만들어주신점 정말 감사드립니다. 그러면서 궁금한게 있는데 저희 회사에서 인스타그램으로 홍보를 많이 하고 있습니다. 그래서 필요한 작업중에 하나가 사진으로 업데이트 되는 저희 상품의 이미지가 있다면 그 상품을 인식하고 식별할수 있는 인공지능을 만들수 있을지 궁금합니다.가능할까요?
혹시 인터넷 창이 아니라 컴퓨터에 있는 프로그램을 실행하는 방법도 알수 있을까요ㅜㅜ
조코딩님 우리가 만든 구글클론사이트를 직접 https 에적용하려고 netlify에서 디플로이를 해봤는데 page not found오류가 나더라구요 오류가 왜 나는지 알 수 있을까요??
안녕하세요, 좋은 강의 감사합니다. 비슷하게 따라해서 유투브 동영상을 검색해서 보여주는 것 까진 만들었는데요, form으로 입력받은 텍스트와 다른 특정한 텍스트를 조합해서 search query 를 입력하려면 어떤걸 공부해야 할까요? 자바 스크립트를 이용해서 원하는 문자열을 더해주면 될거 같은데 생각대로 안되네요.. ㅜ.ㅜ