전체 글
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; }
CSS Animation
css로 애니메이션을 만들 수 있는 방법은 크게 두가지인데 transition 과 animation이 있다 Animation box .box { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border: 2px solid #222; background: rgba(30, 161, 255, 0.5); } Animation 은 다른 속성과 다르게 keyframes을 추가할 수 있다 keyframes란, 어떤 오브젝트가 오른쪽에서 아래로 향하는 방향을 지정할 때 지정하는 방향을 keyframes으로 설정할 수 있다 keyframes을 지정할 땐 시작점과 끝점을 생각하고 지정해야한다 0% ~ 100..
CSS Transition
Transition은 CSS로 애니메이션을 줄 수 있는 속성이다 .box { width: 100px; height: 100px; border: 2px solid #222; background: rgba(30, 161, 255, 0.5); transition: 1s; } .box:hover { transform: scale(2); } 박스 색 변형 .box { transition: 1s; } .box:hover { width: 200px; background: tomato; }