내맘대로 개발일지

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 이미지를 가운데 정렬 하는 건 기록한 적이 있다. [CSS] 이미지 세로 중앙(수직) 정렬 하는 방법 😢 내가 겪은 문제 이미지 옆 텍스트를 세로 중앙 정렬 하는 일은 정말 많은 것 같다. 그때마다 찾아 썼는데 그냥 내가 기록해놓고 써야겠다. 티스토리는 항상 켜놓는데도, 쓸때마다 구글에 검 8735.tistory.com 이미지보다 더 많이 사용하는 경우가 바로 텍스트를 가운데 정렬 하는 경우다. 네비게이션을 만든다거나, 탭메뉴를 만든다거나 등등 .. 그럴때마다 구글에다가 "CSS 텍스트 수직정렬 하는 방법" 검색해서 복사해서 썼는데 마진값을 사용하는 사람들도 ..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 나는 NextJS 에서 개발을 하고 있는데, 이미지를 첨부하고 나면 기존의 틀과 이미지의 크기가 달라져서 버튼의 위치가 달라지거나 뭔가 화면의 요소들이 왔다갔다 하는 경우가 있었다. 내가 보기에도 너무 불편한데 당연히 지적당하겠다는 생각에 먼저 수정하기로 했다. 코드만 봐도 간단하게 이해할정도로 쉽지만, 이미지 URL 이 있으면 를 보여주고 없으면 RectangleSVG 를 보여준다. RectangleSVG 같은 경우에는 다음과 같다. width="100%" maxWidth="430px" height="100%" maxHeight="430px" 정사각형 모양이..

😢 내가 겪은 문제 이미지를 모자이크 처리하는 경우가 생각보다 많았다. 미리보기를 생성하거나, 로딩바를 생성했을 경우 또는 데이터 시각화를 통해 집중시키는 효과를 보고 싶을 때 사용하였다. bulr 라는 단어는 생각이 나는데 잘 기억이 안나는 경우가 많아서 다른 사람들도 그렇지 않을까 싶어서 기록해둔다. 실제로 나는 잘 기억이 안나서 자꾸 검색해보게 되더라 ^^ filter: blur(5px); -webkit-filter: blur(5px); 5px 만큼 모자이크 처리를 하는건데, 생각보다 5px 만큼만 해도 적당하니, 잘 조절해서 사용하면 될 것같다. -webkit-filter 같은 경우에는 WebKit 기반 브라우저(예: 사파리)에 대응하기 위해 같이 사용해주는게 좋다.

😢 내가 겪은 문제 이미지 옆 텍스트를 세로 중앙 정렬 하는 일은 정말 많은 것 같다. 그때마다 찾아 썼는데 그냥 내가 기록해놓고 써야겠다. 티스토리는 항상 켜놓는데도, 쓸때마다 구글에 검색해서 찾는것도 귀찮은 것 같다. vertical-align:middle; 이 간단한 걸 맨날 구글에 "이미지 옆 텍스트 수직 정렬" 검색해서 찾아 쓰고 있으니 .. 그 시간이 오히려 더 아까운 것 같다.

😢 내가 겪은 문제 나는 역시 개발을 못하는 구나. 하고 느끼는 부분이 CSS 다. 참 모바일 뷰 대응을 진짜 너무 못하겠다. 진짜 모바일 뷰 대응하다가 머리카락 다 빠질것 만 같다. 핸드폰은 왜 크기가 다 다른지 정말 싫다. 뭐 하나하면 다른 화면에서 문제고 수정하면 또 다른 화면에서 문제다. 일단 해결방법 중 하나가 CSS @media 를 이용하는 방법인데, 이 방법도 많이 사용한다고 하니, 기록하려고 한다. /* 화면 너비가 320px 이하일 때 스타일 적용 */ @media (max-width: 320px) { /* 스타일 */ } /* 화면 너비가 768px 이하일 때 스타일 적용 (일반적인 모바일 기기) */ @media (max-width: 768px) { /* 스타일 */ } /* 화면 너..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 나는 이 문제가 제일 짜증난다. 내가 하는 방법이 맞는지도 모른다. 되니까 쓰고는 있는데 ... height: 100% 해도 높이가 100% 가 안된다. 진짜 너무 답답하고 화가나는데 .. 일단 되긴 하니 방법을 공유하려고 한다. 나같은 문제를 겪는 사람이 많은 것같다. 검색해보면 참 많은 정보가 나온다. globals.css html, body, body > div:first-child, div#__next, div#__next > div { height: 100%; } div#__next > div { height: calc(100% - 61px); } 여..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 나는 개발할 때 CSS 작성하는게 제일 햇갈리고 어렵다... 원래 필요할때마다 찾아쓰라고는 하는데 할때마다 멈칫멈칫 하는게 아주 기분이 나쁘다. 그래서 그냥 기록해놓는게 편하겠다 싶어서 기록하기로 하였다. 아주아주 간단하고 복사해서 붙여놓으면 바로 쓸 수 있다. 아주 좋다고 할 수 있다. left: 50%; transform: translate(-50%, -50%); 중요한건 2번째 줄 코드인데 translate(-50%, -50%): 백분율 값을 사용하여 요소를 수평 및 수직으로 이동 -50% 값은 요소의 너비의 반만큼을 왼쪽(수평)으로, 높이의 반만큼을 위..