ALL

Git Github - git status, git add ., git commit -m"", git log #3

버전별로 기록을 남기는 방법 커밋을 이용해서 중요한 순간마다 기록할 수 있다 변경한 내역들이 잘 올라갔는지 확인 git status git add . 다시 과거 내역으로 돌려볼 때 내가 어떻게 작성했는지, 무엇을 만들었는지 가늠하기위해 "" 따옴표 안에 수도코드 형식으로 작성한다 git commit -m "test message" 커밋이 잘 찍혔는지 확인 git log

Git Github - github 원격저장소 등록 #2

내가 작업한 내역을 나만 보는게 아닌 같이 개발한 개발자들과 확인해야하는 상황이 온다면 원격 저장소에 연결하여 내역을 올리고 공유를 할 수 있다 github에 원격 저장소를 만들고 폴더를 연결한다 github.com 접속하여 로그인 상단에 repositories 클릭 오른쪽에 NEW 버튼을 클릭한다 Owner은 내 계정을 의미한다 Repository name은 내가 사용할 저장소명을 입력한다 Description은 필수 항목은 아니지만 어떤 프로젝트인지 표시하여 쉽게 알아볼 수 있다 Public는 내 원격저장소 주소만 알고 있다면 누구든지 와서 볼 수 있다 반대로 Private는 보안적인 느낌으로 아무도 볼 수 없고 나만 볼 수 있다 해당 빨간 박스 안에 있는 것이 내 원격 저장소 주소가 된다 복사를 하..

Git, GitHub - git init, git status, git add . #1

시스템적으로 하나의 작업 안에 내역을 버전별로 관리하며, 어떤 부분을 어떻게 수정했는지 편리하게 관리할 수 있는 것이 Git과 GitHub이다 windows는 git-scm.com에서 다운로드 git 환경설정 git init 빈 깃 저장소를 초기화 하는것 직접 눈으로 보기 위해 로컬 폴더를 찾아들어가서 확인 .git 숨김폴더가 생기고 git으로 버전관리할 수 있게된다 프로젝트가 어떻게 관리되고 있는지 확인하기 위해선 'git status'를 사용한다 git에선 폴더를 확인했지만 아직 추적은 불가능하니 직접 추적할 수 있게 해달라 라는 의미를 가진다 git에서 버전관리할 수 있게 스테이지를 도와준다 git add . 여기서 . 은 모든 파일을 의미한다 커밋이 완료되었고, 다시 git status를 입력한다..

CSS @Keyframes 복습

css keyframes을 이용한 마을꾸미기 해봤습니다! @import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap'); /* reset.css */ *{ margin: 0px; padding: 0px; box-sizing: border-box; } body { width: 100%; height: 100vh; overflow: hidden; animation: sky linear 20s infinite; } section { width: 1000px; height: 400px; position: absolute; top: 50%; left: 50%; margin-top: -200px; margin-left: -500px; ..

CSS 3D - 앞 뒤 다른 모습인 카드 만들기 #2

CSS 3D 첫번째 에 이어 .world 에 마우스 hover시 애니메이션이 작동되도록 만들어본다 .world { width: 80vw; height: 80vh; background: slateblue; display: flex; align-items: center; justify-content: center; perspective: 500px; } .card { display: flex; align-items: center; justify-content: center; width: 100px; height: 150px; margin: 1em; background: tomato; border-radius: 0.5em; font-size: 1.5rem; } 카드 뒤집기 .card { transition: ..

CSS 3D - 앞 뒤 다른 모습인 카드 만들기

CSS 3D를 만들 땐, 만약 카드를 회전을 시켜서 3D로 보이게끔 만들 때 보통 transform: rotateY() 지정해서 옆으로 돌린다거나 할 수 있다 하지만 3D 느낌으로 보이진 않는데 이럴 때, 카드를 감싸고 있는 공간 엘리먼트를 삼차원으로 바꿔준다 즉, 무대 자체가 3D가 되어야한다는 의미 셋팅 CARD CARD CARD .world { width: 80vw; height: 80vh; background: slateblue; display: flex; align-items: center; justify-content: center; } .card { display: flex; align-items: center; justify-content: center; width: 100px; heig..

CSS Animation - @keyframes, steps

Css Animation frame by frame Image Sprite 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다 정사각형의 영역만 div에서 보여주고 뒤에 백그라운드 이미지를 서로 간격만큼 씩 이동시키면서 표현할 수 있다 무료 스프라이트 이미지 사이트 보통 해상도가 2배 넘는 이미지를 다운받고 코드에는 반으로 나눠서 작성한다 그 이유는 웹사이트상에서 더 깔끔하게 보이기 위함 .spaceship { width: 150px; height: 150px; background: url('./img.png') no-repeat 0 0 /; } 현재 내가 다운받은 이미지는 크기는 가로 5100, 세로 300이다 보통은 계산기나 머릿속으로 나누기 2를 생각해서 지정하면 되지만 좀 더 ..

CSS Animation - linear, forwards

Animation #1에서 배운 박스를 자연스럽게 왔다갔다하기 animation: ani 3s infinite alternate; 반대 방향에서 시작하기 animation: ani 3s infinite reverse; animation: ani 3s linear; 기본 속성으로 돌아온 뒤 다시 적용하면 박스가 한번 움직이고 첫 스타트 지점으로 되돌아오고 끝나게된다 만약 스타트 지점이 아닌 마지막 지점에 멈추게 할 땐 forwards 속성을 사용한다 animation: ani 3s linear forwards; 박스에 마우스를 가져다 댔을 때 일시정지를 할 수 있게 속성을 지정할 수 있다 .box:hover { animation-play-state: paused; }