Position

• 레이아웃을 위한 position 프로퍼티 사용

• position: relative;

• position: absolute;

• position: fixed;

• position: static;

relative

• relative 만 있으면 static 과 다를바 없다.

• top, right, bottom, left 프로퍼티가 있어야 이동 가능

  → position 프로퍼티가 있을 때 사용 가능하다.

• top: -20px; → 위로 20px 이동한다.
  
  

absolute

• 특정 부모에 대해 절대적으로 움직인다.

  → 부모 중에 relative, absolute ,fixed 중 하나라도 있어야한다.

• absolute 값을 갖게 되면 내용의 크기가 가로크기의 값이 된다.

  → block 요소가 inline 요소처럼 된다.

• right: 0; → 부모의 오른쪽 끝에 붙어 있는 위치

  → left: 0; 까지 주면 왼쪽 끝까지 붙어서 width: 100% 의 결과와 같다.
  
  

fixed

• 브라우저 화면 크기만큼, 화면 내에서만 고정된다.

• right: 0; 브라우저의 오른쪽 끝에 붙어 있다.

• header를 고정했을때 상단이 겹칠 수 있다.

  → body에 padding-top 주거나,

  → 겹치는 요소에 margin-top 주기

position이 absolute 거나 fixed 가 되면 주변의 요소에 영향을 받지 않아서, 요소가 겹칠 수도 있다.

---

Display: flex

• 부모 요소 : flex container / 자식 요소 : flex item

Flex 컨테이너에 적용하는 속성

• display: flex;

  → flex item들은 가로 방향으로 배치되고, 각자 내용물의 width 만큼 차지한다.

• flex-direction : 아이템이 배치되는 축의 방향을 결정한다. 기본값 row

.container {
	flex-direction: row;
  /* flex-direction: column; 세로 방향*/
	/* flex-direction: row-reverse; 가로 역순 */
	/* flex-direction: column-reverse; 세로 역순*/
}

• flex-wrap : 줄바꿈 처리한다. 기본값 nowrap : 줄바꿈 안하고 넘치면 삐져 나감

.container {
	flex-wrap: nowrap;
	/* flex-wrap: wrap; 줄바꿈 */
	/* flex-wrap: wrap-reverse; 줄바꿈 역순*/
}

• flex-flow : flex-direction 과 flex-wrap 을 같이 지정

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

• justify-content : 메인축 방향 정렬. 기본값 flex-start

.container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; 사이에 균일한 간격 */
	/* justify-content: space-around; 둘레에 균일한 간격 */
	/* justify-content: space-evenly; */
}

• align-items : 수직축 방향 정렬. 기본값 stretch : 수직으로 끝까지 늘어남

.container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; 텍스트 베이스라인 기준으로 정렬 */
}

Flex 아이템에 적용하는 속성

• align-self : 개별 아이템의 수직축 방향 정렬. 기본값 auto (컨테이너 상속)

  → 사용법은 align-items 와 같다.

• order : 시각적인 나열 순서를 결정

.item:nth-child(1) { order: 3; } /* 마지막 위치 */

.item:nth-child(2) { order: 1; } /* 맨 앞 */

.item:nth-child(3) { order: 2; } /* 두번째 위치 */

참조목록
https://learnlayout.com/
https://studiomeal.com/archives/197
https://www.youtube.com/watch?v=2BHyrE-nR3Q