Enjoy Programming

자 이번엔 아래 내가 작성한 메세지를 만들어주자 일단 외부 메세지를 복붙하자 복붙하고 아래로 간격을 주자 필요없는 이미지 태그와 작성자 태그는 삭제를 해주고 메세지 박스가 왼쪽에 있는걸 오른쪽으로 당겨와야 한다~ 이때 message-row의 modifier를 만들어주자 클래스명 하나를 더 생성후 이미 message-row는 flex상태이므로 modifier의 justify-content를 flex-end로 오른쪽으로 정렬 시킨다. 그리고 modifier의 mesaage__bubble의 배경색을 전역으로 설정한 --yellow색상으로 바꿔주고 border-top-right-radius:0; border-top-left-radius: 15px 로 설정해서 오늘쪽 상단을 뾰족하게 만들어준다. 이제 메세지 인포..

자 저번 시간에 이어 chat창을 만들어 보자. 우선 상단에 status-bar와 header를 포지션 고정 시키고 위치값 조정하고 레이어 순서를 z-index를 통해 정렬 해주었다. 이제 메인 태그로 돌아와 main-chat을 손보자 메인태그는 고정된 스테이터스바와 헤더와 다른 레이어이므로 고정된 애들과 같이쓰면 겹치게 되어 안보이니 마진탑으로 위치를 조정해주고 태그들을 만들어 나간다. 마진탑 120정도 주고 타임스탬프의 글씨는 흰색 배경색은 회색 비스꾸리한걸로 조정한다 박스에 패딩을 15정도 주고 글씨크기 보더의 둥글기 조절해주고 박스가 가운데 오도록 하기 위해 flex해주고 flex-direction을 column으로 바꿔주자 그런 다음 align-items:center로 중앙 정렬 해주면 끝! f..