*box-sizing: border-box;

border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다.
너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다.
대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.

"position:absolute"는 해당 element의 가장 가까운 relative를 가진 부모 기준으로 움직인다.

chats.html 추가 /w CSS

badge.css 추가

.user-component__column:last-child{};

flex의 영향을 받고싶지 않다면 div를 하나 더씌워서 부모-자식관계를 끊고 부모-손자 관계를 만든다.

more.html, settings.html, chat.html 추가

more.css, settings.css, chat.css 추가

HTML 수정없이 flex-direction: row-reverse 사용하여 순서 변경