무자본 소자본 창업 준비 과정 #1_스파르타 코딩 기초 <2023년 나의 버킷리스트 만들기> 정리

퇴사 후 창업준비, 스파르타 웹개발 종합반 1주차 강의 정리 및 후기

 

코딩에 코자도 모르던 내가 30분만에 뭔가를 하나 만들었다!! 

어렵게만 생각했던 코딩인데 생각보다 간단해서 신기하기도 하고 더욱 흥미가 생겼다.
웹개발 종합반 남은 코딩 4주가 기대가 된다.

 

1주차를 듣고 기초강의를 들어선지 확실히 쉬웠다. 

저번 시간 복습한 기분?

 

📎스파르타 코딩 기초강의 듣는 곳

스파르타코딩클럽 무료특강 | 2023 나만의 버킷리스트 만들기

 

기초강의에서 설치툴은 VS (Visual studio code)

 

VS 설치 (무료)

https://code.visualstudio.com/Download

 

버킷리스트를 만들기 위해 필요한 기본 자료들이 코드스니펫에서 따로 일일이 복사해야하는 번거로움이 있어서 이 곳에 자료들을 모아두려고 한다. 

 

📌배경이미지

background-image : url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bg-grid.png");

 

📌버킷이미지1,2

background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bucket-red.png");

background-size: cover;

background-position: center;

 

background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bucket-lightred.png");

background-size: cover;

background-position: center;

 

📌폰트 구글 사이트

https://fonts.google.com/?subset=korean

 

📌스파르타에서 공유해준 테마

https://www.notion.so/teamsparta/2023-eee0e4c33563484bbce59df71dae2835#a14805f14cca462f8767e0bca577afd1

 

📌배포하기

https://github.com

 

 

 ✏️ tip

👉폰트는 스타일 바로 아래에 적용

원하는 폰트 html, css 언어 두가지를 다 적용해야한다. 

1. <style> html 언어 <style/>

2. * { CSS 언어 }

 

👉* {  }  :  전체 다 를 의미함

 

👉스타일시트

<style/> 아래에 붙이기

 

👉화면의 중앙으로 오게 하는 법 'center' 넣기

<(body) class=“bg center”>

<(div) class=“bucket img1 center”>

 

👉<div class="row ▶︎flex-row wrap"> 박스가 두칸으로 나눠짐

 

 

 

 

👉배포하기 '깃헙' 설치 방법

1. Sing up - 이메일- 패스워드 지정 - 유저네임 본인이름+숫자 -
2. Type “n”

 

 

3. 그림 고르기

4. Create account

5. 이메일 코드 입력

 

 

6. skip

 

 

7. Create repository - name : mypage - 아래쪽 내려가서 Create repository 누르기

 

 

8. uploading an exisiting file. 클릭

 

9. Choose your files - index.html 작업한 파일 업로드 - Commit changes

 

 

10. Settings

 

 

11. pages 클릭 - branch - none👉main - save

 

 

12. 새로고침 - visit site

13. 링크 친구에게 보내보기

 

✏️tip

👉수정

깃헙 - Code - 연필모양 누르고 수정

 

👉도장찍기

“done” -> Commit changes

예시 )

<div class="bucket img1 done center"

 

 

코딩은 외우는게 절대로 아니다. 얼개만 알면 된다.

자기개발 도구로 삼자!!