[HTML&CSS] display 속성

display

element(객체)를 글자화 시키는 것
display의 기본 속성은 block이다.(줄바꿈/ 한줄을 모두 쓰는 속성)

※ 모든 element마다 기본 속성이 있다.
ex) 글자가 기본적으로 검은색, div는 block요소, span은 inline요소
※ element에 color를 지정해 주면 하위 모든 요소들이 해당 element의 컬러를 따라한다.

display : none

속성을 없는 것 (블럭이 안보인다.)

inline-block

블럭을 글자화한다. (줄을 바꾸지 않음/블럭을 한줄화/너비를 최대한 줄임)

display : flex

부모 요소를 플렉스 컨테이너로 지정하고, 그 안에 있는 자식 요소들을 플렉스 아이템으로 지정해서 플렉스 아이템의 배치 방향과 정렬을 조절 할 수 있다.

• flex-direction
  ※ 기본값 : row(가로)
  row-reverse : 역순으로 정렬
  column : 세로로 정렬(reverse를 붙이면 역순 정렬)
• justify-content
  center : 중앙 정렬
• align-items
  ※ 상위 div: flex container, 하위 div: flex item