Skip to content

[CSS in depth] part1(3장)

Jump to bottom
JueunPark edited this page Feb 18, 2023 · 5 revisions

3.2.1 overflow 핸들링

  • height를 명시적으로 선언 => overflowing risk

overflow control

  • visible/ hidden/ scroll /auto

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

  • auto? 사용자 에이전트에 따라 다름

  • 사용자 에이전트: 컴퓨팅에서 사용자 에이전트(user agent)는 웹 콘텐츠와 최종 사용자의 상호 작용을 검색, 렌더링 및 촉진하는 사용자를 대신하여 작동하는 모든 소프트웨어이다.

  • nested scrollable ares는 좋지 않은 경험

3.2.2 요소의 높이를 같게 만들기 - 백분율 높이의 대안

  • 백분율로 정의할 때는 부모요소의 height가 명시적으로 선언되어있어야한다. (순환정의되면 선언이 무시됨)

  • 컨테이너를 채우고 싶다면 100%보다는 100vh써라

  • 가장 많이 쓰는 방법은 같은 height를 사용하는 것이다.(create columns of equal height)

    • 문제?: 모든 열을 임의의 값으로 설정할 수 있다.
    • 하지만 컨텐츠에 따라서 높이를 결정하도록 하면 좌절가믕ㄹ 맛본다
    • 어떻게 해결했나? 의사요소/ negative margin사용
    • 지금은 flex box가 있으므로 훨씬 더 쉽다

두 column이 있을때 높이를 큰쪽으로 맞추기

css 테이블 레이아웃

  • 사이공간 정하기(gutter)

  • => 예전에는 'table'를 레이아웃을 위해서 쓰긴 했지만 의미와 맞지 않는다(non semantic HTML)는 문제

  • => 지금은 대체 솔루션이 많다.

flexbox

  • 디스플레이를 flex로 설정하면 flex container가 되는데, 이때의 특징은 디폴트로 두 자식이 같은 높이가 된다. width, margin은 아이템마다 설정할 수 있다.

  • 다양한 옵션은 챕터 5에서 다룸

  • 명시적 높이 설정은 복잡하게 만드므로 마지막으로 사용해야함

3.2.3 min height, max height를 사용

  • max height를 넘으면 over flow된다.

3.2.4 콘텐츠 수직 가운데 정렬

  • block에 vertical align을 middle로 설정하면 무시된다.

  • only effect table-cell element

  • 인라인 요소에 사용하는 경우: 같은 라인의 다른 요소간의 정렬에 사용할 수 있음

  • table cell요소에 사용하면: cell끼리의 정렬에 사용

  • 하단 상단 동일한 패딩 제공하고 컨테이너 크기는 자동으로 결정되도록

  • 위 방법을 못쓰는 경우, 경우에 따라 다르다.

    • 컨테이너의 크기를 지정하지 않은 경우 => 위에서 말한 방법
    • 특정 크기 지정이 필요한 경우/ 패딩을 못쓰는 경우 => 컨테이너에 display: table-cell and vertical-align: middle 설정
    • flexbox를 사용하는 경우 => 챕터 5
    • 텍스트 한줄이 컨텐츠의 전부일때 => 라인 하이트를 컨텐츠 하이트와 맞추기(컨텐츠가 인라인이 아니라면 인라인 블럭으로 지정)
    • 컨테이너 높이와 컨텐츠의 높이를 아는 경우 => absolute positioning (챕터 7)
    • 그 외의 경우 => (챕터 15)

3.3 네거티브 마진

  • 마진은 패딩이나 볼더와 다르게 마이너스로 적용 가능
    • 컨테이너 밖으로 나가거나 후속 요소를 끌어와서 겹칠 수 있다.

3.4 마진 병합 - 위, 아래로만 적용됨

  • 마진이 겹치면 합쳐지는 것

  • 이렇게 합쳐지는 이유는 텍스트 사이의 여백 때문이다.

  • p태그는 기본적으로 위 아래 마진을 가지고 있는데, 이것이 두 줄이 되었다고 두배가 되면 곤란하기 때문에 겹쳐지는 것이다.

  • 겹쳐지는 공식: 가장 큰 여백으로 결정 됨

  • 다른 wrapper element로 겹쳐져 있어도(인접 형제자매가 아니어도) 마진 병합은 일어난다.(collapsing multiple margins)

  • 마진병합 방지하기

    • flex/ grid 레이아웃 사용
    • border나 padding을 더하기
    • overflow auto로 설정
    • 컨테이너가 floated 요소거나 inline block, absolute, fixed position일때
    • table display types(table-cell, table-row 등)

Clone this wiki locally