부트캠프 본캠프 시작
1일차 스터디 list
1. terminal 기본 문법
1. git
2. github
----------------------
(프로젝트 준비)
1. HTML
2. CSS
3. javascript
4. jquery
1. Terminal 기본 문법 :
- pwd (print working directory) : 현재 작업중인 폴더
- ls (list) : 현재 폴더 안의 폴더 & 파일 내역 보여줌 / ls -a (list all) : 숨겨진 파일 및 모든 파일 보기
- cd (change directory) : 폴더 이동
- mkdir (make directory) : 폴더 생성 명령어
- touch : 파일 생성 명령어
1. Git 이란 : 소프트웨어의 변경사항을 체계적으로 추적하고 통제하는것(버전 or 형상 관리 도구) -> 코드 변경점 기록
: Git 명령어
- git init : 작업 시작 전 해당 폴더 초기화 ( 해당 폴더.git)
- git add 파일명 : 저장하기 전 저장할 파일 지정 -> 저장할 파일 많을 경우 git add . 하면 됨
- git commit -m " 코드 짠 주제나 변경된 내용 " : 실제 저장하는 명령어
->commit 후 저장이 안되는 경우(계정 설정 x), username에 Hyunkook, email 주소 입력 하면 됨
- git status : 저장 여부 확인 명령어
- git log : 저장 내역 확인 명령어
- git push : github repository 에 업로드 하는 명령어
- git clone : 코드 복사 해오는 명령어 -> git cloe https:000/000/.git . -> 뒤에 . 빼먹지 말기
- git pull : 똑같은 이름의 파일을 누군가가 git push 하고 내가 git push 해야 할 때 사용
2. Github 란 : 온라인 백업, 공유, 협업 ( 온라인 코드 저장소)
: Github repository 생성 및 vscode 활용 폴더 업로드
1. create repository
2. 업로드할 프로젝트 폴더 작업 후 저장
3. git remote add origin https.000.000000.123213.git ( 하는 이유 : git push 과정에서 github 주소를 origin 이라는 이름으로 저장하여 git push 를 더 간략하게 하기 위해)
git branch -M main ( 기존 master로 돼있는데 기존으로 할 시 master는 제약사항이 많다 )
git push -u origin main( git remote add origin --> vscode terminal(bash)에 입력. (해당 명령어는 깃허브 레포지토리에서 복붙 가능)
4. 이 후 수정하여 재업로드 할 경우 git add 부터 다시 실행
조별과제(웹사이트)
하기 전 코드 정렬 단축기 (window : shift + Alt + F), (Mac: Shift + option + F)
3. HTML (뼈대)
● html:5 : html 뼈대 자동 생성
● <head> : <body> 부분을 css 로 꾸며주거나, javascript 로 동적할당 해줘야 하는 부분. <title> , <style> , <script>, <meta>, <link> 등
● <body> : 웹사이트에서 다양한 버튼이나 글자 등을 입력하는 곳 <button>, <label>, <form>, <option>, <span>, <img>, <input> 등
4. CSS(꾸미기) : <style>.....</style> 공간에서 작성
● 배경 관련 : background-color, background-image, background-size
● 사이즈 : width, height
● 폰트 : font-size, font-weight, font-family, color -> 구글 폰트에서 url 주소 불러와서도 사용 가능(해당 사이트에서 복 붙)
● 간격 : margin(바깥 여백), padding(안쪽 여백)
● 자주 쓰이는 css : h1, h5, background-image, background-size, background-position color, width, height, border- radius, margin, padding
● 예시 : <style>
.mytitle {
color: red;
font-size: 40px;
box-shadow: 0px 0px 3px 0px gray; // 그림자 효과
padding: 20px; // 안쪽으로 띄우기
}
● 부트스트랩 라이브러리: 필요한 CSS 들을 모아둔 곳
사용 전 꼭 <head> 안에 부트스트렙 CDN , 버튼 링크 주소를 넣어줘야함
5. javascript(동적 할당) : <script>.....</script> 공간에서 작성
● function 함수명() { ~~} : 함수 기본문
● consloe.log(a[1]) : 리스트 a의 두번째 값 출력하는 명령어
● 조건문은 출력 명령어 제외 c랑 거의 동일, 반복문은 변수명.forEach((포문 이름) => { ~~~ 양식
● alert: 어떤 조건을 불러왔을때 실행됨
6. JQuery : javascript 를 간략하게 작성할 수 있는 라이브러리
● ex) document.getElementById('hello').innerHtml = '안녕'; -> $('#hello').html('안녕');
● 사용 전 jQuery CDN 임포트 해야함
● 비교하자면 css는 class 를 선택자로 사용하여 html을 다뤘지만, Jquery는 id 값을 통해 특정 버튼/인풋박스/div/.. 등 을 가리켜 다룬다. --> ID는 <body> / <div> 내에 ID 값 추가해줘야함.
● ex) $('#ID값').text(변수);
● 백틱(`) 을 사용한 변수 만들기 : html 태그를 변수로 넣어줘야할때 사용
ex) let temp_html = `<p>사과</p>`
$('#q1').append(temp_html) // append 는 해당 변수의 값을 추가 해주는 것(temp_html에서는 사과)
● $('#ID').empty() : 해당 아이디에 해당하는 변수값 빼줄때 사용
● onclick = "함수명" : 이걸 <button> 태그에 넣어주면 웹에서 버튼 클릭했을때 <script> 부분에서 작성한 코드가 나옴
● toggle() : function "함수명() {
$(#'a').toggle(); -----> 웹사이트 버튼 a라는 ID에 해당하는 내용의 태그 클릭시 다음 클릭 전 까지 } 없어짐
● val() : let a = $('#b').val(); ------> a 변수에 원하는 값 담기
오늘 공부 내용 요약 끝....!
웹 사이트 같은 경우 코드가 너무 길어서 정리해서 적지는 못했다.
첫 12시간 동안 공부였지만, 중간에 집중력이 끊어질까봐 걱정했지만
그것보다 해야할 게 많아서 집중력 생각할 틈도 없이 훅 지나갔다.
아직 많이 부족해서 공부해야 할 양이 너무나도 많다.
그래도 하루 하루 1% 씩 채워가면 언젠가는 발전할 것 이라고 생각한다.
1일차 끝
'HTML' 카테고리의 다른 글
| 24.7.17 (웹페이지 - Firebase) (0) | 2024.07.17 |
|---|---|
| 24.7.16 (프론트엔드) (0) | 2024.07.16 |