css6 next+ts 3일차 유튜브: https://www.youtube.com/watch?v=gyvwrIV0NZk 깃허브: https://github.com/qjawns0222/caremaker/tree/next-ts-3 오늘은 _app.tsx 와 nav바 메인화면을 손봤습니다 app.tsx 에서 이렇게 작성해서 모든 페이지내용이 저기 compnent 에 들어가게 되어서 layout역할을 하게 됩니다. 즉 각 페이지 마다 페이지내용이 _app.tsx에 component로 전달이 됩니다. 그래서 layout역할을 하게 됩니다. 그것을 활용하여서 어짜피 모든 페이지가 _app.tsx를 활용해서 되니까 글로벌css를 저기다 적어서 모든것에 적용되도록 했습니다. 참고로 style은 저렇게 적으면 장점이 클래스이름마다 style.~이런식으.. 2022. 4. 14. next css설정 오늘은 next의 css설정에 대해서 알아보겠습니다. 우서 가장 잘알려진 module을 이용한 방법 ack/ack.module.css 만들고 .button { background-color: aqua; } 작성 ack/ack1.js import style from "./ack1.module.css"; export default function popo() { return ( 메롱 ); } 작성 이렇게 import 사용할이름 from "위치" 이렇게 해서 className 에 사용할이름.클래스이름 이렇게 적으면 작동 됩니다. 이렇게 하면 다른 요소랑 이름이 겹쳐도 자동으로 이름이 설정되어서 중복되지않고 설정 가능합니다. 단점으로는 파일이 두개다보니까 왔다 갔다하면서 확인해야되는 귀찮음은 존재하고 있어요 이.. 2022. 3. 25. 면접질문 38일차 0228 CSS의 태그가 태그에 위치하는 것과 JS 태그가 태그 종료 직전에 위치하는 것이 일반적으로 좋다고 하는데 왜 그럴까요? 다른 예외 경우는 없을까요? 우선 링크 태그가 head에 위치하는 이유는 일반적으로 CSS와 html은 동시에 로드된다. 하지만 CSS가 밑에 있다면 CSS 로딩이 늦어진다. 그렇다면 html에 로드되고 보일 텐데 하지만 브라우저는 스타일이 로드되면 다시 렌더링 되는 것을 막기 위해 html만 가지고 렌더링하는 것을 막게 됩니다. 그 결과 이용자는 빈 화면을 보게 되기 때문에 상단에 위치해야 합니다.script가 종료 직전에 위치하는 이유는 눈에 보이는 html을 먼저 파싱 하기 위해서입니다. 즉 html이 script를 다운하고 실행하는 동안 기다리는 동안 로드되지 않는 것.. 2022. 2. 28. 면접질문 29일차 0219CSS 애니메이션과 JavaScript 애니메이션의 장단점에 대해서 설명해보세요. 우선 CSS 애니메이션의 장점은 반응형으로 구성하기 좋고 외부 라이브러리가 필요하지 않고 조금 더 효율적이다. 단점으로는 호환성 문제가 있다. 구현이 안 되는 곳도 있을 수가 있어서 확인이 필요하다. 또한 저사양 컴퓨터의 경우 성능 하락이 있을 수 있다. JavaScript 애니메이션의 장점으로는 세밀한 구성이 가능하다는 것이 있다. 또한 외부 라이브러리 사용으로 더 성능 좋은 애니메이션 이용이 가능하다. 단점으로는 CSS에 비해서 작동하는데 효율성이 CSS에 비해 좋지 않다. 또한 부드럽게 보이지 않을 수가 있습니다. 2022. 2. 19. 이전 1 2 다음
