12. display, visibility, collapse, 서브 메뉴 만들기

upcake_ 2020. 3. 18. 12:01

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다.

- display로 태그가 어떻게 보일지에 대해서 정할 수 있다.

none	태그를없는 것 처럼 만듦
block	inline 태그를 block 태그 처럼 만듦
inline	block 태그를 inline 태그 처럼 만듦
inline-block	inline 처럼 한 줄안에 들어가지만, 줄 안에서 크기를 가질 수 있음

- inline 태그는 width와 height가 안 들어가고 margin이 좌우만 먹힌다.

- visibility : hidden 은 자리는 유지하고 보이지만 않게 만든다.

- table 태그의 경우 visibility: collapse;를 이용해 display: none; 과 비슷한 효과를 줄 수 있다.

- display: none, block과 hover를 활용하여 커서를 갖다 댔을 때 나오는 서브메뉴를 만들 수 있다.