justify-content: 중심축에서 아이템들을 어떻게 배치할지 결정한다. 1. justify-content: flex-start: 왼쪽을 기준으로 배치 2. justify-content: flex-end 오른쪽을 기준으로 배치 flex-direction: row-reverse와 유사하지만 배치 순서가 바뀌지 않는다는 차이점이 있다. 3. justify-content: center 가운데 배치 4. justify-content: space-around 각 박스마다 spacing이 들어가 있다 ▶ 1번과 10번이 벽 쪽에 붙어있다. 5. justify-content: space-evenly 각 박스마다 동일한 spacing이 들어가 있다. ▶ 1번과 10번도 똑같이 떨어짐 6. justify-conte..

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이 적용 ..

컴파일러 친구와 일본에 놀러가서 일본인과 대화를 하고 싶은데 일어를 못한다!! (일상생활에서의)번역은 ↓ ex) 일어 못하는 한국인 -> 일어 할 줄 아는 한국인 -> 일본인 이런 식으로 번역을 할 것이다. 사람이 컴퓨터한테 말을하고 싶은데 컴퓨터가 사람말을 못알아 먹는다!! 자 그러면 (컴퓨터에서의) 번역은? ↓ 사람(프로그래밍 언어) -> 컴파일러(변환) -> 컴퓨터(2진수 언어) 이런 식으로 전달한다. 자바, 파이썬, 루비 등 영어로 되어 있는 프로그래밍 언어를 사용해 컴파일러에게 명령을 전달 -> 명령을 기계어인 0과 1로 변환해 컴퓨터에 전달한다. 컴퓨터 부품들 CPU가(머리) HDD, SSD(저장 창고)에게 처리할 데이터를 요구 -> CPU보다 HDD, SSD는 속도가 매우 느려 CPU가 기다..

아프리카의 절대적 빈곤과 그들의 문제를 해결하고자 시작한 프로젝트이다.팀원은 사이트 개발자인 나와 지인들로 구성되었다.21년도 봄, 이 프로젝트를 진행했던 날들을 기록하기 위해 해당 글을 작성한다. *** 해당 글을 23년 7월 재작성되었습니다. 우리의 목표는 "아프리카 100명의 아이들에게 전기를 보급하자"였다.티비에 나오는 아프리카 지역의 모습은 아프리카에서 형편이 좋은 지역이라고 한다.실제로는 밤이 되면 전기가 들어오지 않아 밤에는 생활할 수 없는 지역과 범죄와 위험에 놓인 곳이 아주 많다고 한다.그렇게 우리는 태양광을 이용해 아이템을 만들고자 했다. 우리의 초창기 모델이다.정말 부품 하나하나 구해서 만들어봤던 제품이다.이 제품은 아직 정해진 이름이 없다. 제품 제작위에서 만든 제품에서 디..

특징 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)이란 배포용으로 빌드한 파일과 원본 파일을 서로 ..