스포츠 관련 모 커뮤니티 사이트 스킨 변경을 하면서 생긴 Troubleshooting 해결에 관한 피드백입니다.
동일한 스킨을 이용하는 모 커뮤니티 사이트 2개를 비교했을 때,
아래 사진을 보았을 때 기존에 없던 URL 복사 기능을 추가하면서 링크 URL 복사가 위의 사진과 비교했을 때, 링크 위로 공백이 많이 남는 것을 확인 할 수 있었습니다. 개발자 모드로 진입하여 확인을 해보면
위의 커뮤니티 사이트와 아래의 커뮤니티 사이트를 분석하면 확실히 더 아래에 위치함을 확인할 수 있죠?
관리자께서는 위의 사진과 같이 URL 복사 부분을 초록색 부분에 위치할 수 있게 요청해주었습니다.
우선 확인을 해보면,
차이점을 확인하셨나요.
짐작가셨을텐데, CSS의 Margin속성이 다름을 확인할 수 있죠,. 처음에 아무것도 모르는 상태에서 보면 찾는데 오래걸리셨을 수도 있지만, HTML CSS를 오래 다루신 숙련자분께서는 쉽게 확인하셨을 겁니다.
thisisexamplelink.com 사이트의 margin 속성을 보면
text-align: right;
margin-top: -35px;이에 반해 examplecommunity.me 사이트의 margin 속성을 보면
text-align: right;
margin-top: 10px;
margin-right: 3px;로 여백설정에 차이가 있음을 확인하실 수 있고, 여백을 줄이면 해결할 수 있는 문제입니다. 여백을 -35px로 줄여볼까요.
초록색 부분안으로 URL복사 부분이 들어왔음을 확인할 수 있습니다.
하지만, 이렇게 수정했을 때, 모바일 창에서
이렇게 링크가 이상하게 위치하는 문제가 생겼습니다. 그렇기에 일단은 -35px로 변경하는 것을 보류하였습니다.
다음 피드백에서 모바일 창과 margin-top PC버전의 창의 margin-top을 다르게 설정하는 피드백을 다뤄보도록 하겠습니다. 감사합니다.
이번 글은 트러블슈팅 피드백에 관해 글을 작성해보았습니다.
처음 써보는 피드백인지라, 많이 어색한 부분이 보이는 것 같습니다...ㅎㅎ
커뮤니티 사이트 스킨 변경에 관해서 의뢰를 받아서, 이번 기회에 HTML CSS를 많이 팔 수 있는 기회가 되었네요.
오늘도 긴 글 읽어주셔서 감사합니다.