이번 작업은 상세페이지에 유저명 옆 유저프로필 이미지를 띄우고자 하였습니다.
작업을 완료하고 로컬에서 테스트도 해본 뒤 배포 서버로 보내 확인하던 중 배포된 서버에서 이미지는 잘 들어갔으나 유저명이 옆으로 써져있는게 아니라 세로로 작성되어 있는 것을 확인했습니다.
개발자 도구를 이용해 서버와 로컬간의 css차이가 있는지도 확인해 보았고, 로컬서버의 이름을 길게 늘려도 로컬서버에서는 정상작동해 더욱더 원인을 알 수 없었습니다.
그러던 중 환경을 동일하게 맞춰보자는 생각에 로컬의 닉네임을 배포서버의 이름과 동일하게 설정하고 확인해보니 서버와 마찬가지로 유저명이 세로로 적혀있는 것을 확인할 수 있었습니다. 현재 상황은 영어일 경우에만 옆으로 잘 작성되고 한글일 경우 세로로 작성되는 것이였습니다.
문제의 원인을 인지했고 이를 수정하기 위해 사용할 css를 검색하던중 white-space라는 스타일을 발견해 유저명 태그에 white-space: nowrap;를 적용해주니 영어든 한글이든 알맞게 유저명이 입력되는 것을 확인할 수 있었습니다.
이제 막 개발 배우는 코린이