Flex Box를 배우려고 한 이유 Flex Box는 Box와 Item들을 행과 열로 자유롭게 배치할 수 있는 CSS의 꽃이라고 할 수 있다. 웹사이트의 레이아웃을 구성하는데 대부분을 Flex Box를 사용하면 좋다고 멘토님께 들었다. 그전에 내가 만든 웹사이트는 Flex Box를 쓰지 않고 죄다 position, float를 이용하여 때려 넣었는데 그러다 보니 하나의 아이템 수정 시 다른 부분이 틀어지는 일도 많았고, 코드 양도 많았다. 멘토님께서 Flex Box를 쓰면 코드를 줄일 수 있고, 자유롭게 배치할 수 있는 이점이 있어서 무조건 필수적으로 알아야 한다고 했다. 그래서 정리해보는 Flex Box 내용이다. Flex Box의 이해 1. container 박스에 적용되는 속성이 존재한다. 2. 각..

(1) display display: block: 가상의 가로 줄에 하나만의 상자만이 나타남 display: inline-block: 가로 줄에 여러 상자가 나타남, 지정한 사이즈 적용 됨 display: inline: 내용이 아무것도 없으면 나타나지 않음, 부모에서 정의해줬던 것은 무시하고 inline태그에서 설정한 내용을 표기 (2) position position은 기본적으로 static 역할을 한다. position을 이해할 때 어떤것이 기준이 되는가를 생각하면 이해하기 쉽다. posion: static : 기본이 되는 고정역할이다. 그래서 left:20px, top20px이 먹질 않는다! position: relative -> container에 포함된 박스 기준으로 20px, 20px이 적용 ..

특징 1. Typescript는 typed 언어로 내가 사용하는 변수와 데이터가 어떤 종류인지 내가 직접 설정을 해줘야 한다. 장점 -> 언어 컴파일러가 내가 맞게 하고 있는지 아닌지 알려준다. / 오류에 대해 신경을 덜 쓸 수 있는 장점이 있다. 2. argument값을 실수로 작성하지 않았을 경우 알려준다. -> sayHi라는 메소드에 namge, age, gender를 전달 인자 값을 담고 있다. 그러나 우리가 작업을 하다가 실수로gender를 빼먹고 sayHi(name, age);라고 선언을 한다면 어떻게 될까? Expected 3 arguments(전달인자), but got 2.라고 친 절 히 알려준다!!!! 이것은 Typescript에서만 되는 기능이다. Javascript는 알려주지 않는다...

첫 설정 1. 커맨드에서 작업 파일로 이동한다. yarn init 입력-> package.json 생성 2. 커맨드에 yarn global add typescript 설치 tsconfig.json 1. tsconfig.json 파일 생성 -tsconfig.json은 이 파일에 TypeScript가 어떻게 JavaScript형식으로 바뀔 건지 설정하는 파일 "module" : nodejs를 간단히 사용할 수 있고 다양한 걸 import 하거나 export 할 수 있게 사용 "target" : 어떤 버전의 JavaScript로 컴파일되고 싶은지 적는 것 "sourceMap" : 어떠한 sourceMap 처리를 하고 싶은지 나타냄 -소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 ..