코딩하는라민

멋사 프론트엔드 스쿨 4기 [git/github] 깃허브에 올리기 위한 설정 이름 설정 git config --global user.name "이름" 이메일 설정 git config --global user.email 메일주소 wait 모드 설정 - 터미널 대기 상태 git config --global core.editor “code --wait” wait 옵션을 걸지 않으면 commit 메시지가 완료되지 않았음에도 작업할 수 있기 때문에 wait 옵션 걸기 공백 문자 처리 - 윈도우 git config --global core.autocrlf true crlf : 케리지 리턴값 공백 문자 처리 - 맥 git config --global core.autocrlf input VS code 로 확인하기 gi..

멋사 프론트엔드 스쿨 4기 [git/github] CLI 깃 명령어 깃 버전 확인 git --version 폴더 생성 mkdir 폴더 여러개 생성 mkdir ... 폴더 위치로 이동 cd cd 만 입력할 시 무조건 루트로 이동 폴더 생성 후 바로 그 폴더로 이동 mkdir && cd $_ 파일 리스트 확인 ls 숨겨진 폴더도 확인 ls -a 빈 파일 생성 touch 비어있지 않은 파일 생성 echo '원하는 텍스트 입력1' > echo '원하는 텍스트 입력2' >> 이미 만들어져 있는파일에 글자추가 시 > 대신 >> 입력 파일 내용 확인 cat VS code 에 파일 띄우기 code code ./ramin.txt 파일 지우기 rm 파일 여러개 지우기 rm ... 빈 폴더 지우기 rmdir 폴더 밖에서 경..

멋사 프론트엔드 스쿨 4기 [git/github] 깃이란? 깃이란? 분산형 버전 관리 시스템 - 깃 툴을 사용하는 이유 1. 특정 시점으로 되돌가거나 2. 어떤 부분이 변경되었는지 쉽게 확인 가능 따라서, 효과적으로 소스 코드 관리를 할 수 있다. - 원격 저장소 Remote Repository 여러 사람이 공유하기 위한 저장소로 PC 에서 작업한 내용을 업로드 할수도 있고, 다른 사람의 작업 파일을 내 PC 로 가져와서 작업할 수 있다. - 로컬 저장소 Local Repository PC 의 개인 저장소 작업 트리 Work Tree - 인덱스 Index 커밋 전 저장소와 작업트리 사이에 존재하는 공간으로 git add 를 통해 스테이징된 커밋만 저장소에 넣을 수 있다. - 커밋 Commit 파일의 변경..

[Javascript] 참조 범위를 결정짓는 스코프(scope) - 1 [ 모던 자바스크립트 딥다이브 책 혼자 스터디하기♩ ] 이번에는 let's get IT 자바스크립트 책 공부하면서 궁금했던스코프와 클로저 개념을 딥다이브 책을 통해 차근차근 공부하고자 한다.코드의 순서에 따라 실행되기도 하고, 실행되지 않기도 하는 것이 너무 궁금했다..책을 본다고 완전히 이해될지 모르겠다. 아무튼 공부해보자. 1. 스코프 스코프는 변수를 검색할 때 사용하는 규칙. 즉, 식별자를 검색하는 규칙이다. 스코프는 전역 스코프와 지역 스코프로 나뉜다. ① 매개변수 함수 안에서 선언된 매개변수는 함수 안에서만 참조 가능하다. 함수의 바깥에서 매개변수에 접근한다면 정의되지 않는다고 뜰 것. function R(x, y){ ret..

렛츠기릿 자바스크립트 #6 계산기 만들기 - 함수 사용하기 책 + 저자 유튜브 강의(인프런) + 추가로 모르는 내용들 필기 추가하면서 공부 1. 순서도 그리기 ① 숫자1, 2 / 연산자 를 저장할 변수를 각각 생성 ② 숫자를 누르면 연산자가 입력된 유무에 따라서 숫자1에 저장할지, 숫자2에 저장할지 결정하고 변수에 숫자 저장 ③ 연산자 버튼을 누르면 숫자1의 유무에 따라 연산자를 저장하거나 경고창을 띄운다 ④ = 버튼을 누르면 숫자2의 유무에 따라 연산자를 결과에 출력하거나 경고창을 띄운다 기본원리 - 숫자1이 존재해야 연산자가 존재 가능하고, 연산자가 존재해야 숫자2가 존재 가능하다. 2. 변수 생성하고 버튼에 이벤트리스너 달기 ① 변수 생성 let numOne=''; let numTwo=''; let..

[CSS] JS 없이 탭메뉴 만들기 JS 없이 페이지를 만드는 과제를 하다가 알게된 코드! CSS 로도 간단하게 탭메뉴를 구현할 수 있다는 걸 알게되고 바로 적용해보았습니다. 1. HTML Menu01 Menu02 Menu03 안녕하세요 1페이지입니다. 프론트엔드 공부중인 코딩하는 라민입니다. 🐥🐥🐥 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate beatae id eius modi eveniet facere dolorum fugiat esse repellendus sunt qui dolorem laudantium nesciunt ipsum, libero blanditiis error voluptatum maxime. 마지막 페이지..

[CSS] 카드 뒤집히는 효과 만들기 포트폴리오에 사용한 효과중에 하나인 카드 뒤집히는 효과입니다. 앞면에는 타이틀을 적고 뒷면에는 내용을 적어 마우스를 올리면 카드가 회전하면서 뒷면의 내용을 볼 수 있게 해주는 효과입니다. CSS 만으로도 간단하게 표현 가능한 효과. 디자인 요소를 추가해서 타로카드를 뒤집는 것과 같은 연출을 만들어낼 수 있습니다. 1. 마크업 앞면 뒷면 앞면 뒷면 앞면 뒷면 ✅ wrap 안에 박스(card)를 해주고싶은 카드 수 만큼 만든다. ✅ card 안에 card_box 를 만들고 그 안에 카드의 앞면(front)과 뒷면(back)을 만들어준다. 2. CSS *{ font-size: 30px; font-weight: bold; } #wrap{ width: 800px; height..

웹디자인기능사 실기 공부 시 참고하면 좋은 사이트 ▶ 실기 공부시 참고한 사이트 webStudyBasic 웹디자인 기능사 실기 시험 공부 webstudybasic.pe.kr 시험지 종류별, 유형별 완성된 페이지가 정리된 사이트입니다. 이런 식으로 타입, 슬라이드, 메뉴 별로 나눠있어서 찾아보기 편합니다. [F12] - [소스] 에 들어가면 html, css, script 소스를 확인할 수 있어서 공부하기 좋습니다. 👍🏻 ▶ 유튜브 강의 저는 강의는 안 들었지만 사람들이 많이 듣는 웹디자인기능사 유튜브 강의입니다. 유형별로 강의가 있어서 처음에 기초를 다지기 좋은 사이트입니다. https://www.youtube.com/c/Webstoryboy www.youtube.com ↑ 웹스토리보이님의 유튜브 강의 ..

웹디자인기능사 드디어 실기 시험 하루 전. 시험보기 전에 보고 들어갈 것 메모 혹시라도 자동입력이 안 되거나, 잊어버릴 것 같은 부분들을 시험 시작 전에 보려고 정리해놓은 것. 1. html, css 기본 구조 .. @charset "UTF-8"; ... ▶ 혹시라도 자동 입력이 안 될 경우를 대비해서 이 정도는 외워두고자 정리. ▶ 독타입은 html ▶ html 태그에는 lang="ko" ▶ html에는 meta 태그에 charset="UTF-8" ▶ css에 @charset "UTF-8"; 잊어버리지 않기! *{ padding:0; margin:0; box-sizing:border-box; color:#333333; font-family: "맑은 고딕",sans-serif; } a{ text-deco..

[웹디자인기능사 실기] 남도맛기행 축제 C-3 0. 이전 유형과 다른 점 ✅ 세로 메뉴 - 서브 메뉴가 세로로 펼쳐지는 것이 아닌 우측으로 펼쳐진다. 1. 헤더 1-1. mark-up 남도맛기행축제 협회소개 인사말 명인 오시는길 행사안내 요리경연대회 전시참가 참가신청 홍보마당 축제소식 보도자료 레시피 회원마당 Q&A 사진갤러리 공지사항 ✅ 헤더의 전체적인 구조는 이전과 모두 동일하다. ✅ 모든 요소에 a 태그가 있는지, a 태그에는 임시 링크 # 이 붙어있는지 확인하기 1-2. css .wrap{ width: 1000px; height: 650px; display: flex; } /* 헤더 */ header{ width: 200px; height: 650px; text-align: center; posi..