KBW's cosmos

padding: 0.5rem calc((100vw - 1000px) / 2); 위 식으로 가운데 정렬을 시킬 수 있다. 0.5rem은 위아래 패딩이니 상관없고 핵심은 calc((100vw - 1000px) / 2)이다. calc() CSS함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있다. vw는 vw = viewport width로 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다. 100vw가 전체 화면의 기준이 된다. 따라서 100vw는 전체 화면에서의 width값이고 거기서 1000px만큼을 뺀 값을 2로 나누어 이를 좌우 패딩으로 삼는다는 것이다. 이를 정리하면 calc((100vw - (사용할 공간 크기) / 2)로 사용하면 된다.

useHistory를 이용해서 페이지를 이동할 때 아래와 같이 작성할 수 있다. history.push("/main"); 하지만 만약 이미 main페이지에 있다면 이미 main페이지기 때문에 이동하지 않는다. 이때, 새로고침을 하게 해주고 싶다면 아래 코드를 사용하면 된다. window.location.replace("/main")

매개변수가 들어갈 필요가 없는 경우에는 버튼 이렇게 함수 이름만 넣으면 된다. 근데 매개변수가 들어가야 할 경우에는 버튼 이렇게 바로 괄호치고 넣으면 안된다. 화살표 함수를 사용해 넣어줘야한다. exampleFunc("parameter")}>버튼

버튼 위와 같이 태그가 있다고 할 때, 기존의 React라면 아래와 같이 style을 inline으로 넣을 수 있다. 버튼 하지만 Styled Component를 이용하는 경우 이렇게 넣으면 아래와 같이 오류가 난다. Styled Component를 사용하는 경우 아래와 같이 중괄호를 두번 쳐주고 사용해줘야한다. 버튼 속성 이름은 그냥 써주고 속성 값은 ' '으로 감싸준다. (;) 세미콜론은 붙이지 않는다. 만약 스타일을 여러 개 넣는다면 아래와 같이 (,)로 구분해주면 된다. 버튼 추가로 margin-top이나 background-color의 경우 속성 이름에 (-)하이픈이 들어가기 때문에 오류가 난다. 이 경우 아래와 같이 카멜표기법으로 적어주면 된다. 버튼

HTML과 CSS를 만만히 보고 그냥 JS를 배우면서 웹 공부를 시작했는데 막상 웹페이지를 만들다보니 HTML과 CSS의 기초가 부족해 검색창하나 만드는데도 애를 먹었다. 기본적인 것들은 먼저 배우고 시작해야겠다고 생각해 HTML CSS 카테고리를 새로 만들고 공부한 내용을 기록한다. 오늘은 생활코딩 WEB2 CSS 수업을 다 듣고 들으며 필기한 내용을 올려두려고 한다. 출처 : https://youtu.be/Ok0bBJPtgJI 선택자(Selector) : 그냥 태그 이름을 적으면 해당 태그 전체를 선택하는 선택자를 사용한 것이다. class를 이용해 해당 클래스의 선택자를 사용할 때는 .을 이용한다. 그런데 class는 아래와 같이 두 개의 이름을 지정할 수도 있다. 그러면 아래와 같이 속성을 지정할..

A+로 마무으리!!

⭐ 온라인 코딩 스터디 - 코뮤니티 모각코 후기 ⭐ ✅ 별명 : koh1018 ✅ 참여한 과정 이름 : 한 입 웹개발 (JS) ✅ 기수 : 5월 과정 👉 모각코에 참여하게 된 계기 학기중에 할 만한 활동 및 프로그램을 알아보다가 어느날 인스타에서 하는 코뮤니티 홍보스토리를 봤어요! 이전에 앱을 만들면서 웹도 배워서 하나의 작은 플랫폼 서비스를 만들어보고 싶다는 생각을 했는데 웹을 배울 정말 좋은 기회가 될 것같아서 바로 지원하게 되었습니다! 👉 모각코로 인한 변화 가장 큰 변화라고 한다면 웹을 아예 모르던 제가 웹으로 초보 수준의 챗봇을 만들 수 있게 되었다는 것 같습니다! 아무래도 눈에 보이는 성장이라는게 가장 의미있는 변화가 아닐까 싶어요.. 처음에는 15일 동안 진행한다고 해서 배우기에 너무 짧은 ..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 새로 말을 배울 수 있도록 해봤습니다!! Day15.html 냐옹~ 시키기 불 켜줘 Day15.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0p..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 typewriter CDN을 가져와서 고양이가 못알아 듣는 말을 했을 때 위에 알림이 뜨도록 만들어봤습니다! Day14.html 냐옹~ 시키기 불 켜줘 Day14.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {backgro..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 따라하는 고양이 & 말안듣는 고양이를 만들어봤어요! Day13.html 냐옹~ 시키기 불 켜줘 Day13.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, ..