Enjoy Programming

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

오늘 챌린지 종목은 box다루기 이다.,~ 이런 box layout 만들기. requirement - use external css 외부 css 파일 임포트 하기가 전부다 자 만들어보자 그냥 보면 배경화면색주고 div로 박스 하나 만들어주고 박스안에 박스 세개를 만들어주자. 그리고 background-color에 #ff6447을 바디에 준다. ( colorzilla로 색은 따오면 된다. ) 똑같이 바디안의 첫번째 박스에 #f5deb3색상을 주자 그리고 그안 박스에 #008080색을 준다. 아직 박스 크기들을 설정은 안해줬으니 될리가 없다. 음 페이지롤러로 사이즈 재보니 대충 첫번째 박스가 240px씩이고 그 안에 세개는 60px씩이다 주자 이런 박스가 만들어졌다~~~ 이제 해야할 것은 화면 중앙에 배치해..

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