CSS

원인 반응형으로 뷰포트의 너비가 줄어들때마다 원하는 뷰포트 구간에서 줄바꿈을 적용하고 싶었다. 처음에는 react-responsive 라이브러리를 이용해서 1200px 이상일때 , 768 ~ 1199px 일때 , 375 ~ 767px 일때의 코드를 모두 작성했고 특정 뷰포트에 도달 했을때 해당 코드를 보여주게 하였다. 하지만 줄바꿈 때문에 라이브러리를 사용하는게 맞을까 고민하게 되었다. 해결 미디어쿼리를 이용해서 특정 뷰포트에서 className에 따라 줄바꿈을 하도록 했다. ex) .show-on-desktop-and-mobile은 375 ~ 1199px 에서 display: block 이고 1200px ~ 부터는 display : none 이 적용된다. 따라서 원하는 구간에 따라 줄바꿈을 적용 시킬 ..

원인 어떤 콘텐츠에 absolute를 사용하고 뷰 포트의 너비가 줄어들때 absolute를 사용한 콘텐츠가 비율대로 같이 줄어들기를 원했는데 레이아웃에서 벗어나는 문제 발생 해결 방법1 absolute 사용후 margin-left : - 해당 콘텐츠 가로의 1/2px, margin-top : - 해당 콘텐츠의 세로의 1/2px ex)콘텐츠의 가로가 96이므로 1/2인 -48px 적용 , 원하는 위치로 position 설정 - (top 50% left 50%)를 적용후 margin-top: -48px, margin-left: -48px를 적용했다. 방법2 transform: translate(-48px, -48px); margin 값은 음수로 적용해야 한다. 앞에 - 붙이는걸 잊지말자. 또한 margin ..