TIL(2022.05.17)-[CSS] display: none과 visibility: hidden의 차이

display: none

display: none;

• 공간을 차지하지 않고, 보이지 않게 하는 것이다.

visibility: hidden

visibility: hidden;

• 공간을 차지하고 있지만, 보이지 않게 처리하는 것이다.
• 공간은 확보해야 되지만, 보이지 않아야 되는 경우에 사용한다.

위 같은 경우에는 manage friends 톱니바퀴 아이콘에 display: flex, justify-content: space-between을 이용해서 위치를 잡아준 상태이다.
아래에 more와 톱니바퀴 아이콘도 비슷하게 생겼기 때문에 비슷한 코드를 이용한 다음, manage 부분을 visibility: hidden;을 이용해서 공간을 확보한 상태로 보이지 않게 처리해주면 된다. (more에서는 manage 부분을 그냥 div로 감싼 상태로 진행했다)