본문 바로가기
반응형

Frontend/HTML CSS
10

[React] TailwindCSS 소개와 리액트 vite 프로젝트에서 TailwindCSS v4 사용하기 Tailwind CSS 설치 & 사용 방법1. Tailwind CSS란?Tailwind CSS는 유틸리티 퍼스트(Utility-first) 접근 방식을 따르는 CSS 프레임워크이다. 이는 전통적인 CSS 프레임워크와 달리, 미리 정의된 클래스를 사용하여 스타일을 적용하는 방식으로, 별도의 컴포넌트나 디자인을 정의하지 않고 바로 필요한 스타일을 HTML 요소에 추가하는 방식이다.Tailwind CSS는 CSS 클래스를 통해 스타일을 직접 적용하므로, 재사용성이 높고 구조적이지 않지만 직관적인 스타일링을 제공한다. 이 접근 방식은 효율적이고 빠르게 UI를 구성할 수 있도록 돕는다. 2. Utility-First란?Utility-First는 Tailwind CSS의 핵심 개념으로, 스타일을 미리 정의된 유틸리.. 2025. 4. 17.
[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.
반응형

최근댓글

최근글

© Copyright 2024 ttutta

티스토리툴바