Enjoy Programming

부모는 어떤 방식으로 자식을 위치 시키는가 flex박스에서 자식요소들에 위치를 시킬땐 분명 부모요소에 명령을 줬다 그런데 자식요소에게 명령을 줄 수 있는 property가 있다 바로 align-self와 order이다. align-self는 align-items와 비슷한 일을 하는데 이는 cross axis에 관한 내용이다 하지만 align-items와는 다르게 한 box에만 해당한다. 예를들어 박스 세개를 설정하고 flex시켜준 뒤 하나만 화면 세로 중앙에 배치하고 싶으면 align-self를 이용해서 center로 지정해주면 된다. *단 기본적으로 부모 요소 박스는 자식요소 박스의 height와 같다 따로 부모요소의 height를 꼭 지정해줘야 뷰포트 상에 세로 위치를 변경할 수 있다. 그리고 ord..

자 이번엔 아래 내가 작성한 메세지를 만들어주자 일단 외부 메세지를 복붙하자 복붙하고 아래로 간격을 주자 필요없는 이미지 태그와 작성자 태그는 삭제를 해주고 메세지 박스가 왼쪽에 있는걸 오른쪽으로 당겨와야 한다~ 이때 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 로 설정해서 오늘쪽 상단을 뾰족하게 만들어준다. 이제 메세지 인포..