메시지 입력창 간격 조절하기 - 가변 패딩 활용!

처음에 니꼬쌤이 알려준 대로 코드를 작성했을 때는 몰랐는데, 나중에 다시 들어가보니까 메시지 입력장 아이콘들의 간격이 마음에 들지 않았다. 

+ 아이콘은 왼쪽에 동떨어져 있는데 입력창은 또 오른쪽 간격이 엄청나게 좁고... + 아이콘이 있는 첫 번째 column의 너비가 10%로 되어있는데, 이게 너무 수치가 큰가 싶어서 너비를 줄여보면 모바일 화면에서는 또 수정한 너비가 너무 좁아서 입력창과 겹쳐 보였다. 너비를 수정하고 가운데 정렬도 시도해봤지만 다 모바일 or PC에서 균형이 예쁘게 잡혀있지 않았다.

그러다 padding을 각 화면에 맞게 조절할 수는 없을까?!! 라는 생각이 들었고, 검색을 해본 결과 가변 패딩을 활용하는 방법이 있었다. 사실 % 단위를 활용하는 게 가변 패딩인데.. 지금까지 이걸 신나게 따라해놓고 정작 활용할 생각을 하지 못했다. (TT)

 

화면 크기에 맞게 적절..하게 배치된다

PC로 볼 때는 여전히 + 아이콘이 너무 자리를 많이 차지하는 게 거슬리긴 한데 일단은 이 정도로 만족하려고 한다. 너비는 이미 %가 적용되고 있는데도 그런 거라서 고치기가 너무 힘들다😥