Enjoy Programming

노마드 코더 챌린지 2번째 css-master 코스다 현재 코코아 클론 챌린지는 끝냈고 css-master코스와 vanilla javascript 코스 두개를 병행한다 그리고 유튜브 클론코딩과 es6강의도 함께 병행 하고있다.~ 시간이 부족하다 ㅋㅋ 어제 첫 레이아웃 챌린지는 이 포스터를 클론했다. flex-box를 이용해서 하는 건데 우선 내가 짠 html코드는 이렇다. 총 세개의 섹션으로 구분하고 헤더부분에 heading tag 두개 그리고 보더라인 아래 리스트 형태의 텍스트가 있는데 이것은 ul과 span으로 구분하고 ul에 li를 다 때려박았다. 마지막 섹션은 서클들이 들어가는데 아무래도 배운내용이 flex-wrap을 이용하는 것 같으니 하나의 박스에 다담았다 위 ul도 마찬가지다. 이제 css를..

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

자주 사용되는 코드를 반복해서 작업하는 것을 피하기 위해 views폴더에 mixins 폴더를 생성하고 템플릿을 만들어준다. mixin() 함수 pug의 함수로서 반복되는 html 또는 어떤 코드덩어리를 함수 형태로 만들 수 있도로 기능을 제공한다 사용법은 mixin 함수명()이렇게 쓰고 아래 코드를 쓰고서 사용할때는 + 함수명을 써주면 된다. pugjs.org/language/mixins.html Mixins – Pug Mixins Mixins allow you to create reusable blocks of Pug. //- Declaration mixin list ul li foo li bar li baz //- Use +list +list foo bar baz foo bar baz Mixins a..

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

그리드 레이아웃이란! 그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성한다. 이 디자인은 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여준다. 자~ 보자 필자는 이제껏 박스요소를 배치하고 정렬함에 있어 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로 설정한 것과 다른 점이다.