IT업계 종사자의 블로그

1. git에 새로운 repository 를 생성한다. 2. VS code에 해당 repository 에 만들어진 폴더를 끌어다 온다. 3. 해당 폴더에 README.md 파일을 생성한다 4. 내용 입력 후 저장한다.  5. github desktop 좌측에 파일을 체크박스로 체크해준다. (README.md) 6. commit 의 타이틀을 작성 후 commit 시키고 --> push 를 누른다.  --> 그러면 github 사이트에 업데이트되어 있음

git: 파일들을 주시하면서 관리해주는 도구github: git의 변경 내역을 볼 수 있는 사이트

media query 란?오직 CSS 만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다.   DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> 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> div>div> body>html> 해석: 스크린이 600px..

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

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> 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> img src="img/pic.jpg" /> body>html>   ..

우리는 원하는 만큼 애니메이션을 만들고 재생시킬 수 있다. DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> 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> img src="img/pic.jpg" /> body>html>     결과  마우스 오버를 하지 않아도 이미지가 로테이트 된다. (참고) ..

https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDNThe 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

DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> img { border: 10px solid black; border-radius: 50%; } img:hover { transform: rotateZ(90deg); } style> head> body> img src="img/pic.jpg" /> body>html>     결과  마우스 hover하면 90도로 회전한다.    DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> img { border: 10px solid black; border-radius: 50%; transition: transform 5s..

box element: margin, padding 등등 에는 transformation이 적용되지 않는다. 일종의 3D transformation 이기 때문에.

기본 코딩DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> img { border: 10px solid black; border-radius: 50%; } style> head> body> img src="img/pic.jpg" /> body>html>여기서 img src는VS code에 이미지가 저장된 경로를 불러온 것   결과  자, 이제 transform 적용해 보기DOCTYPE html>html lang="kr"> head> title>The Nick Timestitle> style> img { border: 10px solid black; border-radius: 50%; transform: rotateY(85deg); ..