개발 일지 32 - 댓글 프로필 이미지 마무리

이미지를 출력이 성공적이다.

 

이제 위치만 수정해주면 된다. 

 

아무렇게나 위치하고 있는 이미지를 닉네임 바로 옆에 위치를 시키고 싶었다.

 

가장 먼저 시도했던 방법은 margin을 이용하는 것이었다.

 

    alt="Profile Picture" 
    style="cursor: pointer; width: 30px; height: 30px; border-radius: 30%; margin-right: 500px; " 
>

 

오른쪽 margin을 큰 값으로 주면서 위치를 옮겼다. 잘 해결된줄 알았는데 문제는 대댓글을 잘성하면서 생겼다.

댓글보다 한 칸 들여써지는 대댓글에 margin 500은 이미지가 닉네임 영역을 침범하게 했다.

 

이 방법은 아니겠다 싶어서 다른 방법을 고민한 것이 닉네임과 이미지를 div로 묶는 것이다.

 

<div style="display: inline-flex; "> 
...nickname
...image
</div>

 

 

inline-flex는 주변 요소들과 같은 줄에 나란히 배치될 수 있으며, 높이가 자동으로 조정된다. 

 

이미지가 깔끔하게 닉네임 옆에 배치되는 것을 확인했다. 이미지와 닉네임 사이에 공간이 아예 없어서 margin-left : 6px로 간격을 좀 벌려주었다.