반응형 Frontend/HTML CSS10 Tailwind CSS Intellisense 작동 안됨 문제 증상className 작성할때 어제까지 잘 되던게 오늘 갑자기 아예 안뜨기 시작했음tsconfig문제도 겹쳐서 이게 원인인 줄 알았는데 eslint까지 다시 작업하고나니,여전히 tailwind css intellisense가 안됨!해결시도먼저 상태 확인한다.Cmd + Shift + P → Tailwind CSS: Show Output → 출력 탭에서 "Found tailwind.config.js" 로그가 나오는지 확인"No matching project for document" 오류 메시지는 Tailwind CSS IntelliSense 확장 프로그램이 현재 파일(Header.tsx)을 올바른 Tailwind 프로젝트의 일부로 인식하지 못하고 있다는 뜻이다. 파일경로 확인tailwind.config.js.. 2025. 4. 10. [CSS] 언제나 같은비율인 이미지 만들기, aspect-ratio 속성 다양한 비율을 유지하는 썸네일 컨테이너를 만들려면 aspect-ratio 속성을 활용하면 쉽게 만들 수 있다.구형 브라우저를 고려해야 한다면 padding-top 트릭을 병행하는 것이 좋다. 1. aspect-ratio를 활용한 방법 (최신 브라우저).thumbnail-1-1 { aspect-ratio: 1 / 1; } /* 1:1 비율 */.thumbnail-16-9 { aspect-ratio: 16 / 9; } /* 16:9 비율 */.thumbnail-4-3 { aspect-ratio: 4 / 3; } /* 4:3 비율 */.thumbnail-3-2 { aspect-ratio: 3 / 2; } /* 3:2 비율 */.thumbnail-21-9 { aspect-ratio: 21 / 9; .. 2025. 3. 7. [CSS] 부모 height를 자식요소가 상속받지 못할때 해결방법(flex 이용) 상황과 원인이렇게 첫번째 자식(.chat-screen)이 상속을 제대로 받지 못하고있음.첫번째 자식은.chat-screen { height: calc(100% - 120px);}이렇게 지정하고있고, 두번째 자식인 form은 height가 120px임부모 height를.chat-container { height: calc(100% - 20px); min-height: 200px; max-height: 690px;}이렇게 지정하고있어 height가 정확한 값이 아님 (원인)부모의 부모(Body)에 height값 주라는데.. body에 height 100%해도 안됐다.(body말고 컨테이너를 하나 더 만들면 될지도? 이방법은 실험안해봄)해결방법부모 요소에 flex를 준다..chat-con.. 2025. 3. 6. [TailwindCSS] className style에 !important추가하기 SwiperJS에 navigation 버튼이 기본스타일이 있어서color를 바꾸려고 className에 text-seagull-500(테마커스텀컬러)를 추가했다.우선순위에 밀려서 스와이퍼 기본이 잡히고있음!important를 하려면 간단하다.쓰려는 className앞에 !를 붙이면된다.!text-seagull-500으로 쓰면된다. Next Next 잘 변경되었다! 2025. 1. 7. [HTML] button을 a로 감싸는게 일반적인가, 아니면 a를 button으로 감싸는게 일반적인가 과 의 사용 목적과 HTML 표준에 따라 둘 중 어느 쪽을 감싸야 하는지가 달라진다. 각 요소의 올바른 사용 사례와 일반적인 관례를 비교해보겠다.1. 로 을 감싸는 경우 Click Me목적: 네비게이션을 트리거하면서 버튼 스타일을 적용하려는 경우.의 기본 역할은 다른 페이지나 URL로 이동하는 것.문제점: HTML 표준 위반. 요소 내부에는 인터랙티브 요소(예: )를 포함하면 안된다.브라우저 동작이 비정상적일 수 있고, 접근성(A11y) 도구에서도 문제를 일으킬 수 있다.2. 으로 를 감싸는 경우 Click Me목적: 버튼으로 보이는 요소가 클릭되었을 때 링크로 이동하려는 경우.문제점: HTML 표준 위반입니다. 내부에는 href 속성이 동작하지 않으므로 의 고유 기능이 사라질 수 있다.CSS나 .. 2024. 12. 11. [CSS] CSS 선택자: a로 시작해서 b로 끝나는 클래스 선택하기 일반적인 클래스나 아이디 선택자, 요소선택자 등등은 익히 알고있을것이라 생략하고 HTML 요소의 어떤 속성을 이용한 선택자에 대해서 정리해보았다. Attribute Selector (속성 선택자) 속성 선택자는 특정 HTML 요소에 특정 속성이 존재하거나 특정 속성 값과 일치하는 요소를 선택하는 데 사용된다. HTML 요소의 속성 종류 id 속성 선택자: [id] 설명: id 속성이 있는 모든 요소를 선택합니다. class 속성 선택자: [class] 설명: class 속성이 있는 모든 요소를 선택합니다. type 속성 (input 요소) 선택자: [type] 설명: type 속성이 있는 모든 요소를 선택합니다. href 속성 (링크 요소) 선택자: [href] 설명: href 속성이 있는 모든 링크 요.. 2024. 1. 5. [font] pretendard variable 설치시 프로젝트에 폰트굵기 적용안됨문제 문제발견 얼마전에 업무용 컴퓨터 윈도우에 에러가 나서 초기화를 시켰는데 그때문에 폰트를 새로 설치해야했다. 작업하던 디자인파일에 필요한 Pretendard Variable 폰트를 설치를 하니까 프로젝트 전체가 폰트굵기가 thin이 되었다....! 폰트테스트 폰트테스트 폰트테스트 폰트테스트 폰트테스트 이렇게 작성했다면 이렇게 나오는 현상...... 해결 원인 폰트를 적용하는 css파일을 살펴보면 나같은 경우에 로컬 파일을 우선사용하고있었다. @font-face { font-family: "Pretendard Variable"; font-weight: 45 920; font-style: normal; font-display: swap; src: local("Pretendard Variable"), url(".. 2023. 9. 13. @font-face 작성하기(feat. woff, woff2 faild to decode downloaded font 에러) Pretendard폰트를 예로, 작성하는 font-face Pretendard 다운로드 Pretendard 페이지 바로가기 Pretendard 다운로드 하기 pretendard-regular cdn @font-face { font-family: 'Pretendard-Regular'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } Variable 폰트 작성법 Pretendard Variable 폰트는 가변폰트란 의미로 woff2-variations 포맷으로 작성한다 @font-fa.. 2023. 4. 13. 이전 1 2 다음 반응형 최근댓글 최근글 인기글 © Copyright 2024 ttutta
최근댓글