2024. 1. 11. 01:45ㆍBackend 취업준비/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 분석
- 부모 요소는 항상 자식 요소의 아래에 존재한다(부모의 z-index를 자식의 z-index보다 높게 설정하더라도)
- 겹친 요소가 형제 관계에 있다면 z-index를 비교하여 높은 숫자를 가지는 요소가 위로 나타난다.
- 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;
}
위의 세 원칙대로 라면 오른쪽 그림의 빨강-파랑이 형제 관계이고 초록이 빨강의 자식이므로 초록이 파랑 위로 올라오는 결과에 의문이 듭니다.
이 현상은 왼쪽에선 빨강의 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 : 웹킷 기반의 웹 브라우저에서 사용 가능하다 는 뜻
출처
- (도서) 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석
- mdn web docs (https://developer.mozilla.org/en-US/)
- https://velog.io/@garcon/Flexbox-flex-basis-auto와-0의-차이점
'Backend 취업준비 > Frontend' 카테고리의 다른 글
| 자바스크립트 객체 지향에 관한 고찰 (0) | 2024.01.18 |
|---|