(09.22) Front 기초 - css 크기 단위, display, position

[ 7주차 - 0922 ]

    금일 커리큘럼
        ├ 09:00 ~ 12:00 FrontEnd (css 크기 단위, display)
        └ 13:00 ~ 18:00 FrontEnd (posoition)

1. CSS 크기 단위 (px, em, rem, %)

모든 요소 크기는 px, em, rem, % 단위로 적용됨

px (pixel)

• 화면상의 고정된 픽셀 단위
• 부모 요소 크기와 관계없이 절대 크기
• 예: font-size: 16px; → 항상 16px

em

• 부모 요소의 font-size를 기준으로 계산하는 상대 단위
• 1em = 부모 글꼴 크기
• 예: 부모가 font-size: 20px; 이면
  • 1em = 20px
  • 1.5em = 30px

rem

• html(root)의 font-size 기준으로 계산
• 부모 영향 받지 않음 → 전체 문서의 root만 기준
• 예:
  • html {font-size: 62.5%;} → 1rem = 10px
  • 2rem = 20px, 1.6rem = 16px

백분율 %

• 부모 요소의 속성값을 기준으로 백분율 계산
• 어떤 속성이냐에 따라 기준이 달라짐
• 예 :
  • width: 50% → 부모의 너비의 50%
  • font-size: 120% → 부모 글꼴 크기의 120%
  • line-height: 150% → 글자 크기의 1.5배

요약

• 고정 크기 필요 → px
• 부모 기준 비율 → em
• 전체 페이지 기준 비율 → rem
• 부모 속성값 기준 백분율 → %

심플 예시

See the Pen Untitled by 정병천 (@eoxxpjoz-the-builder) on CodePen.

---

2. display 속성

CSS에서 요소를 어떻게 배치하고 레이아웃할지를 결정하는 속성

기본 박스 모델

• block : 한 줄 전체 차지, 줄바꿈 발생
• inline : 줄 안에서 콘텐츠 크기만큼만 차지 (width/height 적용 불가)
• inline-block : inline처럼 한 줄 배치되지만 block처럼 width/height 적용 가능

레이아웃 컨테이너

• flex : 1차원 레이아웃 (가로/세로 방향 정렬)
• inline-flex : inline처럼 한 줄 배치되지만 flex 속성 적용
• grid : 2차원 레이아웃 (행과 열 기반)
• inline-grid : inline처럼 한 줄 배치되지만 grid 속성 적용

1분코딩 - 플렉스와 그리드 익혀보기

• grid : https://studiomeal.com/archives/533
• flex : https://studiomeal.com/archives/197

테이블 계열

• table : <table>처럼 레이아웃
• inline-table : 인라인 배치되는 테이블
• table-row, table-cell, table-column 등 : <tr>, <td>처럼 동작

특수 값

• none : 요소를 화면에서 제거 (렌더링 & 레이아웃 포함 x / 접근성 접근 불가)
• contents : 요소의 박스를 없애고 자식만 부모에 직접 배치된 것처럼 처리
• list-item : 블록 요소 + 리스트 마커 (기본 <li>)

심플 예시

See the Pen 0922-2 by 정병천 (@eoxxpjoz-the-builder) on CodePen.

---

3. position 속성

요소의 배치 기준과 공간 참여 여부를 결정하는 속성

• 속성 값 : static, relative, absolute, fixed, sticky
• 오프셋 : top, bottom, left, right or inset
• 레이어 순서 : z-index

포지션 속성 동작

• static : 공간 O, 오프셋 및 z-index 적용 X
• relative : 공간 O, 오프셋 및 z-index 적용 O
  • absolute 의 기준점이 됨
• absolute : 공간 X, 기준점 기준으로 상속
• fixed : 공간 X, 뷰포트 기준으로 되며, 스크롤 고정
  • 단, 조상에 특정 속성이 있으면 그 조상 기준으로 absolute로 됨
  • 예 :transfrom,filter,perspective,will-change
• sticky : 기본 - 공간 O (relative), 스크롤 컨테이너 내 임계점 도달시 위치고정
  • 즉, 처음엔 relative 처럼 적용되다가 임계점에서 조상 스크롤 컨테이너에 따라 fixed처럼 작동
  • 무조건 오프셋 있어야 작동됨

레이어 순서 z-index

• z-index는 레이어 순서 정의하며, 값이 클수록 위
• z-index는 같은 스택 컨텍스트 내부 형제끼리만 비교
• 자식은 부모의 스택 컨텍스트를 절대 넘을 수 없음
  • 자식에게 z-index: 9999를 줘도, 부모 스택 컨텍스트보다 위로는 못 올라감

스택 컨텍스트란?

• 한 요소와 그 자손들끼리만 적용되는 독립적인 레이어(z-index) 계산 영역
• 경계(벽)가 있어서 바깥 형제들과 z-index 경쟁을 하지 않는 레이어 그룹이라고 생각하면 됨

심플 예시

See the Pen 0922-3 by 정병천 (@eoxxpjoz-the-builder) on CodePen.

---