![]()
@@@결과 미리보기@@@ 1. 구현 1. 기본 로직 problemsData는 데이터 배열이다! - 현재 페이지 state, 한 페이지에 몇 개의 아이템을 보여줄지, 전체 페이지 수 const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 10; const totalPages = Math.ceil(problemsData.length / itemsPerPage); currentPage를 통해 현재 페이지를 useState로 선언해 주고, 한 페이지에 몇 개의 항목이 들어갈지 itemsPerPage를 통해 지정한다. 이후 전체 페이지 수를 구하기 위해서 (데이터/한 페이지에 몇 개의 항목이 들어갈지)를 올림 하여 계산한 totalP..
![]()
@@@결과 미리보기@@@ 1. 구현내가 이전에 만든 웹 화면은, 바로 위 gif와 같이 창을 전체화면으로 사용하기보다 한쪽으로 화면을 축소하여 사용하는 일이 많았다. 이에 화면이 반절로 되게 되면, 웹사이트에 불편함을 느껴 반응형을 도입하여 이문제를 해결하고자 하였다. 1. display: grid 기본적으로 display:flex로 구현되어 있는 컨테이너를 반응형을 위해 grid로 변경하였다.왜 grid냐? 현재 나는 왼쪽 사진과 같이 1열로 나란히 있는 요소들을 화면의 width가 줄어들면, 오른쪽과 같이 세로로 배치되기를 원하기 때문이다. display: flex;의 경우 일반 div의 성격인 세로로 쌓이는 것이 아닌, div가 가로로 쌓이게 된다. 이러한 경우 반응형으로 가로 세로 요소의 ..
![]()
프로젝트 진행 도중 왼쪽 화면을 구현해야 했었다. React.js로 styled-components방식을 사용하여 구현하였으며, 해당 페이지를 구현하면서 checkbox css가 적용이 안되었던 문제와, 클릭했을 때 가운데에 원이 생기는 css를 간단하게 구현하는 것에 대해 말해보고자 한다. input checkbox css 1. CSS속성이 구현되지 않는 이유? 처음 checkbox의 css를 완성했을 때의 코드는 아래 더보기를 누르면 확인할 수 있다.더보기 const CheckBoxStyled = styled.input` width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d0d5dd; position: ..
