일반 css 속성 중 position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)를 쓸 일이 많다. position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); tailwind에서는 transform:translate(-50%,-50%) 를 아래처럼 쓸 수 있다 className="transform absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] transform"
1 : 다음 중 건강진단 종류가 아닌 것은? C: 정시 2 : 다음 중 직장 내 괴롭힘 행위로 거리가 먼 것은? C: 근로계약서 등에 명시되어 있는 힘든 업무를 부여함. 3 : 산업안전보건법령을 위반하여 과태료를 물게 될 경우 위반사항에 따라 차수를 정하여 처음의 경우 감경하면서 권고하는 사항으로 진행한다. 총 몇 차까지 과태료 부과 단계를 적용하는가? C : 3차 4 : 산업안전보건법상 안전조치와 보건조치 및 도급인의 안전조치 및 보건조치를 위반하여 근로자를 사망에 이르게 한 자를 의미하는 사람은? A : 사업주 5 : 산업안전보건법상 안전조치와 보건조치 및 도급인의 안전조치 및 보건조치를 위반하여 근로자를 사망에 이르게 한 자에 대한 벌칙으로 올바른 것은? (정답수 : 1) B: 7년이하 1억원 이하..
NextJs에서는 대신 를 써야 한다. 테일윈드 라이브러리를 함께 써서 반응형 처리를 한 방법을 기록해 본다. 방법 예를 들면 모바일에서는 가로 18px 세로 16px인 이미지를 max-width:768부터는 가로 36px 세로 32px로 보여준다고 하면 아래와 같이 쓴다. 1. 를 감싸는 에 모바일 사이즈 크기와, 바뀌는 점을 기록한다. 2. Image에 기본 width, height값을 쓴다. layout="responsive" 속성을 꼭 ! 써준다.
에러 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 해결방법 : import 부분을 확인한다. { } 괄호로 import되었는지 확인해 본다. 잘못됬던 부분 : import {NewsLayout} from '~/components/layout/NewsLayout'; 해결한 방법 impo..
tailwind.config.js 에 폰트 테마를 설정했다. module.exports = { future: { removeDeprecatedGapUtilities: true, purgeLayersByDefault: true, }, content: ['./src/**/*.{js,ts,jsx,tsx}'], darkMode: 'class', theme: { extend: { screens: {}, colors: { white: '#FFFFFF', mainColor: '#004C7E', subColor: '#F5F5F5', newsContent: '#757575', headerFooterColor: '#30363A', header: { blackbg: '#30363A', white: '#fff', }, }, ..
sourcetree에서 push가 안되면서 나오던 에러 eslint.json에 오류가 있다면서 ;;; 잘린 이미지 밑에는 husky - pre-commit hook exited with code 1 (error) 문구가 나왔다. 일단 나의 해결방법은 이것이였다. 소스트리가 아닌 CLI(명령어)로 해결했다. git commit -m "message" --no-verify eslint에는 틀린 파일이 없었다.
페이코 포인트플러스 친구초대 할때 먼저 자신의 추천코드를 알아야 하는데요 방법을 알려드리겠습니다. 페이코 자기 코드 보는 방법: 1.페이코 앱에서 하단 맨 우측을 클릭합니다. 2.그럼 자기 카드가 뜨는데요. 카드를 클릭해요 3. 친구 초대하고 5,000P 받자 항목을 선택 4.그러면 이 화면이 보이는데요 아래로 스크롤 해줍니다. 초대 코드 생성하기 버튼이 있어요. 저는 이미 생성해서 코드가 만들어 졌습니다. 자기 페이코 코드를 봐야지 이벤트에 참여할 수 있는건데, 다른 포스팅 보니까 모두 자기 코드 홍보하기에 바쁘지, 정작 자신의 페이코 친구 초대코드를 알려주는 포스팅은 드물더라구요! 그래서 제가 작성 해보았습니다. 도움이 되셨다면 , E14GKG 친구코드 등록 부탁드릴게요! 페이코 초대코드생성에 도움이..
참고글 여기를 보고 완료했다. 아래 링크에서 설치하란대로 다 하면 왠만하면 실행이 될것이나 나의 경우에는 좀더 풀어 써보려고 한다. https://imranhsayed.medium.com/next-js-tailwindcss-with-sass-example-41eae3e38206 Next.js Tailwindcss with SASS example Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs… imranhsayed.medium.com 링크에서 터미널 명령어 설치하란대로 다 설치했다는 가정 하에 밑의 글은 참..
테일윈드 커스텀 컬러 지정은 공식문서에 친절히 나와있지만. 나같은 입문자는 공식문서를 봐도 끝없이 헤맨다 .. 사용자 지정 컬러 테마를 만들어 보자. tailwind.config.js module.exports = { content: [ "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: { colors:{ header_black: { black: "#30363A", white:"#fff", }, }, fontFamily: { sans: ['Roboto'], }, }, }, plugins: [], } custom color설정할때 주의점은 꼭 theme: { extend: { colors 로 써야한다는 것이다. extend 괄호 안에 들어가도록 유의하자. 그리고 co..
tailwind 테마에 적용시켜 보았다. 구글 폰트 외부링크로 연결했다. tailwind.config.js module.exports = { content: [ "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: { fontFamily: { sans: ['Roboto'], }, }, }, plugins: [], } _document.tsx import Document, { DocumentContext, Html, Head, Main, NextScript, } from 'next/document' class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const in..
