응용 과정

• https://codepen.io/CucuIonel/pen/yLaLGL
• 해당 css를 바탕으로 styled-components를 사용하여 리액트 컴포넌트로 채팅화면을 구현한다.
• apache 대신 리액트 nodejs 서버를 이용한다

기본 틀

css: position

• https://developer.mozilla.org/ko/docs/Web/CSS/position
  https://creamilk88.tistory.com/197
  https://justmakeyourself.tistory.com/entry/css-position-property
  https://www.w3schools.com/css/css_positioning.asp

• position의 종류로는 static relative absolute fixed sticky 등이 있다.

  값	배치
  static	기본 값. 배치 불가능
  relative	본인 static을 기준으로 배치. 흐름에서 배제되진 않음
  absolute	가장 가까운 위치에 있는 조상 요소를 기준으로 배치. 흐름에서 배제됨
  fixed	뷰포트를 기준으로 지정한 오프셋에 계속 고정
  sticky	스크롤을 내리다가 지정한 오프셋에 위치하고 나서부터 계속 그 위치에 고정

• 먼저 position으로 요소를 배치할 방법을 정하고 top, left, bottom, right로 최종 위치를 정해준다.

css: margin auto

• https://hansolcha.tistory.com/4
• 중앙 정렬 시 사용 ex) margin: 30px auto; //좌우여백 30px 가로 중앙에 배치

css: overflow

• https://offbyone.tistory.com/296
• 요소 내 컨텐츠가 넘칠 때 어떻게 처리할 것인지
• hidden: 숨김, scroll: 스크롤바