레이아웃, 배치의 비밀

uhye·2022년 3월 20일
0

패스트캠퍼스 강의를 정리한 내용입니다.
"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 :inlineblockinline-block
흐름 방향수평수직수평
너비XOO
높이XOO
수평 마진OOO
수직 마진XO (중첩)O (중첩X)
수평 패딩OOO
수직 패딩OOO

*속성값이 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 사용 가능
  • 스크롤 포트가 배치 기준 (스크롤 포트: 스크롤이 있는 박스)
  • 부모 요소가 스크롤 포트에 보이는 동안 스크롤 포트를 기준으로 고정됨
  • 부모 요소가 스크롤 밖으로 이탈할 경우 고정 해제됨
  • 사용 시, 세가지 조건이 충족되어야 함
    • 스크롤 포트
    • 스크롤 포트 내 자기 자신이 되는 요소
    • 스크롤 포트를 감싸는 요소
profile
Frontend Developer

0개의 댓글