CSS

사이드 프로젝트를 진행하면서 무한 슬라이딩 애니메이션을 구현할 일이 생겨서 하게 되었다.라이브러리를 따로 사용하지 않고 useState 훅과 함께 같이 만들어보았다.다른 사람 글을 보고 참고한 코드여서 나의 맞게만 살짝 수정만 해보았다.⚡동작 방식구현하기 전 구현에 대한 설명이 필요하다.먼저 슬라이드 형태로 흘러가야할 요소들을 한줄로 세워준다.똑같은 요소들을 하나 더 만들어준다.전체코드home.js 전체 코드import '../../Styles/Home.scss'import { useNavigate } from 'react-router-dom';import { useState } from 'react';const Home = () => { const navigate = useNavigate() ..

졸업작품이나 사이드 프로젝트를 진행하면서 많은 이미지를 페이지에 적용하는 일이 많았었다.그러면서 img 요소를 다룰 때마다 헷갈리고 어려운 부분이 많았던 거 같다.또한 이미지를 적용하는 방법이 2가지가 있는 것을 알게 되면서 정리를 하면 좋겠다 생각하여 정리를 해볼 것이다. 이미지 마크업 하는 2가지 방법 무엇이 있을까 ?이미지를 마크업 하는 가장 기본적인 방법은 HTML 코드 내에  태그를 사용하는 것으로 이는 이미지를 전경(foreground) 처리하는 방법과 스타일시트의 background-image 속성을 활용해 배경(background) 처리하는 방법이 있다.전경처리.main_home_wrapper{ background-image: url('../../public/img/hairShop.j..

1번부터 12번까지 정리해봤고, 그 뒤를 이어서 나머지 문제들도 풀고 정리해보자. 13번문제 일단 처음에 개구리와 연못 순서가 반대로 뒤집어져있다는것을 처음에 알 수 있다. 그래서 flex-direction: row-reverse; 하고, 가운데에 몰려있기때문에, main-axis 인 justify-content: center 로 설정, 그리고 아래로 개구리들을 내리는, cross-axis 인 align-items : flex-end로 설정. 14번문제 order 속성을 사용하는 문제이다. 지금 .yellow 클래스에 order속성을 사용하여 맨 오른쪽으로 보내는 것이다. order : 1 ; 로 해주면 나머지 그린 과 빨강 개구리들은 order 0; 인 상태이기때문에 (default가 0) 노란 개구리..

Flexbox개념을 이해하기 쉽게 도와주는 사이트가 있다고해서 한번 해보았다. 들어가보면 귀여운 개구리를 수련잎으로 옮기면되는 게임형식으로 만든 사이트이다. 아래는 flexbox froggy 사이트 링크이다. Flexbox Froggy - CSS flexbox 속성 배우기 게임 노마드 강의에서 FLEXBOX 강의다하고 flexbox Froggy를 한번 풀어봤다. 1번문제 답 1번은 매우 쉽다. justify-content는 row(열)을 옮겨주는 것이기 때문에 , flex-end ; 를 주면 맨 오른쪽으로 이동하게된다. 2번문제 2번문제 또한 row(열)을 가지고 옮기는 것이기때문에 justify-content로 center; 해주면 된다. 3번문제 3번문제 또한 row(열)을 옮기는 것이기 때문에 sp..