CSS응용(position, flex)

2024. 1. 11. 01:45Backend 취업준비/Frontend

배치 방법을 정하는 position속성

 

position 속성값

  • static : 기본값, 문서에 작성한 대로 정상적인 흐름(normal flow)에 맞춰 배치한다.
  • relative : 원래 자신이 있어야 할 위치(static 위치)에서 상대적인 위치를 설정할 수 있다. normal flow를 따른다.
  • absolute
    • relative로 설정된 상위 요소(부모 요소)를 기준으로 위치를 지정한다. 부모 요소 중에 없으면 상위 요소를 찾아보고, 그래도 없으면 더 위의 요소를 찾는다.
    • 조상에 position속성이 relative로 적용된 것이 없으면, root요소(<html>)를 기준으로 설정한 위치 기준이 적용된다.
    • absolute는 normal flow에서 벗어난다. 따라서, normal flow 에 있는 요소들은 absolute요소를 인식하지 못한다.
  • margin vs position
    • magin은 normal flow를 준수하고, 요소 간 상호작용이 잘 된다. 반면에 position은 요소를 겹치려 할 때 주로 사용한다.
  • fixed : 브라우저 화면(viewport)을 기준으로 브라우저를 스크롤 하더라도 움직이지 않게 고정 시키고 싶을 때 사용
  • sticky : 조상에 스크롤이 있다면, 가장 가까운 부모 요소의 콘텐츠 영역에 달라붙는다. (IE에선 지원 안됨)

 

 

z-index

  • 기본값인 static이 아닌 다른 position속성으로 설정하여 요소들이 겹쳤을 경우 위로 나타나게 할 요소를 정해주는 속성
  • 부모 요소는 항상 자식 요소의 아래에 존재한다(부모의 z-index를 자식의 z-index보다 높게 설정하더라도)
  • 겹친 요소가 형제 관계에 있을 경우 z-index를 비교하여 높은 숫자를 가지는 요소가 위로 나타난다.
  • z-index를 설정하지 않으면 auto를 기본값으로 가지며, 이는 stacking context를 생성하지 않는다는 것을 뜻한다.(z-index를 0으로 설정하는 것과 다름)
  • z-index 분석
    1. 부모 요소는 항상 자식 요소의 아래에 존재한다(부모의 z-index를 자식의 z-index보다 높게 설정하더라도)
    2. 겹친 요소가 형제 관계에 있다면 z-index를 비교하여 높은 숫자를 가지는 요소가 위로 나타난다.
    3. 1, 2에서 판단한 결과가 같다면 normal flow에 따라 아래 작성한 요소가 위로 나타난다.

 

여기까진 다들 무리 없이 이해하셨을 것 같습니다. 그렇다면 다음 예시를 볼까요

<div id="example-auto" class="box back">
    <div class="box red">
        <div class="box green" style="z-index: 1"></div>
    </div>
    <div class="box blue"></div>
</div>

<div id="example-0" class="box back">
    <div class="box red" style="z-index: 0">
        <div class="box green" style="z-index: 1"></div>
    </div>
    <div class="box blue"></div>
</div>
.box {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
	top: 32px;
	left: 32px;
	}

.back{
	width: 128px;
	height: 128px;
	background: black;
	}

.red {
	background: red;
	}
.green {
	background: green;
	}
.blue {
	background: blue;
	}

 

왼쪽 red auto, 오른쪽 red 0

위의 세 원칙대로 라면 오른쪽 그림의 빨강-파랑이 형제 관계이고 초록이 빨강의 자식이므로 초록이 파랑 위로 올라오는 결과에 의문이 듭니다.

이 현상은 왼쪽에선 빨강의 z-index가 auto 이고, 오른쪽 빨강의 z-index가 0으로 설정한 것의 차이에서 발생 한다.

 

기본값인 auto와 z-index를 0으로 설정 하는게 다른 결과를 이끌어 낸다고 유추할 수 있겠죠?

 

그렇다면 먼저 형제 관계 간에 어떤 영향을 미치는지 살펴봅시다.

 

다른 설정은 다 같게 하고 초록 상자를 지운 후 왼쪽에 auto인 보라 박스를, 오른쪽에 0인 보라 박스를 겹치게 둬 봅니다. 요약하면 다음과 같은 결과가 나옵니다.

 

결과가 같은 모습을 볼 수 있습니다. 이를 토대로 형제끼리 auto와 0 비교를 하게 되면 같은 것으로 작동한다는 결과를 얻을 수 있습니다.

 

만약 오른쪽 그림에서 z-index = -1로 줘버리면 어떻게 될까요?

 

놀랍지 않으신가요? 파란색이 아예 뒤로 가버립니다.

이는 최상위 부모인 검정 배경 박스가 auto이기 때문입니다.

 

만약 검정 배경 박스에 z=index 값을 아무 값이나(-1000,0,1000 등등) 부여하게 된다면, 다시 예상했던 결과가 나오게 됩니다.

 

 

이를 이해하기 위해 stacking context 라는 개념을 이해할 필요 가 있습니다. stacking context를 설명 하자면

  • z-index를 설정하지 않으면 auto를 기본값으로 가지며, 이는 stacking context를 생성하지 않는다는 것을 뜻합니다.
  • stacking context가 생성된 부모 요소(여기선 박스)는 독자적인 비교 기준을 만들고, 자식은 이에 종속된다.

라고 할 수 있습니다.

  • 부모(검정)에 값을 부여하여 stacking context를 생성하지 않는다면 자식(빨강, 파랑, 보라)들이 검정에 종속 되지 않아 모두(검정, 빨강, 파랑, 보라) 같은 레벨인 것처럼 작동하는데 , 조건 3에 의해 검정 → 빨강 → 파랑 → 보라 순으로 위로 올라옵니다.
  • 파랑은 검정에 종속되지 않으므로, 파랑에–1을 주게 되면 검정, 빨강, 보라 보다 z-index가 낮으므로 가장 밑으로 가게 되는 것 입니다.
  • 부모(검정)에 값을 부여하여 stacking context를 생성한다면 파랑은 검정에 종속되고, 파랑이 ****빨강, 보라 보다 레벨이 낮으므로 밑으로 갑니다.

이를 토대로 조건 1이 무조건 적으로 적용 되는 것이 아니고, stacking context의 유무에 따라 가변적인 것을 알아낼 수 있습니다.

 

맨 위의 예제를 응용해서 다시 해볼까요?

  • 왼쪽 : 전부 같은 레벨처럼 취급 => 작성 순서에 따라(조건 3)
  • 가운데 : 검정 빨강 파랑 같은 레벨 , 초록만 1임으로 초가 가장 위로 올라옴
  • 오른쪽 : 빨강에 index 0 부여 => 검정 빨강 파랑 같은 레벨, 초록이 빨강에 종속되어 초록과 파랑은 작성 순서에 따라 파가 위로 올라옴
  • Question. 오른쪽 에서 빨강의 z-index의 값이 0이 아니고 -1이라면? 어떤 그림이 나올까요?

맞추셨나요? ㅎㅎ 읽어주셔서 감사합니다

 

추가로, 오른쪽의 설정에서 만약 빨강의 자식, 초록과 형제인 핑크 박스를 새로 만들고 z-index를 10으로 설정한다면? 핑크는 초록보다 위, 파랑보다 아래에 나올 것입니다.

 

결론 z-index 조심해서 쓰자!!

 

 

css-perspective 활용해서 원금감 설정할 수 있다

CSS Perspective Explained with Example 3D Transform in CSS

 

 

flex container

 

  • display : flex로 설정
  • flex로 설정한 요소를 container, 그 안에 들어가는 요소를 item이라 한다.

 

flex container에 적용되는 속성

  • 아이템들의 배치나 정렬을 담당하는 역할을 한다

flex-direction 속성

  • 주축의 방향과 item의 나열 방법을 선택한다.
  • row : 기본값, 주축 행 방향, item이 왼쪽에서 오른쪽으로 나열됨
  • column : 주축 열 방향, item이 위에서 아래로 나열됨
  • row-reverse : 주축 행 방향, item이 오른쪽에서 왼쪽으로 나열됨
  • column : 주축 열 방향, item이 아래에서 위로 나열됨

justify-content 속성

  • 주축 방향의 아이템 정렬 방법
  • flex-start : 기본값
  • flex-end : 아이템들을 끝 쪽에 위치 시킨다.
  • center : 아이템들을 주축의 중앙에 위치 시킨다.
  • space-between : 아이템들 간에 동일 간격이 유지되도록 위치 시킨다. (양 끝단 아이템들이 끝에 붙어있음)
  • space-around : 아이템들 둘레에 동일한 간격이 있도록 위치 시킨다. (양 끝단 아이템들이 끝에 붙어있지 않음)
  • space-evenly : 아이템들 간의 간격과 양 끝단 빈 공간이 동일하도록 아이템들을 위치 시킨다.

align-items 속성

  • 교차축 방향의 아이템 정렬 방법
  • felx-start, flex-end, stretch, center(중앙에 위치), baseline(문자 기준선)
  • vs align-content : flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직 축 방향 정렬을 결정하는 속성

flex-wrap 속성

  • 컨테이너의 영역을 overflow했을 때, item들을 어떻게 배치할 것인가?
  • nowrap : 기본값, item들이 컨테이너 영역을 overflow하더라도 그대로 한 줄을 유지한다.
  • wrap : item들이 컨테이너 영역을 overflow 한다면 넘치는 부분을 밑에 줄에 위치 시킨다.

 

flex item에 적용되는 속성들

 

 

flex item 크기 조절 속성

  • flex-basis : flex item의 기본 크기를 설정하는 속성
    • auto : 기본값, 아이템의 콘텐츠 크기(width)만큼 크기가 설정됨
    • 0 혹은 px 등으로 특정 값 설정 가능(0 외에 다른 정수 값은 사용 불가 다시 확인해보기)
    • 설정한 값보다 작았던 item일 경우 설정 값 까지 늘어남
    • 설정한 값보다 컸던 item일 경우 크기 유지
    • vs width
    • width로 설정하면 설정한 값보다 컸던 item도 설정 값으로 크기가 변경되게 된다.
  • flex-grow : container의 빈 공간을 설정한 비율에 따라 분배하는 방식
    • 0일 경우 늘어나지 않는다.
    • 1 → 자식 요소들이 모두 동일한 크기의 공간을 할당 받는다.
    • 2 이상 → 특정 item에 2이상을 설정할 경우 설정한 비율과 같은 크기의 여백 공간을 할당 받는다.
  • flex-basis : auto && flex-grow : 1 VS flex basis : 0 && flex-grow : 1
    • flex-basis : 0으로 설정하면 아이템의 기본 크기가 0이므로 여백이 100%인 상태가 된다
    • 따라서 content의 원래 크기와 무관하게 flex-grow 설정 비율대로 전체 공간을 분배하여 아이템에게 배분한다.
    예시로 보기
    • 각 item이 같은 너비를 가질 것이라고 오해하기 쉽지만, flex-basis: 0인 경우에만 content의 너비가 달라도 item이 같은 너비를 가진다.
    • 아래 이미지에서 두 flex box의 item은 모두 flex-grow: 1인 상태이다.

  • : 아이템의 기본 크기가 자신의 width 또는 height 값으로 설정된다. flex-grow:1에 따라 세 item 모두 같은 여백을 나누어 가지지만, 각자 content의 width가 다르므로 item 자체의 너비도 달라진다.
  • 아래: 아이템의 기본 크기를 0이라고 설정했기 때문에 여백만 100%인 상태이다. 따라서 long box, middle box, short box 모두 같은 너비(높이)를 나누어 가진다.

 

  • flex-shrink : flex-items가 flex-container 보다 클 때(영역 overflow) items가 줄어드는 비율을 결정한다.
    • 0일 경우 item크기가 flex-basis보다 줄어들지 않는다. (여백이 있다면 줄어듦)
    • 1 default, 숫자를 줄 경우 비례하여 줄어들게 된다.

 

 

align-items vs align-self

  • align-items : 전체 아이템
  • align-self : 해당 아이템만 따로 설정 가능한 기능. 설정하지 않은 경우 auto가 되어 align-items의 설정이 적용된다 따로 설정할 경우 우선순위가 높게 적용된다.

 

order

  • 각 아이템들의 시각적 나열 순서, 작은 숫자일 수록 먼저 배치

flex

  • 단축 속성 flex-grow, flex-shrink, flex-basis 순

 

추가

  • <img src="https://via.placeholder.com/300" alt=""> : 더미 이미지 생성 코드
  • position : -webkit : 웹킷 기반의 웹 브라우저에서 사용 가능하다 는 뜻

 

출처

'Backend 취업준비 > Frontend' 카테고리의 다른 글

자바스크립트 객체 지향에 관한 고찰  (0) 2024.01.18