(S)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..

SCSS-nomad-masterclass 강의에서 클론코딩 강의 중 하나를 보고 나만의 방식대로 살짝만 변형 시켜서 바꿔봤다. 스타일을 클론한 사이트는 https://besthorrorscenes.com/ 이곳이다. 배운 것을 활용 하여 해외축구 선수들의 간단한 뉴스(소식) 을 기록한 사이트로 바꿔보았다. 내 스타일대로 바꾼 모습 여기서 새로 알게된 CSS 속성들이 있었다. linear-gradient() 함수는 선형 그라데이션을 만드는 데 사용 background: linear-gradient( to bottom, rgba(0,0,0,0.1) 1%, transparent, transparent, transparent, transparent ); main 오른쪽 초록색 부분에 칸을 구분하기 위해 약간의 ..

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) 노란 개구리..