패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명"

display

inline
block
list-item
inline-block
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
none
inherit

---

CHANGED DISPLAY

position: absolute | fixed
float: left | right
위의 두 속성을 사용할 경우, display 속성은 block으로 바뀜

---

inline/block/inline-block/none

display :	inline	block	inline-block
흐름 방향	수평	수직	수평
너비	X	O	O
높이	X	O	O
수평 마진	O	O	O
수직 마진	X	O (중첩)	O (중첩X)
수평 패딩	O	O	O
수직 패딩	O	O	O

*속성값이 none인 경우, 어떤 장치도 표시하거나 접근할 수 없음 (화면, 인쇄, 보조공학기기, 마우스, 키보드..)

---

display:none vs [hidden]

• 두 가지 모두 요소를 화면에서 숨기는 용도로 사용
• 태그 내 hidden 속성을 작성할 경우, 보조공학기기나 검색 엔진에도 노출되지 않으므로 주의

<style>
.hidden { display: none; }
</style>

위와 같이 스타일로 요소를 감추는 것 대신
요소 내 hidden 속성을 사용하여 요소를 화면에서 숨길 수 있음
<p class="desc" hidden>

---

Display Module Lv3

(Lv3에서 새로 추가된 값들)
run-in
flow
flow-root
flex
grid
ruby
ruby-base
ruby-text
ruby-base-container
ruby-text-container
contents
inline-table
inline-flex
inline-grid

display: flow-root

• 블록 컨테이가 됨
• 포함 콘텐츠는 새 블록 형식 문맥이 됨
  → 포함한 float 요소는 컨테이너 끝에서 clear 됨
• 부모-자식 요소의 수직 마진을 병합하지 않음

codepen 예제 확인

display: flex

• flex 컨테이너 박스를 생성
• flex 형식 문맥을 설정
• 포함 아이템(자식요소)을 1차원 기반으로 배치

display: grid

• grid 컨테이너 박스를 생성
• grid 형식 문맥을 설정
• 포함 아이템(자식요소)을 2차원 기반으로 배치

---

position

static

• left, right, top, bottom, z-index 사용 불가
• 배치 기준 없음
• 흐름에 따라 배치됨
• 주변의 형제 노드들과의 관계에 따라 자리가 배치됨

relative

• left, right, top, bottom, z-index, inset 사용 가능
• 박스의 현재 위치가 배치의 기준
• 배치를 변경할 때 다른 박스의 흐름을 깨지 않음
• 자식 또는 자손 요소의 absolute 배치 기준이 됨
• inset은 top, right, bottom, left 순서대로 네 개의 값을 한 번에 작성할 수 있는 속성

absolute

• left, right, top, bottom, z-index, inset 사용 가능
• 일반적인 흐름에서 완전이 이탈
• 부모, 형제의 크기나 위치에 전혀 영향을 미치지 않음
• 조상 박스가 relative, absolute, fixed, transform일 때, 조상 기준으로 배치
• inset 0, margin auto를 동시에 설정할 경우 한 가운데 요소 배치 가능

fixed

• left, right, top, bottom, z-index, inset 사용 가능
• 뷰포트가 배치 기준
• 조상 요소에 transform 속성이 있으면 transform 속성이 있는 요소가 배치 기준이 됨

sticky

• left, right, top, bottom, z-index, inset 사용 가능
• 스크롤 포트가 배치 기준 (스크롤 포트: 스크롤이 있는 박스)
• 부모 요소가 스크롤 포트에 보이는 동안 스크롤 포트를 기준으로 고정됨
• 부모 요소가 스크롤 밖으로 이탈할 경우 고정 해제됨
• 사용 시, 세가지 조건이 충족되어야 함
  • 스크롤 포트
  • 스크롤 포트 내 자기 자신이 되는 요소
  • 스크롤 포트를 감싸는 요소