1. $git config 명령어 $git config --list 명령어를 통해 자신이 설정한 config 값을 볼 수 있다. 설치하면서 했던 [user.name]과 [user.email]확인 가능. 2. git config 설정 변경 ( user.name 과 user.email 를 예시로) 2-1. 아직 초기 설정을 안했을 경우 ($ git config --global user.name 등등) 지역(local) 설정 $ git config user.name "이름" $ git config user.email "이메일@주소" 지역 설정인 경우 cd 명령어를 통해 .git이 저장된 디렉토리로 이동 후에 명령어를 입력해야 한다. 전역(global) 설정 $ git config --global user.na..
GIT 기능(특징) 버전관리 문서를 수정할때마다 버전별로 기록이 가능해서 언제 어느것을 수정했는지 확인이 가능하다. 백업 작업중인 자료를 인터넷 상의 공간(원격 저장소)에 백업할 수 있다. 대표적인 원격저장소로 GitHub 가 있다. 보통 Git과 GitHub는 같이 사용한다. 협업 원격저장소 기준으로 여러 사람이 함께 작업이 가능하다. 버전관리 터미널 창에 직접 명령을 실행하는 CLI(Command Line Interface) 방식 대부분의 개발자들이 선호한다. 다양한 Git 관련 프로그램 (아래 링크 참조) Git - GUI Clients GUI Clients Git comes with built-in GUI tools for committing (git-gui) and browsing (gitk),..
코딩 시간을 대폭 줄여주고, 복잡한 ui를 간단하게 짜주는 아이템 Bootstrap 설치방법에 대해 알아봅시다. 설치방법 1.아래 bootstrap에 접속한다. Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com 2.아래쪽 살짝 내려서 오른쪽의 CDN의 코드를 복사 붙여넣기 한다. (어디다 넣어야할 지 모르겠다는 분은 아래 링크 참고 or 아래 코드 적어놓은 것처..
에밋(emmet)은 여러개의 코드를 기호로 연결지어 한 줄로 생성하게 해주는 기능을 말한다. 에밋(Emmet) HTML & CSS 코등 입력을 지원하는 에디터용 확장 기능을 뜻한다. 기존 코드가 생략되어 효율적인 코드 작성이 가능하게 됨. 예) margin-bottom:100px; ⇒mb100; 입력 후 [tab] 을 누르면 자동 완성 되는 것을 볼 수있다. 에밋(Emmet)이 탑재된 에디터 VScode (비주얼 스튜디오 코드) Adobe Dreamweaver(어도비 드림위버) 확장기능으로 에밋(emmet) 추가가 가능한 에디터 Atom(아톰) Brackets(브래킷) Sublime Text(서브라임 텍스트) HTML 에밋(emmet) 사용법 기호는 "div ." 또는 "div >" 와 같이 띄어쓰면 안..
처음 리액트를 접하거나 처음 설치하시는 분들을 기준으로 글을 작성해 보았습니다. 어딘가에 빠진 부분이라던가 틀린 부분이 있으시다면 댓글 남겨주시면 감사합니다!! 설치해야 될 것 4가지 Node.js npx npx git yarn (선택에 따라 나중에) Node.js 설치 → (node.js 설치시 npm 도 같이 설치됨.) 1. Node.js 페이지 접속 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 왼쪽의 “16.17.0 LTS” 를 다운 받는다. (오른쪽의 "현재버전" 다운로드 X) 3. 다운로드가 다 되었으면 “명령 프롬프트” 실행 4. " node -v “ 명령어로 설치 버전..
scroll-snap 페이지 스크롤 시 사용자에게 보여주고 싶은 영역에서 멈추게 해주는 기능 큰 이미지를 사용하는 풀스크린 레이아웃이나 갤러리용 상이트에 적용 하기 좋음. scroll-snap 시 꼭 필요한 css 속성 height:100vh; 감싸고 있는 영역의 높이와 요소의 높이를 100vh로 맞춰줘야한다. scroll-snap-type 속성 값 종류 scroll-snap-type : value 의미 x 가로 방향 스크롤 시 빠르게 지나가거나 멈추게 할 수 있다. y 세로 방향 스크롤 시 빠르게 지나가거나 멈추게 할 수 있다. both 상하좌우 스크롤시 빠르게 지나가거나 멈추게 할 수 있다. scroll-snap-type 위치 지정 속성 종류 의미 mandatory 현재 표시되는 영역이나 다음 영역 ..
반응형 웹 디자인 디바이스 화면 크기에 따라 웹 페이지가 표현되는 방법이 바뀌는 것을 의미한다. 반응형 짜는법 HTML에 을 입력한다. (요즘엔 기본적으로 다 들어가있음.) viewport 는 화면크기만 디바이스에 맞추는 것 뿐 레이아웃은 최적화 되지 않는다. 따라서 레이아웃도 최적화 시키려면 미디어 쿼리를 사용해야한다. 반응형 작성하기 1.CSS 파일에 작성하는 경우 /*MOBILE SIZE ================================================ */ @media (max-width: 700px) { .title { font-size: 4rem; } } 미디어쿼리는 @media (max-width: 크기) { 코드 } 를 말한다. 2.HTML파일에서 link태그로 적용하..
굴림, 돋움, 고딕 등등 이런 글씨체 말고 여러 다양한 폰트들을 직접 보고 사용하고 싶다거나, 상대방이 원하는 폰트로 적용을 해야 될 때 참고할만한 사이트 들을 소개합니다. 글꼴 폰트 사이트 아래 모든 사이트들은 모두 무료인 곳도 있고, 특정 폰트만 무료로 푼 곳이기 때문에 상업적으로 이용하실 경우 주의해서 사용하셔야 합니다. (이 글에서는 구글폰트를 추천하고 아래에 사용법을 적어놓겠습니다.) 1. 구글 폰트 (★추천) Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 어도비 폰트 Adobe Fonts Adobe Fonts partners with the world’s ..
FullSize의 이미지로 배경을 하는 사이트를 만들 때 간혹 이미지의 가로 폭을 고려하지 않고 만들다가 이미지가 깨져버리는 경우가 발생 할 수 있다. FullSize 이미지 설정방법에 대해 간단하게알아보자 FullSize 배경 이미지 설정방법 1. 가로 폭이 1200~3000px 정도인 이미지를 준비한다. 2. 이미지가 들어갈 영역의 높이를 100vh 로 설정한다. (100vh를 쓰는 이유는 부모 태그의 높이의 관계 없이 일정 높이를 갖기 귀함이다.). Background 속성 풀사이즈 배경을 바탕으로 여러 이미지들을 위치 시키고 싶을 때에는 background-image: url1, url2; background-position: center, center; 와 같이 “, (쉼표)”만으로 구분하여 한..
