CSS) Display 속성의 종류

기본적인 Display 속성의 종류

none	block	inline	inline-block
- 안 보여요. - 클릭도 안 돼요. - 아예 영역이 사라져요.	- 한 블록을 모두 점유하는 요소이다. - 대표적으로는 h, div 등이 있다. - height와 width를 설정할 수 있다. - 구획으로도 많이 쓰인다.	- 글자처럼 취급되는 요소이다. - 한 블록에 여러 개가 쌓일 수 있다. - 대표적인 인라인 요소는 p, span 등이 있다. - height와 width를 가질 수 없다. (컨텐츠에 auto로 맞춰짐)	- block과 inline의 중간 형태. - 라는데 그렇게 딱히 쓰이는 걸 본 적이 없다.

 

 

Display: none과 visibility: hidden, Opacity: 0의 차이

display:none	visibility:hidden	opacity:0
영역 사라짐 이벤트(ex.클릭) 작동 안함 tab focus 안됨	영역 있음 이벤트(ex.클릭) 작동 안함 tab focus 안됨 뒤에 있는 요소 클릭 가능	영역 있음 이벤트(ex.클릭) 작동 함 tab focus 됨 뒤에 있는 요소 클릭 불가능

즉 영역을 아예 남기지 않고, 이에 달려있는 이벤트도 사라지게 만들고 싶을 때 display: none이 유리하다.

 

 

Display flex, grid, ruby란?

block과 inline은 외부 요소와의 상호 관계를 설정하는 태그라면

flex와 grid는 내부 요소들을 정렬하는 역할을 한다.

display: flex	display: grid
- 기본적으로 flex를 선언하면 안의 요소들이 수평 정렬이 된다. - flex-direction으로 주 방향을 수직으로 바꿀수도 있다. - flex박스와 아이템간의 간격 조정과 아이템들 간의 간격 조정이 가능하다. - justify-contents와 align-items로 주축 정렬(기본적으로 수평), 보조축 정렬(기본적으로 수직)을 바꿀 수 있다. - flex-wrap 속성으로 flex-box 내의 아이템 overflow를 조절할 수 있다.	- 그리드를 미리 짜서 그 그리드에 요소들의 부피를 얼마나 할당할건지 정하는 것 -grid-template으로 column으로 열을, row으로 행을 조작한다. - Adobe Indesign에서 편집디자인을 해봤다면 대강 사용법은 다들 알거다..

기타 display table, table-row 등은 많이 쓰이지 않으므로 생략