프로젝트를 하면서 hover 기능을 넣을 일이 있었는데 hover를 하니까 글씨가 나오면서 밑에 있는 줄이 깨지더라고요. hover를 했을 때 나오는 글은 display 속성을 none으로 했는데 왜 깨지는 지 이유를 알 수 없었습니다. 옆에서 보던 훌륭한 팀원분이 display속성을 visibility:'hidden';으로 바꿔보라고 권유해서 바꿨는데 라인이 안깨지고 hover했을 때 글씨가 나오더라고요. 그래서 display와 visibility에 대해서 찾아보기로 했죠.
먼저 display 속성에서 none, block, inline, inline-block이 있습니다.
- 먼저 display: none;은 visibility hidden과 유사하면서 다른 점이 있습니다. none은 화면에 글을 출력하지도 않고 공간을 차지하지도 않습니다. 반면에 hidden은 글을 출력하지 않는 건 똑같지만 공간을 차지하고 있습니다. 말 그래도 hidden 뒤에 숨어 있는거죠. 동적인 효과에서는 랜더링 문제로 visibility를 사용해야한다고 했다.
- display: block; 은 div, p, h, li태그 등 큰 단위가 이에 해당되며 기본적으로 가로영역을 모두 차지한다. 그랫 block 처리를 하게 되면 자동으로 다음 글은 줄바꿈이 되어버린다.
- display: inline;은 span, b, i, a 태그 등 작은 단위가 이에 해당되며 block과 달리 줄바꿈이 되지 않는다. 또한 width와 height속성을 지정할 수 없어서 글자크기만큼만 속성을 추가할 수 있다. inline은 글씨나 문장에 효과를 주기위해 존재하는 속성이라고 생각하면쉽다.
- display: inline-block; 은 block 요소와 inline요소가 결합된거라고 생각하면 되는데 width와 height를 지정할 수 있지만 줄바꿈은 되지 않는다. 한마디로 글씨나 문장에 box처리해서 효과를 줄 수 있다.
display 배운긴 배웠는데 정확하게는 몰랐는데 이번에 프로젝트를 계기로 조금 더 정확하게 알게되고 이해한거 같아서 좋다. 이렇게 사소한거라도 모르는 내용이 있으면 구글링하고 알아보고 이해하고 정리하는 습관을 가져야겠다.
즐겁게 개발