Dog foot print

2007년 현재는 고인이 된 스티브잡스가 it의 생태계를 완전히 뒤집는 아이템인 아이폰을 선보였다. 이 아이폰의 등장으로 인해서 웹디자이너들은 고민에 빠졌는데 바로 작은 디스플레이에서 기존의 웹은 너무 크고 불편하다는 것이였다. 그래서 작은 디스플레이에 맞게 웹을 새로 만들어야했다. 그래서 디자이너들이 할 수 있는 결정은 두 가지였다. 디바이스의 크기를 보고 새로운 페이지를 연결해주거나 기존 페이지에 미디어 쿼리를 활용 해 디바이스에 따라 css가 다르게 반응 하게 하는 것이였다. 미디어 쿼리의 사용 기본적인 media query의 사용이다. @media("크기"){} 형태로 작성이 되며 각 블록에 작성된 스타일은 미디어 쿼리에 적용된 한계를 벗어나면 적용되지 않는다. min-width, max-widt..

어제 만들어본 stack은 가장 늦게 넣은 것이 가장 빨리 나오는 LIFO(후입선출) 의 형태를 취하고 있다. 오늘 만들어볼 queue는 FIFO(선입선출)의 형태를 하고 있으며 원시적인 선형큐를 만들어 볼 것이다. Queue 란 ? 큐는 데이터를 선입선출을 하는 자료구조이다. queue는 우리 주변에서도 많이 보이는데 카운터에서 줄을 서고 있는 손님들이나 print의 출력에서도 queue의 형태를 볼 수 있다. 선형 큐란 ? 선형큐는 재사용이 되지 않는 형태의 큐이다. 배열에 공간이 남았더라도 rear가 max_size 까지 도달 했다면 배열 전체를 초기화 하지 않으면 item을 넣지 못한다. queue의 멤버변수 max_size // queue에 저장 가능한 공간을 뜻 한다. front // queu..

저번 학기 자료구조는 c언어로 활용하여 수업을 했었는데, c언어는 아주 기초적인 부분 말고는 대부분의 함수가 구현되어 있지않아 힘들게 요구하는 함수들을 정의해야만 했었지만 자바스크립트는 대부분의 기능을 지원해주기 때문에 쉽게 자료구조를 만들 수 있었다. Stack 이란 stack은 lifo(Last In First Out)의 형태를 취하는 자료구조로써 맨 먼저 들어온 것이 가장 나중에 나가고 가장 최근에 들어온것이 가장 먼저 나간다. 흔히들 접시를 쌓아놓은 구조로 설명하는데 접시를 쌓아 놓고 맨 아래에 있는 접시를 꺼내기위해서는 맨 아래 접시위에 있는 것들은 모두 치워야지 가능하다. 이처럼 스택 또한 데이터를 수직으로 쌓아 놓고 원하는 데이터 위에 아무것도 없어야지만 해당 데이터를 뺄 수 있다. Stac..

텍스트나 콘텐츠요소들을 세로 중앙정렬 하기에는 꽤나 골치아프다. 나름 내가 해결 했던 방법들 위주로 올려보도록 하겠다. line-height 사용하기 line-heigth 속성은 text가 자신의 박스모델에서 각 텍스트간의 상하간격을 정할 수 있다. line-height에 박스모델 만한 height값을 주게 된 다면 heigth값 /2 씩 텍스트 위 , 아래에 적용되서 해당 텍스트가 세로중앙에 존재하게 된다. div{ width: 200px; height: 200px; border: 1px solid black; text-align: center; line-height: 200px; } margin-top 과 position : absolute 속성을 이용한 수직정렬 position : absolute를..

date 객체를 사용할 일이 많이는 없지만 언젠가 달력을 만들거나 게시글 저장할때 'createAt' 용도로 사용하게 될 것이다. 객체의 사용 date객체는 생성자인자로 들어가는게 꽤나 많다. 생성자 인자로 어떤 것도 주지 않는다면 현재 시간이 표시된다. let a = new Date(); console.log(a); //2019-07-06T14:21:50.910Z 생성자 인자 객체의 콜솔을 찍어보면 나오는 그대로 new Date(연, 월 , 일, 시, 분, 초 ) 형태로 작성 해주면 된다. 다만 아이러니하게도 월과 일은 사용이 조금 다르다. 월은 0 부터 1월을 뜻하며 일은 "0은 전달의 마지막 날의 전 ", "1은 해당 달의 전달의 마지막 날","2는 해당달의 첫 날" 그래서 2019년 1월 1일을 ..

css를 만지면서 가장 힘들다고 느끼는 점은 한 div안에 고정적인 공간이 한개 혹은 두개 있는 경우 가변적인 공간의 크기를 할당하는 일이다. 100% - 250px-300px 이게 된다면 얼마나 좋을까 그런데 안된다. // sass는 된다고 알고있다. 여튼 이런 불편함을 제거 해주고자 css3는 다양하고 사용하기 쉬운 flex-box를 제공한다. FLEX-BOX flex-box는 item을 담고 있는 containner와 containner내부에 있는 item으로 구분 한다. 사용은 굉장히 쉽다. containner가 되는 div에 display : flex 를 선언한걸로 시작한다. .containner{ display: flex; width: 500px; height: 500px; border : 5..

클로저는 외부함수의 변수를 내부함수로 접근 하여 사용 하는 것입니다. 사실 객체의 캡슐화와 별 다른 것은 없습니다. 클래스의 멤버변수를 함수로 접근 하듯 클로저 또한 함수내부에 있는 함수로 접근 하는 것입니다. 스코프 자바스크립트 스코프는 2개의 스포크가 있습니다. 바로 함수스코프와 블록스코프입니다. 함수 스코프 : 함수 내부에서 만들어진 변수는 함수외부에서 접근 할 수 없고 함수 외부에서 const 와 let으로 작성되었다고 해도 함수 내부에서 새롭게 정의가 가능하고 이 변수들은 함수 내부에서만 작동이 가능하게 된다. 블록스코프 : {} 내부에서 만들어진 변수는 이 블록 내부에서만 유효하고 블록을 제외한 다른 곳에서는 접근이 불가능 하다. 클로저 사용하기 function good(){ let hello..

input 태그는 사용자가 웹페이지에 다양한 입력값을 전달하기 위한 도구이다. 그러나 이 input의 일부는 아직까지 모든 브라우저에서 동일하게 제공되지 않는다. 그러다보니 다양한 input들을 제공해주기 위해 개발자가 직접 만들어야 하는 경우도 종종 있다. input type 별 설명 input type : text text를 입력하기 위한 필드로 사용자가 text를 입력할 수 있다. input type : password text 와 password는 생긴것은 비슷하나 text를 입력하면 글자가 ' 점 ' 으로 표현된다. input type : button 특정 이벤트를 발생시키는 용도로 사용되는 input이다. input type : checkbox 한 개의 폼에서 다중선택이 가능한 입력이다. in..