728x90 반응형 create branch 💡 master에서 create branch를 해보자 create branch를 하고 나면 git graph에서 새로운 라인이 생긴다. branch를 클릭한 상태에서 check out을 누르면 현재 그 branch에 머무르는 상태가 된다 💡 vsc 하단에 현재 branch의 이름이 뜬다! 2023. 4. 12. 깃허브 잔디 심기가 안된다면? 💡 커밋, 푸시까지 했는데 깃허브의 잔디 심기가 안돼요! 1. repository의 user name, user email 을 확인한다. account 페이지에서 확인 터미널을 이용하여 확인한다 (vsc 터미널과 git bash 모두 확인하였다.) git config --list //입력하면 나오는 user항목을 확인 2. 확인한 후 정정 git config --global user.name "사용자이름" git config --global user.email "사용자메일@메일주소" 🤢 ❗그런데도 잔디 심기가 안된다면?❗ 💡 -branch가 master가 아닐 경우 잔디심기가 안된다! -그러나 branch merge master 후 잔디 되살아난다! 2023. 4. 12. CSS em과 rem em 현재 스타일 지정 요소의 font-size 값을 지정된 배수로 변환해 표현한 크기 예를 들어 기준이 되는 값, 즉 현재 요소의 font-size 값이 16px 이라면 2em 은 32px 을 의미합니다. div { font-size: 16px; } div { font-size: 1.5em; /* 24px */ margin: 2em /* 32px */ padding: 1.25em /* 20px */ } rem 최상위 요소(보통은 html 태그)에서 지정된 font-size 의 값을 지정된 배수로 변환해 표현한 크기 예를 들어 기준이 되는 값, 즉 html 태그의 font-size 값이 이 16px 라면 2rem 은 32px 을 의미합니다. html { font-size: 16px; } div { fon.. 2023. 4. 11. CSS ratio box CSS - 반응형 16:9 비율 유지하는 법 2023. 4. 11. CSS flex-basis/grow/shrink의 사본 flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성입니다. flex-basis flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다. box-sizing을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다. flex-grow flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내.. 2023. 4. 11. CSS display:flex/ flex-direction: 중심축의 방향의 사본 flex-direction: row, justifued-content:flex-start 행정렬, 너비가 시작되는 왼쪽에 바짝 flex-direction: row-reverse, justifued-content:flex-end 행 역순정렬, 너비가 끝나는 오른쪽에 바짝 flex-direction: column, justifued-content:flex-start 열정렬, 너비가 시작되는 왼쪽에 바짝 flex-direction: column-reverse, justifued-content:flex-start 열 역순정렬, 너비가 시작되는 왼쪽에 바짝 2023. 4. 10. CSS display:flex/ align-content: 전체 구조에서의 열의 정렬의 사본 align: 교차축 두 줄 이상일 때만 적용된다. align-content: normal align-content: center; 자식들이 교차축의 중앙 정렬한다. align-content: flex-start; 자식들이 교차축의 상단에 정렬한다. align-content: flex-end; 자식들이 교차축의 하단에 정렬한다. align-content: space-between; 자식들이 교차축 안에서 경계에 바짝 붙어 일정한 간격으로 정렬한다. align-content: space-around; 자식들이 교차축 안에서 각각의 마진값을 가진 채 일정한 간격으로 정렬한다. 정렬 사이의 간격이 모두 동일 (간격 + 박스 +간격 + 간격 + 박스 +간격 + 간격) align-content: space-even.. 2023. 4. 10. CSS display:flex/align-items 교차축을 기준으로 열의 정렬 justify-content: center; align-items: stretch; 부모 width 중앙에서 부모의 height에 바짝 붙어 늘어난다. justify-content: space-between; align-items: flex-start; 부모의 width에 바짝 붙어 마진없이 퍼지고 부모의 height 상단에 바짝 붙는다. justified-content:flex-start; align-items: flex-end; 부모의 witdh의 왼쪽에 바짝, height 아래에 바짝 붙는다. justified-content: space-evenly; align-items: center 부모의 width에서 같은 간격으로 퍼지고height 중앙에 붙는다. 2023. 4. 10. CSS display:flex/justified-content 중심축의 정렬 justified-content: flex-start 부모의 width 왼쪽에 바짝 붙는다. justified-content: space-between margin 상관 없이 부모의 width에 바짝 붙는다. justified-content: space-evenly 부모의 width 안에서 같은 간격으로 배열한다. justified-content: space-around margin을 기준으로 배열한다 margin: a 라면 a + 'box' + a / a + 'box' + a/ a + 'box' + a/ a + 'box' + a/ a + 'box' + a.... 2023. 4. 10. html 목록 순서가 없는 목록 명단 이름: 김가가 이름: 김나나 이름: 김다다 이름: 김라라 순서가 있는 목록 기상 순서 이불털기 돌돌이로 먼지 제거 이불 개기 2023. 4. 10. html 기본 태그 요리 요리 요리 요리 요리 요리 요리는 먹기 좋게 가공한 음식 혹은 그 가공 행위 자체다. 요리는 먹기 좋게 가공한 음식 혹은 그 "가공" 행위 자체다. 요리는 먹기 좋게 가공한 음식 혹은 그 가공 행위 자체다. 요 리는 먹기 가공한 음식 혹은 그 가공 행위 자체다. 제목 요리 요리 요리 요리 요리 요리 단락 나누기 요리는 먹기 좋게 가공한 음식 혹은 그 가공 행위 자체다. 요리는 먹기 좋게 가공한 음식 혹은 그 가공 행위 자체다. 줄바꿈 요리는 먹기 좋게 가공한 음식 혹은 그 가공 행위 자체다. 띄어쓰기 요 리는 먹기 가공한 음식 혹은 그 가공 행위 자체다. 글자 두껍게 하기 먹기 좋게 특수문자 입력 특수문자 코드 (공백) & & “ " ⓒ © 2023. 4. 10. slide: horizontal(zIdx) html css .bt-angle { font-size: 6em; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; color: #fff; opacity: 0.3; transition: all 0.5s; z-index: 2; } .bt-angle:hover { opacity: 1; } .bt-angle.bt-prev { left: 0; } .bt-angle.bt-next { right: 0; } .slide-stage { position: relative; } .slide-stage > .slide-wrap { position: relative; z-index: 1; } .slide-stage > .slide-wrap .. 2023. 4. 10. slide: basic format js 웹사이트에 자주 쓰이는 슬라이드의 가장 기본적인 코드입니다. /*************** 글로벌 설정 *****************/ var idx// 현재 보이는 슬라이드의 index var zIdx// z-index의 증가값을 저장할 변수 var slideLen// 전체 슬라이드의 갯수 var slideLastIdx// 마지막 슬라이드의 index var aniSpeed// fade animation 속도(ms) var intervalGap// 자동전환 interval 속도(ms) var interval// 자동전환 setInterval을 담는 변수 var $slideStage// $('.slide-stage') var $slideWrap// $('.slide-stage .slide-wrap') .. 2023. 4. 10. j-Query event mouse: click(), mouseover(), mouseleave() click $('.click-navi > span').on('click', onNaviClick); function onNaviClick() { $(this).parent().find('.sub-wrap').stop().slideToggle(300) } mouseover, mouseleave $('.hover-navi').on('mouseover', onNaviHover); $('.hover-navi').on('mouseleave', onNaviLeave); function onNaviHover() { $(this).find('.sub-wrap').stop().slideDown(300) } function onNaviLeave() { $(this).find('.sub-wrap').stop().slideU.. 2023. 4. 10. jQuery 메서드 - 종류별 분류 Selector(선택자) $('대상') : css 선택자를 그대로 따른다. children(), find(), parent(), parents(), prev(), next(), siblings() index(), eq() each() : 반복문 Event on() mouse: click(), mouseover(), mouseenter(), mouseleave(), wheel() keyboard: keyup(), keydown(), window: resize(), scroll() form: submit(), reset() Animation show(), hide(), toggle() fadeIn(), fadeOut(), fadeToggle() slideDown(), slideUp(), slideToggle.. 2023. 4. 10. git ignore 1. 설치하기 익스텐션에 gitignore 검색 후 설치한다. 2. 명령 팔레트 (shift+command+p) 에 add gitginore 검색 하위 목록 중 Visualstudiocode/global 선택 → 생성! 3. 커밋에 제외할 파일 선택하기 gitignore 안에 다음의 규칙을 따라 작성한다. # 모든 것을 제외 /* # 특정 폴더 제외 /folder # 특정 파일을 제외 /folder/file.js # ! 키워드로 특정 파일을 포함 !/.gitignore !/some_other_files # ! 키워드로 특정 폴더를 포함 !/puppet 4. ignore 적용이 안될 때 ignore 안에 커밋 제외할 파일, 폴더들을 설정한 후 터미널에 다시 입력 git rm -r --cached . 2023. 4. 10. commit 되돌리기 유용하게 도움을 받은 링크를 첨부합니다. [Git] 깃 원격저장소(깃허브)에 올라간 커밋 제거(되돌리기) 깃 원격저장소(깃허브)에 올라간 커밋 제거(되돌리기) 깃에서 작성한 커밋들을 되돌리고 싶을 때, 아직 원격저장소로 push 하지않은 경우에는 '$git reset {commit_id}'명령어로 원하는 상태로 원상복구 computer-science-student.tistory.com Git 커밋 취소(reset), 커밋 되돌리기(revert), 덮어쓰기(amend) Git 저장소에서 작업을 할 때 커밋을 취소하고 싶은 경우가 있습니다. 이 글에서는 커밋을 취소하거나 되돌리는 git reset, git revert, git commit –amend 명령어에 대해서 소개합니다. www.lainyzine.com 2023. 4. 10. git push pull delete git 설정 및 사용법 설치 - 각자의 컴퓨터에서 한번만 실행 1. git-scm 에 접속하여 우측 중앙의 다운로드 버튼을 클릭한다. 2. 다운로드 받은 프로그램을 실행하여 다음 연타를 통해서 설치한다. 3. 터미널 창을 실행하여 git이 설치되었는지 확인한다. (windows: 검색창에서 cmd 입력, mac: 터미널 실행) git --version git version 2.30.1.windows.1 #왼쪽의 내용이 나와야 함 4. github에 접속하여 회원가입을 한다. 5. 회원가입 후 발송된 이메일에서 인증을 하고 github에 접속하여 로그인 한다. 6. 다시 터미널창에 접속하여 아래의 명령을 실행한다. git config --global user.name '아이디' git config --gl.. 2023. 4. 9. git clone 클론한 깃 파일들을 받을 폴더를 만든 후 폴더에서 터미널 Bash를 열어 클론 주소와 코드를 입력한다. 폴더에서 새로운 터미널 열기 기능 실행 (ctrl + option + command + T) git clone ~~https://github.com/주소/vue.git~~ //여기는 클론할 깃 레파지토리의 주소를 입력한다 클론 끝! 2023. 4. 9. git locate repository git bash git 과 user 연결하기 맥북 포맷 후 깃 연결이 끊어진다면? git 과 user 연결하기 → 링크 git bash: 깃과 나의 폴더 연결(시용자 연결) 레파지토리와 연결할 폴더를 누르고 ctrl+opt+command+T 눌러서 터미널 열기 git —version 입력: git버전 확인 git config —global user.name “이름” git config —global user.email “메일주소”//두줄 입력한다(따로따로) ———————————————————————————————————————————————— git clone: git hub에 있는 모든 파일이 내 컴퓨터에 지정한 폴더에 복사됨(※레파지토리의 이름을 가진 폴더가 생성된다) —————————————————.. 2023. 4. 9. 이전 1 2 다음 728x90 반응형
