개발 개맛집

웹을 제작하다가 모니터 내에 헤더를 포함하고, 딱 맞게 화면 구성을 하고 싶었습니다. 스크롤 시 다음 section으로 보이게 하는것이 요구사항이었습니다. 여기서 스크롤 한 번만 하면 아래 footer가 보이게 하는 것이죠 다시 본론으로 와서 모니터에 화면이 꽉 차게 구성하는 방법은 1. header의 height를 알아낸다 2. main화면에 넣을 이미지든 동영상이든 이를 묶고 있는 상위의 root태그를 찾는다. 4. calc ☆를 이용하여 계산해 준다. (calc는 계산기로 이용하는 CSS function입니다.) 5. 부모태그에 중괄호를 열고 넓이는 %, 높이는 100vh(모든 모니터에 100%로 보여주겠다) calc를 이용하여 header의 height를 빼준다. (보통 다른 웹사이트는 80px,..

웹 사이트 제작 중에 파일 이미지를 변경해야 하는 일이 생겼다. 밤에 제작하느라 뇌가 굳어버려서 한참을 고민했는데 손쉽게 해결하는 방법을 발견하여 글을 적게 되었다. 디자이너 혹은 프런트 개발 연습을 위해 웹 사이트를 만드는 사람에게 도움이 되었으면 좋겠다. 내가 만들고 있는 웹 사이트의 Vision과 Mission이미지이다. 첫번째 시도 body에 검정 배경을 주어 img마다 background-color: white 를 주었다. 그러나 사진과 같이 흰 배경이 마음에 들지 않았다. 한참을 찾아보니 fill: 속성을 이용하여 수정 하는 방법이 있었는데 내가 원하는 색을 줄 수 있다곤 하지만 적용에 실패했다 두 번째 시도 반전 속성 filter: invert(100%); 이것을 이용하면 내가 원하는 검정배..

flex-grow 컨테이너를 꽉 채우기 위해 늘어난다. flex-grow를 사용하지 않으면 페이지가 작아지던 커지던 일정한 사이즈를 유지하지만, flex-grow를 사용하면 페이지에 맞춰 그에 해당하는 사이즈를 유지한다. item1에 flex-grow:3 item 2에 flex-grow:1 item3에 flex-grow:1 적용된 모습 item 1은 3배만큼 커진다. flex-shrink 페이지가 작아지면 어떻게 적용할지 지정한다. 페이지가 줄어들 때 flex-shrink: 숫자만큼 주어 줄어들 경우 어떠한 사이즈로 줄어들지 정해준다. 기본값은 0이다. 페이지가 줄어들 때 flex-shrink:3으로 준 item1은 3배로 줄어든다. flex-basis 아이템들이 공간을 얼마나 차지해야 하는지 세부적으로..

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

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