CSS display 속성

<Today's Goals>

• display:none과 visibility:hidden의 차이
• display:block과 display:inline-block의 차이

<What i learned>

• display:none 화면에 보이지 않는 것뿐아니라 공간도 차지하지 않는다. (특정 요소를 hover상태에서 노출되도록 할때 사용할 수 있다. )

<Questions>

• visibility:hidden는 어디에 사용하는가?

---

display 속성

화면 보여주는 방식

• display:none; 화면에서 숨김. 화면에 보이지 않는 것뿐아니라 공간도 차지하지 않음 (삭제의 개념)
• display:block; 블록레벨요소로 만듬.
• display:inline; 인라인 레벨로 만듬 / 주로 목록에서 사용 /박스 모델 값이 적용 안됨.
• display:inline-block; 인라인 레벨로 배치 + 블록 레벨 속성 지정.

[화면에 보이고 안보이는 스타일속성]
1. display
display:none; 화면에서 숨김. (요소뿐만아니라 공간까지 안보임)
display:block; 화면에 보임.

2. visibility
visibility:화면에 보이거나 숨기거나 함. (공간은 그대로 유지되고 요소만 안보임)
visibility:hidden; 화면에서 숨김
visibility:visible; 화면에서 보여줌

3. opacity
 :0~1, 0:투명도 0을 의미,  0.5:투명도 50%, 1:투명도 100%