display속성이란?
박스를 배치를 하거나 고유의 속성을 바꿈.
display는 '보여주다'라는 의미로 블록 요소와 인라인 요소의 특징을
바꿀때 사용함.
*보통 img들은 block으로 바꿔준 후에 다른 속성값을 적용한다.
기본값
display : 바꾸려는 속성값;-display : block; 해당 요소를 block속성으로 바꿈
-display : inline; 해당 요소를 inline속성으로 바꿈
-display : inline-block; 해당 요소를 inline-block속성으로 바꿈
-display : none; 해당 요소와 영역을 모두 표현하지 않음(숨김)
inline속성 block속성으로 바꾸기
-inline속성을 가진 태그들은 너비와 높이를 가지지않는다. 따라서 너비와 높이를
주고싶은 경우에는 block 속성으로 바꿔주어야 한다.
*위의 이미지처럼 display를 적용했더니 block속성처럼 너비와 높이가 나타난다.
block속성을 inline속성으로 바꾸기
위와 마찬가지로 display 속성을 이용하면 block속성을 inline속성으로 바꿔줄 수있다.
display : none; 으로 숨기기
위의 이미지와 같이 display : none;속성을 사용하면 아래와 같이 박스를 숨길 수있다.
영역은 남겨둔채 요소를 숨길 수 있는 visibility
display:none을 사용하면 해당 요소가 차지하고 있던 공간과 해당 요소를 모두 숨긴다.
하지만 영역은 남겨두고 싶을때 visibility를 사용할 수 있다.
-visibility:hidden; 요소가 차지하고 있던 영역은 그대로 두고 요소만 숨김.
-visibility:visible; 요소가 차지하고 있는 영역과 요소를 그대로 보여줌. 기본값.
숨겨진 영역을 다시 나타내주는 hover기능
