Enjoy Programming

오늘 노마드 코더 vanilla js챌린지는 마우스 이벤트에 관한 내용이다 내용인 즉슨 마우스 오버시 그리고 마우스 이탈시 마우스 우클릭시 그리고 화면크기 변경시 이벤트를 주는 javascript 코드를 짜보았다 요롷게 인데 이렇게 짜보았다. 설명하자면 event handler를 supereventHandler 객체에 모두 담아주고 addEventListener를 통해 각 함수를 콜백하고 마우스 이벤트 처리를 해주었다. innerHTML속성을 이용하여 텍스틀 변경해주고 style을 각각 변경 해줬다. 그리 기본적인 코드인데... 문제를 제대로 인지하지 못해서인지 해멨다.... 마우스 우클릭시 브라우저 상에 우클릭하면 이벤트를 실행하는 거였는데 아무리 해도 안되는 거다.. 내 맥북이 문제인가;;; 싶었는데..

자 grid-template을 배워봤다. 분할이 잘되고 전체적인 html을 다루기가 쉬워진다. 그런데~ grid-template-area 프로퍼티를 사용하지 않고도 똑같이 가능하다 기초적인 걸로~ row와 column의 개념만 제대로 알고 있고 줄의 갯수만 셀수 있으면된다. 바로 grid-column(row)-start(end) 만 잘 이용해도~~ 자 이전 template-area관련 속성은 다 지워주고 보자 자 높이 너비 모두 100px인 4x4의 그리드만 만들어줬다. 아까 언급한 row와 column을 잘보고 줄 갯수만 잘보자 이경우엔 갭을 줬기에 줄갯수가 많지만 잘생각해보면 원래 가로세로 1~5번까지 줄이있다.~ 박스가 네개니까. 이상태에서 첫번째 박스에 grid-column-start: 1; gr..

아직 데이터베이스를 이용하지 않았다. 이번엔 전체 application의 흐름을 가짜로 설정하는데 fake info를 이용해 템플릿을 완성시켜보자. 홈화면에 비디오를 보여줄텐데 가짜 데이터를 뿌리기위해 db.js를 만들어주고 안에 videos라는 배열을 만든다. (가짜 데이터를 통해 테스트하는 방식을 연습하자 데이터베이스에 무엇을 추가할지 설정하기 전에 빠르게 수정이 가능하다) 비디오 아이디, 타이틀, 설명, 조회수, 파일주소, 작성자(id, name,email)등을 배열로 적어주고 이제 홈화면에서 이것을 뿌려야 되니 videoControllers에 home컨트롤러에서 video목록을 받아 render함수에 전달한다. 이렇게~ 그리고 home.pug에서 임의로 작성한 데이터들을 뿌려주는데 each in을..

그리드 템플릿의 영역 지정에 대해서 알아보자. 4개의 박스를 그리드로 지정하고 grid-template-columns를 200px씩 지정해주고 grid-template-rows를 300px씩 지정해줬다. 이걸 간편하게 쓰는 방법이 있는데 바로 repeat()함수를 사용하면된다. repeat( lines, px ) 이런 식으로 지정해주면 된다. 상기 이미지의 경우 rows와 columns를 repeat(4, 200px), repeat(4, 300px)로 지정하면된다. 자 이상태에서 html의 골격에 맞게 header는 위쪽 가운데 content와 nav를 가장 아래 footer를 넣어주자 이때 사용할 속성이 grid-template-areas: 이다!! 사용방법은 먼저 내가 배치하고 싶은 박스들에 이름을 ..

그리드 레이아웃이란! 그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성한다. 이 디자인은 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여준다. 자~ 보자 필자는 이제껏 박스요소를 배치하고 정렬함에 있어 flexbox를 사용해 왔다. 플렉스 박스를 이용해 4개의 박스를 만들어주고 30%의 basis를 갖게 한다. 그리고 격자무늬로 화면에 표시 되기 위해 wrap해주고 4번박스 상단에 margin-top을 준다. 자 이렇게 공간을 가진 화면이 구성되었다. 그럼 여기서 5번 박스 하나를 더 추가한다면?! .... space-between으로 인해 5번이 저 멀리 떨어져 있다. 그리고 마진탑을 ..

이번엔 flex-basis에 대해서 알아보자. 이 속성도 자식요소에 적용시키는 속성이다. flex-basis flexbox의 initial size를 지정해준다. 얼핏 보면 width값을 지정하는 것과 비슷하다. 예를 들어 보자. width: 300px;을 지정한것과 flex-basis:300을 지정한 박스는 보기와 같이 같다. 자 여기서 기준은 flex-direction이 row일때를 기준인 것이다 다시말해 main-axis상에서 flex-basis가 300px이다. 만약 축을 뒤집는 flex-direction: column이 된다면? 바뀌었다. 바로 main-axis를 따라 basis값으로 height가 300px이 되었다. 이것이 그저 width로 설정한 것과 다른 점이다.