z-index: 각 html element에대해레이어를정의할수있다. 0이 default. 숫자가올라갈수록상위레이어를나타낸다. position absolute, fixed된 element에대해사용가능하다. (채팅창 구현에서 status bar와 header bar가 position: fixed이며 이때 background-color를 줌으로써 스크롤될때 올라오는 다른 element와 겹쳐보이지 않도록 했다. 다만 z-index를 주지 않으면 status-bar가 header-bar에게 가려지므로 z-index에 대해 우선순위를 status-bar에게 줘야한다.)
display:flex를특히많이쓰는거같다. justify-content: flex-start, flex-end, align-items: flex-start, flex-end, center. flex-direction: column, row-reverse(자식 element들순서바뀜) .특히 자식들의 높이가 만약 하나는 부모와 같고 하나는 그렇지 않을 때 align-items: flex-end를 사용하면 부모의 높이와 같은 자식은 가만히 있지만 그렇지 않은 자식은 밑으로 붙는걸 보고 신기했다. (채팅창 구현 중에 메시지 Element에서 말풍선과 시간을 구성할 때 사용함)
예를들어 채팅창에서 메시지 입력 부분의 버튼에 들어간 화살표와 이모티콘은 둘다 i tag이다. 둘다 같은 class에 속하긴 하지만 차이가 있다면 버튼 아이콘은 button tag가 한 번 더 감싸고 있다는 점이다. 그래서 만약 이모티콘에 해당하는 i만 조작하려면 6번의 경우가 아닌 7번의 경우를 사용해야한다.
이제 곧.. 100%..채팅창 클론
13:00 ~ 16:00
노마드코더코코아톡클론코딩 끝!!! 드디어 100% 강의를 완강했다. 딱 오늘부터 챌린지 시작이라 급하게 진도를 빼느라 무리했지만 그렇다고해서 이해 없이 넘어가진 않았다. 그래서 진행이 더뎠는데 그걸 시간으로 찍어눌렀다 ㅎㅎ 아래는 앞으로도 헷갈릴거 같은 부분을 정리해놨다.
animation, element의관계: 특정 element가어떤동작을할지 animation에정의한다. 동작대상인 Element css 코드에 animation attribute에만든 animation name을넣는다. 옵션값으로 infinite, forward등이있다. animation-delay는 animation 시작전멈춰있는시간이다.
:hover, :focus(state selector)를 selector 뒤에붙이면해당 element는명시한액션을만날때만 css코드가적용된다. 이점을응용하면 animatinon 과 state selector는조합되서사용될수있다.
코코아 클론 챌린지 1일차 퀴즈 및 깃허브 private 계정에 commit 완료바닐라JS 챌린지 1일차 퀴즈 및 깃허브 private 계정에 commit 완료
22:30 ~ 01:30
스터디의 미션, 교육사이트에서의 코스 수강 등 일주일을 바쁘게 달렸다. 그런데 '오늘 몇시간만 더 하면 끝이다' 이런 생각으로 버티고 해내면 다음 단계가 기다리고 있었다. 즉 개발 공부에 진짜 끝은 없는 것 같다. 단지 매일 매일 도태되지 않도록 최선을 다해 살아가야 할 뿐이다. 이 사실을 알아도 매일 열심히 살아야하는 내 지금 상황에 무슨 변화가 있겠나. 그러나 한 편으론 너무 지치고 힘들 때조차 무리를 해서라도 성취를 내야겠다는 생각은 지양할 필요가 있는 거 같다. 개발이라는 해위를 단기적인 시간투자로 끝내고 말것이 아니라면 속도보다 방향, 꾸준함이 더 중요하니 말이다. 스스로 페이스 조절도 해가면서 하자! 화이팅!
블랙커피레벨1 미션하기
마지막 시간엔 집중이안됐다. 추운데 자전거타고와서그런가...
그래서 시간을 마냥 낭비할 수는 없으니 ES6에 대한 강의영상이라도보기로했다(사실 3시간 중에 2시간은 멍 때렸다.)
ES6강의를 보기로 결심한 이유는 블랙커피 스터디다. 이 스터디는 4주 동안 매주 미션을 제출해야하며 내일이 첫 미션 제출 마감일인데 내 코드엔 진척이 없기 때문이다. 막막해서 다른 사람이 제출한 코드를 봤는데 문법 이해가 안됐다. 알고보니 ES6문법이다. 내가 문법을 배워도 당장은 수월하게 작성하지 못하겠지만 적어도 읽고 이해할 필요는 있을거 같았다.
인프런의 윤지수 강사님(코드스쿼드 소속!)의 기초 ES6 강좌를 선택했다. 오늘은 간단히 spread operator, filter, includes, Array.from, module(export, import)에 대해 공부하며 ES6 문법에 대해 조금은 친숙해진 느낌이다. 내일은 arrow function, destructing array 등을 추가로 수강해야겠다.