IT업계 종사자의 블로그

git / github 사용 방법

도피디 — Mon, 23 Dec 2024 22:38:07 +0900

1. git에 새로운 repository 를 생성한다.

2. VS code에 해당 repository 에 만들어진 폴더를 끌어다 온다.

3. 해당 폴더에 README.md 파일을 생성한다

4. 내용 입력 후 저장한다.

5. github desktop 좌측에 파일을 체크박스로 체크해준다. (README.md)

6. commit 의 타이틀을 작성 후 commit 시키고 --> push 를 누른다.

--> 그러면 github 사이트에 업데이트되어 있음

git / github 의 차이점

도피디 — Mon, 23 Dec 2024 21:56:00 +0900

git: 파일들을 주시하면서 관리해주는 도구

github: git의 변경 내역을 볼 수 있는 사이트

CSS media query

도피디 — Mon, 9 Dec 2024 23:44:54 +0900

media query 란?

오직 CSS 만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다.

<!DOCTYPE html>

<head>

<title>The Nick Times</title>

<style>

body {

display: flex;

height: 100vh;

align-items: center;

justify-content: center;

}

div {

background-color: teal;

width: 200px;

height: 200px;

}

@media screen and (max-width: 600px;) {

div {

background-color: tomato;

}

</style>

</head>

<body>

</body>

</html>

해석: 스크린이 600px 보다 작으면

div의 백그라운드 컬러가 토마토색으로 변한다.

결과

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

CSS animation(애니메이션) 예시 종류

도피디 — Mon, 9 Dec 2024 23:21:58 +0900

https://animista.net/play/basic/rotate-scale

CSS animations (애니메이션) 단계 나눠서 세분화하기

도피디 — Mon, 9 Dec 2024 23:16:23 +0900

<!DOCTYPE html>

<head>

<title>The Nick Times</title>

<style>

@keyframes superSexyCoinFlip {

0% {

transform: rotateX(0);

}

50% {

transform: rotateY(180deg) translateY(-100px);

}

100% {

transform: rotateX(0);

}

img {

border: 10px solid black;

border-radius: 50%;

width: 200px;

animation: superSexyCoinFlip 5s ease-in-out infinite;

}

</style>

</head>

<body>

</body>

</html>

결과

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

붕붕붕붕붕 떠요

CSS Animations (애니메이션) 사용하기

도피디 — Mon, 9 Dec 2024 23:02:22 +0900

우리는 원하는 만큼 애니메이션을 만들고 재생시킬 수 있다.

<!DOCTYPE html>

<head>

<title>The Nick Times</title>

<style>

@keyframes superSexyCoinFlip {

from {

transform: rotateX(0);

}

to {

transform: rotateY(360deg);

}

img {

border: 10px solid black;

border-radius: 50%;

animation: superSexyCoinFlip 5s ease-in-out;

}

</style>

</head>

<body>

</body>

</html>

결과

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

마우스 오버를 하지 않아도 이미지가 로테이트 된다.

(참고) ease-in-out 다음에 infinite 를 넣으면 무제한 반복됨 ㅋㅋ

CSS transform 종류 예시

도피디 — Mon, 9 Dec 2024 22:48:33 +0900

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

developer.mozilla.org

CSS transform 결합시키기

도피디 — Mon, 9 Dec 2024 22:47:10 +0900

<!DOCTYPE html>

<head>

<title>The Nick Times</title>

<style>

img {

border: 10px solid black;

border-radius: 50%;

}

img:hover {

transform: rotateZ(90deg);

}

</style>

</head>

<body>

</body>

</html>

결과

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

마우스 hover하면 90도로 회전한다.

<!DOCTYPE html>

<head>

<title>The Nick Times</title>

<style>

img {

border: 10px solid black;

border-radius: 50%;

transition: transform 5s ease-in-out;

}

img:hover {

transform: rotateZ(90deg);

}

</style>

</head>

<body>

</body>

</html>

참고) transition은 state가 아닌 루트(root) 영역에 적어야 한다

--> 여기서 state 는 hover 가 있는 영역임

결과

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

<!DOCTYPE html>

<head>

<title>The Nick Times</title>

<style>

img {

border: 10px solid black;

border-radius: 50%;

transition: transform 5s ease-in-out;

}

img:hover {

transform: rotateX(90deg);

}

</style>

</head>

<body>

</body>

</html>

rotateZ 대신 X를 넣어줌 ㅋㅋ

결과

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

CSS transformation: 박스 element를 변형시키지 않는다.

도피디 — Mon, 9 Dec 2024 22:13:38 +0900

box element: margin, padding 등등 에는 transformation이 적용되지 않는다.

일종의 3D transformation 이기 때문에.

CSS Transform 3D 회전 (rotateY, rotateX)

도피디 — Mon, 9 Dec 2024 22:04:29 +0900

기본 코딩

<!DOCTYPE html>

<head>

<title>The Nick Times</title>

<style>

img {

border: 10px solid black;

border-radius: 50%;

}

</style>

</head>

<body>

</body>

</html>

여기서 img src는

VS code에 이미지가 저장된 경로를 불러온 것

결과

자, 이제 transform 적용해 보기

<!DOCTYPE html>

<head>

<title>The Nick Times</title>

<style>

img {

border: 10px solid black;

border-radius: 50%;

transform: rotateY(85deg);

}

</style>

</head>

<body>

</body>

</html>

결과

옆으로 찌부가 된게 아니라

3D로 변형되어서 Y축을 기준으로 돌고 있음 ㅋㅋㅋ

<!DOCTYPE html>

<head>

<title>The Nick Times</title>

<style>

img {

border: 10px solid black;

border-radius: 50%;

transform: rotateY(85deg) rotateX(20deg);

}

</style>

</head>

<body>

</body>

</html>

결과

얄루~!