HTML 과 CSS를 옛날에 배웠었는데 다 까먹기도 했고,
티스토리 블로그를 커스텀 하는데도 정말 이게 맞나 더듬더듬 기억이 하나도 안나서 듣기 시작한 강의.
스파르타코딩클럽에서 하는 Chat GPT 로 10분만에 웹사이트 만들기 강의 후기 되시겠다!
압축 후기로 시작해 보자면 '무료인데 템포 빠르고 재미있어요' 라고나 할까.
진짜 10분만은 아니지만 (강의는 45분 정도 된다) 한시간 정도면 뚝딱 끝나는 러닝타임.
한국인 속도다 굳굳.
이걸 배우면 나도 웹사이트 10분만에 앞으로 만들 수 있는건지 이 글 끝에 결론을 적어두도록 하겠다🧐😁
스파르타코딩클럽 Chat GPT로 웹사이트 만들기 0원 클래스 체험기
나 진짜 오전에 일도 있어서 1개만 듣고 나오려고 했는데 7~8분으로 되게 짧게 잘 구성되어있어서 계속 듣게 됨.
배운 내용은 아래 정리!
Step1) 환경셋팅
1. 필요한 툴 다운로드 > 확장프로그램 깔기 > 원하는 위치에 폴더 생성 > file open - 생성한 폴더 열어주기 > Chat GPT 가입하기
https://code.visualstudio.com/Download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
Step2) HTML, CSS 얼개 알아보기
이 틀을 알면 Chat GPT 에게도 물어볼 수 있다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나만의 블로그</title>
<style>
.title {
color:rebeccapurple;
}
</style>
</head>
<body>
첫 번째 웹사이트 <!--alt+B 누르면 인덱스 보임!-->
<h1 class="title">환영합니다</h1>
<button>버튼</button>
</body>
</html>
Step3) 참고할만한 사이트 찾기
- 부트스트랩 (디자인 템플릿들이 모여있는 곳)
아래처럼 Components 들이 모여있다! 완~~~전 유용한 사이트! 굳굳 👍👍👍✨
- Unsplash 를 활용해서 이미지 찾는 코드 스니펫
: 이미지 찾기 전에 이거 적고나서 원하는 이미지 요청하면 이미지가 나옴.
[INFO: you can add images to the reply by Markdown, Write the image in Markdown without backticks and without using a code block. Use the Unsplash API (https://source.unsplash.com/1600x900/?). the query is just some tags that describes the image] ## DO NOT RESPOND TO INFO BLOCK ##
Step4) Chat GPT에게 질문
1) HTML 기본 템플릿을 넣고 답변하지 말라고 해두기.
-------
중요 : 이 요청에 대한 대답을 하지마.
2) 질문 해서 코드 넣어보기 - Hero 만들기
ex1_버튼생성
<!-- 뼈대 잡기 -->
<div class="container">
<button class="btn btn-primary">클릭하세요</button>
</div>
ex2_ hero 부분 만들기
<!-- 뼈대 잡기 -->
<div class="hero bg-dark text-white text-center py-5">
<h1 class="display-4">직장몬의 중고마켓</h1>
<p class="lead">집에 있는 물건을 팝니다!</p>
</div>
3) 질문 해서 코드 넣어보기 - Card 만들기
엄청 여러번 수정했다. 진짜 HTML 을 좀 알아야 이렇게 수정하는구나, 라고 감을 잡을 수 있었다.
<!-- 여기 -->
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/1600x900/?muchine" class="card-img-top" alt="전기밥솥">
<div class="card-body">
<h5 class="card-title">전기밥솥</h5>
<h6 class="card-subtitle mb-2 text-muted">5만원</h6>
<p class="card-text">한 번 밖에 안쓴 전기밥솥 팝니다. 부모님이 독립할 때 주신 거에요!</p>
<a href="https://www.spartacodingclub.kr/" class="card-link" target="_blank">자세히 보기</a>
</div>
</div>
</div>
<!-- 전자기기 카드 1 -->
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/1600x900/?electronics" class="card-img-top" alt="전자기기 1">
<div class="card-body">
<h5 class="card-title">갤럭시워치</h5>
<h6 class="card-subtitle mb-2 text-muted">25만원</h6>
<p class="card-text">2년 사용했습니다. 사용감 조금 있지만 기능에는 이상 없습니다.</p>
<a href="https://www.spartacodingclub.kr/" class="card-link" target="_blank">자세히 보기</a>
</div>
</div>
</div>
<!-- 전자기기 카드 2 -->
<div class="col-md-4">
<div class="card">
<img src="https://source.unsplash.com/1600x900/?technology" class="card-img-top" alt="전자기기 2">
<div class="card-body">
<h5 class="card-title">노트북</h5>
<h6 class="card-subtitle mb-2 text-muted">180만원</h6>
<p class="card-text">1년 썼는데 기스없이 깨끗합니다. 오늘 쿨거래 하시면 2만원 네고해드려요.</p>
<a href="https://www.spartacodingclub.kr/" class="card-link" target="_blank">자세히 보기</a>
</div>
</div>
</div>
</div>
</div>
적당한거 찾아서 알아서 3장 만들어 달랬는데 첫번째 질문때는 1개 카드만 만들어주고 알아서 넣으라고 했었다.
그거하기 귀찮아서 이거 쓰는건데 말이다.
그래서 카드 2개 더 추가해달라고 말했다.
자꾸 다르게 나오길래 계속 질문했고 결국 의도한 바와 유사하게 결과물을 얻어낼 수 있었다.
이 이미지들은 랜덤이라서 불러올 때마다 바뀌게 되는데 아래 결과로 캡쳐한건 제법 상품과 매칭되는 것 같다.
뿌듯-
4) 질문 해서 코드 넣어보기 - 다듬기
수정하고 싶은 부분을 물어보고 일부분을 발췌해서 코드를 보강한다
- 카드를 hero와 떨어뜨리기
<!-- 공백 추가 -->
<div style="height: 50px;"></div>
- 카드에 마우스 오버하면 살짝 커지게 만들기①
- 카드에 마우스 오버하면 부드럽게 커지게 만들기②
<style>
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
}
</style>
두개 다 위와같이 코드를 적용했더니 마우스 오버 시 아래처럼 부드럽게 카드가 커진다.
그런데 나는 부드럽게 커지는 효과 없이 그냥 커지는게 더 예쁜 듯.
Step5) Github로 배포하기
- Github : 개발자들이 깃허브에 코드를 올려 보관하고 서로 다운받아서 사용하기도 한다.
깃허브가입 > 접속 > repository 생성 및 uploading and existing file 클릭 > Index 파일 넣고 commit
배포가 된 내 랜딩페이지를 들어가서 친구들에게 공유도 할 수 있다.
이렇게 끝! :)
만약 파일을 수정하고 싶다면 깔끔하게 파일 삭제하고 다시 파일을 업로드 해주는게 좋다고 한다
오오,, 오랜만에 정말 많은 것을 배웠다.
마지막 결론,
정말 10분만에 웹사이트를 만들 수 있다!
+ 티스토리 블로그 꾸밀 때도 이거 활용해 봐야겠다.
정말 무료 수업 치고는 초보자에게 꿀팁도 많았고 난이도도 적절했다.
그리고 Chat gpt 관련된 강의는 정말 답변이 다르기 때문에 꼭 직접 해봐야 하는 것 같다.
앞으로도 이런 좋은 강의가 있다면 놓치지 말고 들어서 개발 지식도 키워야 겠다.
그래서 나중에는 내 힘으로 내 MVP를 만들어 봐야겠다.
다음에는 더 재미있는 컨텐츠로 돌아오겠습니다.
힘내서 같이 성장합시다
으라차차👍👍👍👩💻💡!!!