본문 바로가기
반응형

개발 팁 정리14

[CSS] 스타일 우선순위 적용 !important CSS에서  !important를 사용하여 스타일 우선순위 적용하기1. !importatnt란?!important는 CSS에서 특정 스타일 규칙의 우선순위를 높이기 위해 사요되는 키워드이다.이 키워드가 붙은 스타일 규칙은 동일한 속성에 대해 다른 규칙이 적용될 때 가장 높은 우선순위를 가지게 된다.즉 다른 규칙들이 동일한 요소에 적용되더라고 !important가 붙은 규칙이 최종적으로 적용된다. 아래 코드는 !important를 사용한 예제이다./* 일반적인 CSS 규칙 */p { color: blue;}/* !important가 붙은 규칙 */p { color: red !important;}/* 인라인 스타일 */!important 테스트 위의 예제에서 p태그 요소의 텍스트 색상은 gleen이 아니.. 2024. 8. 16.
[CSS] 작은 레이아웃에서 스크롤이 없어지는 현상 해결 웹사이트 개발 시 작은 화면에서 스크롤이 없어지는 현상이 발생했을 때 해결1. 주로 CSS 스타일링이나 레이아웃 설정과 관련이 있다.2. 이러한 문제는 웹페이지의 콘텐츠가 의도치 않게 오버플로우되거나, 스크롤바가 비활성화되어 발생할 수 있다.3. 이를 해결하기 위해 고려할 수 있는 몇 가지 사항은 다음과 같다.  1. CSS에서 overflow 속성 확인- overflow 속성은 컨테이너의 크기를 초과하는 콘텐츠에 대한 스크롤 동작을 제어한다.- 이를 해결하기 위해 overflow 속성을 적절하게 해결한다.body { overflow: auto; /* 또는 overflow-y: scroll; */}- overflow: auto; 는 콘텐츠가 컨테이너의 크기를 초과할 때만 스크롤를 표시한다.- overf.. 2024. 8. 15.
[CSS] Tailwind CSS purge관련 경고 해결 Tailwind CSS에서 purge관련 경고 해결warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.warn - Update your configuration file to eliminate this warning.warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources오랫만에 Tailwind CSS를 사용하려 하는데 위와 같은 경고메시지가 출력된다. 이는 Tailwind CSS v3.0에서는 purge옵션이 content옵션으로 변경되었다는 점을 알려준다.기존 설정 파일을 업데이트하여 이 경고를 해결할 수 있다.기존 Tailwind CSS  설정파일.. 2024. 8. 10.
[크롬 개발자 도구] 센서(위치정보 설정, 기기 방향 변경, 터치 이벤트 발생, 유휴상태 만들기) 크롬 브라우저를 사용하여 모바일 웹 개발을 할 경우 센서탭 활용1. 크롬에서 위치관련 정보를 사용하여 테스트할 때 사용하는 위치정보 설정2. 기기 방향에 따른 값을 테스트 해볼 때 사용하는 기기 방향 시뮬레이션3. 터치 이벤트 발생을 확인하여 테스트 해볼 때 사용하는 강제 터치4. 사용자 유휴상태 혹은 화면 잠금에 따른 테스트를 할때 사용하는 유휴상태 만들기 1. 위치정보 설정하기  1. 위 사진처럼 위치정보를 사용하기 위해 F12를 눌러 개발자도구로 들어가 설정 > More tools > Sensors를 차례대로 클릭한다.  2. 위 화면에 Locaation에 나오는 나라를 선택하면 해당 나라의 임의의 좌표가 나온다.아쉽게 한국위치는 프리셋 데이터에 없기때문에 Manage를 선택한 후에 아래 사진처럼 .. 2024. 7. 22.
[정규식] 빈 줄 제거, 특정문자 이후 및 이전 모두 선택 Regex, 정규식 빈 줄 선택, 특정문자 이후 및 이전 모두 선택  1. 빈 줄 선택 ( ^$\n )^$\nex) VSC에서 ctrl+H 이후 정규식 활성화하고 위 정규식 입력후 [공백]과 교체하면 빈줄이 전부 제거된다.   2. 특정문자 이후 모두 선택 ( [특정문자].*$ )ex. > 이후 모두 선택 >.*$   3. 특정문자 이전 모두 선택 ( ^.*[특정문자] )ex. ^.* 2024. 4. 29.
[크롬 개발자 도구] Device Mode 사용하기 모바일 웹 개발 시 웹사이트, 앱 반응형 확인할 때 도움이 되는 크롬 Device Mode 사용하는 법 1. F12를 눌러 크롬 개발자 도구를 킨다.2. Window, Linux이라면 Ctrl + Shift + M를 누르기Mac이라면 Command + Shift + M를 누르기 3. 개발자 도구 좌측 위에 아래 아이콘 클릭Device Mode 아이콘이 파란색이면 OnDevice Mode 아이콘이 검정색이면 Off  4. 왼쪽 위 부분에서 원하는 디바이스로 설정 후 웹사이트 확인 2024. 4. 23.
[MARKDOWN] 자주 사용하는 마크다운 문법 정리 MARKDOWN(.md), README.md File와 Nextra에서 사용하는 MARKDOWN 주요 문법 정리 1. 제목(글머리) 작성 # H1 제목 ## H2 부제목 ### H3 소제목 #### H4 제목4 ##### H5 제목5 ###### H6 제목6 출력결과 2. 번호 없는 리스트 작성 * 리스트1 - 리스트2 + 리스트3 출력결과 3. 번호 있는 리스트 작성 1. 리스트1 2. 리스트2 3. 리스트3 출력결과 4. 이텔릭체(기울어진 글씨) 작성 *텍스트* 출력결과 5. 굵은 글씨 작성 **텍스트** 출력결과 6. 인용 > 인용1 > 인용2 >> 인용안의 인용 출력결과 7. 수평선 넣기 --- 출력결과 8. 링크 달기 (1) 인라인 링크 [블로그 주소](https://kfdd6630.tistor.. 2023. 6. 26.
[알고리즘] 에라토스테네스의 체에서 소수 판정 시 제곱근 까지만 확인하면 되는 이유 에라토스테네스의 체에서 소수 판정 시 제곱근 까지만 확인하면 되는 이유 n이하의 모든 소수를 구하려고할 때 효율적으로 구하기 위해 n의 제곱근까지만 확인한다. 아래 예시를 보자. 1. n이하의 모든 소수를 구하고자할 때 n은 x와 y에 대해 n = x*y이다. (x와 y는 자연수이다.) 2. n = m*m이다. (m이 n의 제곱근이다.) 3. n = x*y이고 n = m*m이므로 x*y = m*m이다. 이 상태에서 x와 y가 자연수인 경우는 아래 3가지 경우이다. 1. x = y = m일 경우 2. x m일 경우 3. x > m, y < m일 경우 결론 1. x와 y가 자연수가 되려면 위 세가지 경우 중 하나의 경우여야 한다. 2. x와 y의 최소값은 m보다 작거나 같아야한다. (min(.. 2023. 6. 15.
mongoose, typegoose, nestjs-typegoose, kindagoose 사용이유 mongoose => typegoose, nestjs-typegoose => kindagoose 사용이유 Mongoose 1. MongoDB와 Express.js 웹 애플리케이션 프레임워크 간 연결을 생성하는 자바스크립트 객체지향 프로그래밍 라이브러리이다. 2. Node.js와 MongoDB를 연결해주는 ODM이다. * ODM(Object Documnet Mapping): 객체와 문서를 1대1로 매칭하는 역할을 한다. 3. Node.js기반 프레임 워크들에서도 사용 가능하다. (NestJS와 같은 Express기반 프레임워크 또한 가능) Typegoose TypeScript와 함께 Mongoose를 사용할 때 Mongoose 모델과 TypeScript 인터페이스를 모두 정의해야 한다는 문제 - 모델이 변.. 2023. 3. 3.
영어, 숫자, 특수 문자, 글자 수 제한 정규식 모음 많이 쓰는 정규식 모음 const regExBook = { ONLY_ENG: /^[a-zA-Z]*$/, // 영어만 있는가? ONLY_NUM: /^[0-9]*$/, // 숫자만 있는가? ONLY_ENG_NUM: /^[a-zA-Z0-9]*$/, //영어와 숫자만 있는가? ENG: /[a-zA-Z]/gi, // 영어가 들어가 있는가? NUM: /[0-9]/gi, // 숫자가 들어가 있는가? ENG_NUM: /[a-zA-Z0-9]/gi, //영어, 숫자가 들어가 있는가? EX_MARK: /[\{\}\[\]\/?.,;:|\)*~`!^\-_+@\#$%&\\\=\(\'\"]/gi, // 특수문자가 들어가 있는가? UNDER_TEN: /^[\w\Wㄱ-ㅎㅏ-ㅣ가-힣]{1,9}$/, // 10글자 이하인가? }; 2023. 2. 13.
반응형