공부 기록일지📚

레포지토리(저장소)를 만드는 방법은 여러가지인데 1. 컴퓨터에 폴더를 만들어서 그 폴더를 github에 올리는 방식 2. github에 먼저 repository를 만들어주는 방법 (이 방법이 더 좋다고 함) ※주의: repository명은 공백없이 소문자로 작성 e.g. )onecong-clone-2021 github에 repository를 설치했다면 바로 그 폴더가 내 컴퓨터에 있는게 아니다. 이 부분을 위해서 사용할 프로그램이 github desktop이다. (github desktop은 github과 작업하기 위한 초보자를 위한 도구라고 생각하면 됩니다.) github desktop을 통해서 github에서 생성한 새로운 repo를 내 컴퓨터로 가져옵니다 가져올 폴더의 경로는 수정이 가능하고 가능하..

보호되어 있는 글입니다.

Media query 는 오직 CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다. (나의 웹사이트를 보고있는 사용자의 스크린 사이즈) 미디어쿼리는 우리가 조건을 추가할 수 있는 방법이다. 코드의 조건을 적는 것이지요 만일 이 조건이 true(참)이라면 {} 중괄호 안의 CSS를 실행하라는 조건을 말해주는 것입니다. 미디어 쿼리도 중괄호로 여닫지만 그 안에 element에 CSS를 적용시켜야 합니다. (중괄호 안에 중괄호) 미디어 쿼리는 " and "를 써서 연결됩니다. ※참고: (min-device-width) 와 (max-device-width)는 오직 핸드폰에만 적용된다. 데스크톱은 이해할 수 없겠죠? 그래서 아래의 코드는 (max-width: 600px)이런식으로 준 것입니다. *tip: ..

Q.마우스를 위에 올리거나(:hover), trasition없이 애니메이션을 어떻게 만들까? 애니메이션을 사용하면 우리가 원하는 만큼 만들고 재생시킬 수 있다. 애니메이션 작성법(기본): @keyframes + 애니메이션명 e.g.) @keyframes superHotCoinFlip animation을 작성하는 방법에는 2가지 방법이 있다. ▶1번째 방법- @keyframes 애니메이션명 { from { transform: 속성값 } to { transform: 속성값 } } 효과를 줄 selector { animation: 애니메이션명 + 지속시간 + 효과 +( infinite ) } *infinite: 이 속성값이 없으면 애니메이션 효과가 지정된 지속시간을 한번만 수행하고 다시 되지 않음 계속 실행되..

transformation을 들어가기 전에 , img 태그에 CSS 효과 중 border값을 주고 border-radius: 50%; 을 하면 직사각형이던 border가 동그라미가 됩니다! 알아두면 좋은 팁이니 기억해둡시다 참고로 img 태그는 self-closing tag 입니다~ (맞음 까먹었음ㅋ) Transform 은 무언가를 "변형"시키는 것 transform: rotateX(90deg) / rotateY() / rotateZ() (X,Y,Z축으로 회전 시키는 속성) ▶rotateX(90deg) = 회전시킬거다X축방향으로(90도로) 라는 뜻이며 괄호 안의 값에는 단위를 나타내는 deg를 기입해줘야 합니다. 이 속성을 통해서 이미지를 3D처럼 사용할 수 있는 것이죠 참고로 Z축은 회전하는 느낌이네요..