본문 바로가기

전체 글83

리액트에서 줄바꿈 처리하는 방법 - CSS white-space 속성 쓰기 리액트에서 줄바꿈 처리하는 방법 - CSS `white-space` 속성 쓰기리액트로 개발하다 보면 텍스트 부분에서 줄바꿈이 제대로 안 돼서 열받잖슴?줄 바꿈 넣겠다고 \n넣고 해도 적용이 안됨...근데 해결법 간단함. 그거 `white-space` 속성 하나면 됨. 문제 상황 예를 들어, 우리 데이터가 이렇게 있다고 치자:const projectslist = [ { id: 1, type: "team", title: "GROW UP", description: "화면이나 캠을 공유하며 다른 사람과 함께 공부할 수 있는 웹 사이트입니다.", descriptionDetail: `GROWUP은 화면이나 캠을 공유하며 다른 사람과 함께 공부할 수 있는 웹 커뮤니티 사이트입니다.\n .. 2024. 5. 27.
[웹 포트폴리오 만들기] 5편 - next로 모달 라우팅 구현하기 2024.04.12 - [PROJECT] - [웹 포트폴리오 만들기] 1편 - 디자인 구상하기2024.04.23 - [PROJECT] - [웹 포트폴리오 만들기] 2편 - NEXT 로딩화면 구현하기2024.05.07 - [PROJECT] - [웹 포트폴리오 만들기] 3편 - 디자인 갈아엎기2024.05.08 - [PROJECT] - [웹 포트폴리오 만들기] 4편 - fullpage 구현하기2024.05.31 - [PROJECT] - [웹 포트폴리오 만들기] 6편 - 모바일 반응형 구현과 ..최종 완성Intercepting Routes와 Parallel Routes을 이용해서 모달창 만들기웹앱에서 모달창 만들 때 Intercepting Routes랑 Parallel Routes 쓰면 사용자 경험도 상승하고.. 2024. 5. 21.
[웹 포트폴리오 만들기] 4편 - fullpage 구현하기 2024.04.12 - [PROJECT] - [웹 포트폴리오 만들기] 1편 - 디자인 구상하기2024.04.23 - [PROJECT] - [웹 포트폴리오 만들기] 2편 - NEXT 로딩화면 구현하기2024.05.07 - [PROJECT] - [웹 포트폴리오 만들기] 3편 - 디자인 갈아엎기2024.05.21 - [PROJECT] - [웹 포트폴리오 만들기] 5편 - next로 모달 라우팅 구현하기2024.05.31 - [PROJECT] - [웹 포트폴리오 만들기] 6편 - 모바일 반응형 구현과 ..최종 완성 웹사이트를 스크롤할 때 섹션에 딱 맞게 스크롤 되는 기능을 fullpage, onepage라고 한다.이 기능을 포트폴리오 사이트에 구현하기 위해 내가 지나온 과정들을 써본다..(ㄹㅇ 삽질 엄청 함) .. 2024. 5. 20.
[웹 포트폴리오 만들기] 3편 - 디자인 갈아엎기 2024.04.12 - [PROJECT] - [웹 포트폴리오 만들기] 1편 - 디자인 구상하기2024.04.23 - [PROJECT] - [웹 포트폴리오 만들기] 2편 - NEXT 로딩화면 구현하기2024.05.08 - [PROJECT] - [웹 포트폴리오 만들기] 4편 - fullpage 구현하기2024.05.21 - [PROJECT] - [웹 포트폴리오 만들기] 5편 - next로 모달 라우팅 구현하기2024.05.31 - [PROJECT] - [웹 포트폴리오 만들기] 6편 - 모바일 반응형 구현과 ..최종 완성 순조롭게 포트폴리오 사이트 코드를 짜면서...대충 90퍼센트 정도 만든 후갑자기 그런 생각이 났다...다른 사람의 포트폴리오 사이트나그냥 일반적인 인터넷 사이트와 비교했을때 내가 만든 사이트.. 2024. 5. 7.