목록flex-end (1)

Enjoy Programming

Cocoa Talk 7 - 2 Chat.html

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