피리부는 사나이 (pied piper)

#Float -> Flexbox (플로트보다는 플렉스박스가 대세!) 문제는 플로트는 비효율적이라는 것이다. 'flex (or flexbox)가 탄생하고 부터..... #flex를 쓰자 (마법이다) :두 가지만 이해해도 큰 그림 이해 가능하다 Container => 안에 자식 요소로 item이 있음 속성값 존재 (박스에 지정하는 것) Display Flex-direction Flex-wrap justify-content align-items 등 아이템에 지정하는 요소 존재 Order Flex-grow Flex-shrink Flex align-self 등 고급 스킬, 알아두면 쓸데 있는 좋은 Higher Skills or Tips * Flex-wrap + width 33.3% : 카드 뉴스, 상품 리스트 만..

1. DOCTYPE 정의 및 선언 : 우리말로 문서 타입 정의라고 한다. HTML에서 독타입은 문서의 최상단에서 찾을 수 있는 필수 서문이다. 문서가 렌더링할 때 "quirk mode"로 바뀌지 않도록 하는 것이 유일한 목적"" doctype은 브라우저가 일부 스펙과 맞지 않는 다른 렌더링 모드를 사용하기 보다는 적절한 스펙을 따르는 최선의 시도를 하도록 한다. 2. DOM 조작 DOM이란 무엇인가? : 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM (Document Object Model)은 HTML의 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 트리 자료구조 (tr..

# JS에선 함수도 객체, 일종의 값이 될 수 있음 -이것이 다른 언어의 함수와 다름 점 function a () {} //함수 a가 선언됐다. JS에선 함수는 객체의 값으로 포함될 수 있다. a = { b:function(){ } }; //그런면에서 볼 때 함수명 a라는 변수에 함수b가 값으로 담겼다고도 //볼 수 있을 것이다. 그리고 이렇게 '객체'의 '속성값'으로 담겨진 함수가 메소드이다. -함수는 값이기 때문에 다른 함수의 인자로 전달 될 수 있다. -함수는 함수의 리턴 값으로도 사용할 수 있다. -당연히 배열의 값으로도 사용할 수 있다. ##처리의 위임 함수의 인자로 함수를 전달할 수 있다고 했다. 이로써 함수의 동작을 완전히 바꿀 수 있다. 함수는 두 가지로 나눌 수 있다. 1. 자바스크립트 ..

README.md는 표지 같은 것이다 #Project Name 한 줄 설명 들어가야함. ##Documentation ###Installation 라이센스도 주의해야함 MIT 라이센스는 말 그대로 free GNU는 매우 유의해야함 오픈소스이지만, 법적 문제 발생할 가능성 농후 .gitignore : 트래킹 하지 않게 명시하기 위해 작성하는 것 깃 이그노어는 세팅하자마자 해야한다. 클론 받을 때 부터 해야함 프로젝트 하기전 깃은 습관이 중요하다 TIL 레포지토리로 커밋을 쌓고 익숙해져라 결국엔 이건 그냥 도구일 뿐 git branch 브랜치로 이동하는 것은 swithch 명령어 git conflict : 충돌 중재만 하면 정상 동작하는 상태 만들 수 있다. 브랜칭 모델 대표 세가지 git flow를 가장 많..

버전 생성과 업로드의 이해 그 중에서도 가장 필수적이고 중요한 것 세 가지 명령어 git add : 내가 변경한 파일 중 올리길 원하는 것만 선택 git commit -m "메세지" : 선택한 파일들을 한 덩어리로 만들고 설명 적어주기 git log : 내가 만든 버전들의 정보를 확인할 수 있도록하는 명령어 git을 사용하는 이유? - 지속적 통합 (CI), 지속적 배포 (CD) 용이 💡 매번 개발자가 코드를 수정하고 빌드와 테스트까지 한다면 시간 소요 많음 git에 코드를 올리면 자동으로 테스트, 배포 해줌 개발에 시간 쓰기 가능 git init : 변경사항 추적 (버전 관리) 시작 git add . : 모든 파일의 변경 사항 추적하도록 지정 git commit -m ‘프로젝트 생성' : 메시지 (m)..

pad.Start 메서드를 이용하면 시간을 알려주는 function을 짤 때 도움이 된다. pad.Start 메서드를 사용하지 않을 때와 사용할 때의 차이를 미리 보여주겠다. 보다시피 무언가가 어색하다 자바 스크립트에 내장된 new Date 객체는 한 자리수 숫자를 그대로 보여준다. 앞에 01, 02초 이렇게 반환되지 않으니 볼 때 뭔가 허전한 느낌이 들 수 있다. 여러 가지 방법으로 시간을 나타내주는 함수에 0을 한 자리수 일때 붙여주고 그렇지 않을 때는 굳이 붙여주지 않는 로직을 직접 고안해서 구현할 수도 있겠지만, 자바스크립트, 브라우저에서 기본적으로 제공해줌으로써 더 간편하게 코드를 짤 수 있는데 돌아가지 않는 것이 더 좋지 않을까? pad.Start();의 문법은 매우 간단하다 padStart(..

setInterval ( ) : 첫 번째 파라미터에 전달한 함수를 두 번째 파라미터에 지정한 ms를 주기로 반복해서 함수를 자동적으로 호출해주는 자바스크립트 메서드 1. 기본문법 2. 파라미터에 익명함수 선언도 가능 활용 예시) new Date를 메서드를 사용해서 시간을 띄워보자 new Date 메서드란? 표준 시간을 제공하는 고마운 존재 Date 객체의 메서드를 사용하면 현재 날짜 및 시간을 출력할 수 있는데 구성요소 각각의 요소 역시 따로 불러올 수 있게 친절하게 만들어져있다. getHours, getMinutes, getSeconds 매서드를 사용하면 스탠다드한 버전의 시간을 보여주는 무엇을 만들 수 있는 재료가 됨 바로 선언해보자 getClock이라는 시간을 표기해주는 함수 선언 => date 객..