[Web] html <div> property 정리

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

<div>: The Content Division element - HTML: HyperText Markup Language | MDN

<div> - flow content 를  위한 generic container

align-items

align-items 는 flexbox 나 grid container 내부 아이템의 정렬을 정의한다.

• flex-box : 내부 아이템은 기본적으로 vertical 정렬 (세로축 정렬)
• grid-container : 내부 아이템은 block 방향 정렬. 보통 block 은 위아래 방향이고 inline 은 왼쪽에서 오른쪽 방향

div {
  display: flex;
  align-items: stretch;
}

div {
  display: flex;
  align-items: center;
}

 

div {
  display: flex;
  align-items: flex-start;
}

div {
  display: flex;
  align-items: flex-end;
}

div {
  display: flex;
  align-items: baseline;
}

 

z-index

요소들의 Z축 position 조정. 화면으로부터의 위치를 조정해서 요소들을 겹치게 놓을 수 있다. 숫자가 클수록 가까워지고(= 앞으로 오고), 숫자가 작을수록 멀어진다(= 뒤로 감)

 

🔗 이미지 출처

https://www.w3schools.com/cssref/css3_pr_align-items.php

CSS align-items property