TIL-23.05.27

 

문제점

프로젝트에 아이콘을 넣을때 div의 background-image를 활용해 이미지를 넣던 중,

이미지마다의 본래 사이즈 가로 세로 비율에 따라 이미지가 들쭉날쭉한 경우가 발생했다.

이미지 전체가 나오지 않는 경우도 발생했고, 이것에 관한 확실한 개념적인 이해가 필요했다.

 

div {
  background-size: auto; /* 이미지의 원래 크기 */
  background-size: 200px 100px; /* 고정된 픽셀 값 */
  background-size: cover; /* 요소의 전체 영역을 채우도록 확대 또는 축소 */
  background-size: contain; /* 요소 내부에 완전히 들어갈 수 있도록 확대 또는 축소 */
  background-size: 50% 75%; /* 요소 너비와 높이의 백분율 값 */
}

 

시도한점

기존에 내가 작성한 css스타일링 코드를보니 무조건 cover만 적용해왔었다. 그러다보니 이미지마다의 가로 세로비율마다 잘리는 경우가 발생했던것.. 이럴땐 contain을 적용시키면 이미지가 잘리지않는다. 하지만 contain도 원하는 크기의 가로 세로비율을 적용시키기엔 힘들다. 요소 내부에 완전히 들어갈 수 있도록 확대 또는 축소되므로 외부 요소에 맞게끔 크기가 변경되기때문이다.

이걸 어떻게 내가 원하는 정확한 가로 세로 크기를 적용시킬지 고민할예정이다. 참고자료를 찾아보니 반응형 css에 대한 개념이 있어야 내가 맞이한 문제를 정확히 해결할수 있을것 같다. 반응형에 대한 공부를 해야될 필요성을 느낀다.

가로 세로 크기를 pixel로 지정했을때 온전한 사이트 크기에서는 보기 좋으나, 사이트의 크기를 줄이다보면 팅겨져?나가는 경우가 반드시 발생한다... 이걸 꼭 해결하고싶다. CSS에 대한 공부를 생각해보니 제대로 해본적이 없는것같다. 그때그때 필요할때마다 조각공부를 해온 내 자신에 반성한다 ㅠ

 

 

 

 

 

알게된점

이번 프로젝트에는 웹사이트 사이즈 & 앱 사이즈를 둘다 적용키로 계획했었다. 그래서 필히 반응형 css를 공부해야해서, 지금은 해결은 못했지만 이 문제를 확실히 해결하려한다... 저번 useEffect처럼 끝까지 해결해야지