티스토리

sohyeon kim
검색하기

블로그 홈

sohyeon kim

aotoyae.tistory.com/m

aotoyae 님의 블로그입니다.

구독자
0
방명록 방문하기

주요 글 목록

  • [CSS/Next] MUI(Material-UI) VS Shadcn UI : UI 라이브러리 비교 💡 MUI & Shadcn UI 중 design system 선택하기 🔵 MUI : Google의 Material Design 가이드라인을 기반으로 한 React UI 라이브러리Material Design 기반 : 구글의 디자인 가이드 라인을 기반으로 한 스타일링으로, 일관되고 직관적인 UI 구현 가능컴포넌트 중심 : 버튼, 네비게이션 바 등 다양한 사전 정의된 컴포넌트 제공CSS-in-JS 방식 : 기본적으로 @emotion/react를 사용하여 CSS-in-JS 스타일링 제공반응형 디자인 지원 : 반응형 그리드 시스템과 스타일링 도구를 제공하여 다양한 화면 크기의 애플리케이션을 쉽게 구축 가능많은 컴포넌트가 준비되어 있어 빠른 개발이 가능하고, 유지 보수에 용이하며, 커뮤니티가 활발하지만일부 컴포.. 공감수 2 댓글수 2 2024. 12. 2.
  • [CSS/React] tailwind 조건부 스타일링 💡 tailwind.. 조건에 따라 스타일링이 가능했다.. 문제 풀기 기능 구현 중 채점 후에 사용자의 답이 정답이라면 파란색으로, 오답이라면 빨간색으로 표시를 해줘야 했다! 그래서 같은 태그(컬러만 다르게 준)를 두 개 두고 정답/오답에 따라 보이게 해야 하나? 하다가 tailwind 조건부를 검색했더니.. 바로 나왔다 🥹 ! 사용법은 className 을 벡틱으로 감싸고 조건을 걸어주면 된다! ⭕️ 주관식 답 사용자가 입력한 답 === 정답 이라면 파란색으로! {usersAnswer?.answer} ⭕️ 객관식 답 사용자가 입력한 선택지 === 이 선택지(map 을 돌려서 선택지를 표시했기에 같은 옵션인지 id 로 구분)이고 is_answer true 값을 갖고 있다면 파란색으로! 처음엔 보더로만 구.. 공감수 1 댓글수 0 2024. 4. 16.
  • [CSS/React] tailwind 에서 calc 사용하기 💡 tailwind 에서도 calc 사용이 가능했다! .example { font-size: calc(2vw + 10px); /* viewport width에 따라 크기 조절하면서 10px를 추가 */ padding: 20px; /* 고정된 크기로 픽셀 단위 사용 */ margin: calc(1vw + 5px) calc(2vw + 10px); /* 세로는 viewport width에 따라, 가로는 픽셀 단위로 사용 */ width: calc(50% + 20px); /* 백분율로 지정하면서 20px를 추가 */ } 원래 요렇게 쓰는 calc .. tailwind 에서 써보자! 저 바(8vh)에 보더를 주고 안에 빨간 박스(8vh)를 채워놨는데 border-box 가 적용되어 있어서 빨간 박스가 보더를 가려.. 공감수 0 댓글수 0 2024. 4. 12.
  • [CSS/React] tailwind checkbox 커스텀 : checked:bg-url 💡 tailwind 로 체크박스 커스텀하기 { handleCheckObjectAnswer(id, options, option.id); }} /> checked 됐을 때 표시될 배경색을 넣어주고, 그 위에 png 하얀색 체크 표시를 넣어줬다! 그리고 bg-no-repeat bg-center 로 이미지가 가운데 위치하도록 했다. 🥵 url 문제가 좀 있었는데.. 파일에 넣어둔 이미지를 가져오려 했는데 url 에 파일 경로를 아무리 넣어봐도 .. 적용이 안됐다. tailwind.config 에서도 넣어봤지만.. 자꾸 경로 오류가 떠서 시간만 보내다가 supabase storage 에서 URL 가져올 수 있지 않나?!?!??! 해서 이미지 올려두고 url 복사해서 넣어두니 아주 잘 표시됐다. 😭 🔗 https:.. 공감수 0 댓글수 0 2024. 4. 5.
  • [CSS/Next] tailwind drop-shadow 태그에 그림자 넣기 💡 tailwind 로 그림자 효과를 넣어보자!  github 링크에 호버하면 그림자를 주고싶었다!  🎀 디자인을 바꾸고 싶다면 tailwind.config.ts 에서 설정할 수 있다.theme: { extend: { dropShadow: { DEFAULT: '2px 2px 0 #890105', }, }, }, DEFAULT 말고도 md, 3xl 등 사이즈 별로 추가할 수 있다!   🔗 https://tailwindcss.com/docs/drop-shadow Drop Shadow - Tailwind CSSUtilities for applying drop-shadow filters to an element.tailwindcss.com 공감수 0 댓글수 0 2024. 3. 21.
  • [CSS/Next] tailwind text-shadow 폰트 그림자 넣기 💡 tailwind 로 text-shadow 를 적용시켜보자. tailwind 에 텍스트 섀도우를 검색하면 drop-shadow 가 나온다. 이걸로 폰트도 적용하는건가? 하고 클래스에 넣어봤지만 적용 안된ㄷ.. 알아보니 tailwind 에서 text-shadow 는 공식적으로 지원을 안한다고 한다. 그래도 적용하는 법이 따로 있긴 했다! 원래는 이런식으로 class 명을 넣어주는데, text-shadow 는 방식이 조금 달랐다. _x_y_blur_color 순으로 보면 된다. tailwind.config 를 수정해서 text-shadow 옵션을 직접 등록하는 방법도 있었는데, (그럼 원래 class 명처럼 깔끔하게 쓸 수 있다.) 한 곳에서 한 컬러만 쓸거라 따로 등록하진 않았다. 🔗 https://ww.. 공감수 1 댓글수 0 2024. 3. 21.
  • [CSS/Next] Next.js + tailwind 구글폰트 설정 Roboto_Mono 💡 Next.js 에 폰트 설정을 해보자. layout.tsx import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', }; export default function RootLayout({ children, }: Readonly) { return ( // ... 기본 설정은 inter 폰트로 되어 있다. 🌀layout 과 같은 위치에 styles/fonts.ts 추가 import { Inter, Roboto_Mono .. 공감수 1 댓글수 0 2024. 3. 13.
  • [CSS] input type="file" 파일 선택 버튼 디자인 💡 파일 추가 버튼을 ! 디자인해보자. HTML & CSS~ input[type=file]::file-selector-button { width: 30%; height: 30px; background-color: #e0c3ae; font-family: 'SunBatang-Light'; color: #784b31; border: none; border-radius: 10px; cursor: pointer; &:hover { transition: 0.3s; color: #fff; background-color: #b6856a; } } React ~ const FileInput = styled.input` width: 100%; margin: 5px 0; &::file-selector-button { widt.. 공감수 0 댓글수 0 2024. 2. 29.
  • [CSS] 배경색 background-color 투명, 없애기 💡 배경색 없애는 법 ~ background-color: transparent; input { height: 50px; margin-bottom: 10px; border: none; border-bottom: 1px solid red; background-color: transparent; /* 이 부분!! */ } 공감수 0 댓글수 0 2024. 2. 24.
  • [CSS] select & option : 기본값 설정 💡 옵션의 기본값을 설정해보자 setMember(e.target.value)}> Mads Jonathan jonathan 의 페이지인데 option 의 맨 위 값인 Mads 가 표시되고 있다. 바꿔보자 ~ setMember(e.target.value)}> === Mads Jonathan 기본값이 될 option 을 추가하고 seleted : 기본으로 설정하기 disabled : 선택이 안되게 막아두기 들을 적어주었다. 🚨 disabled 만 적어두면 기본값이 Mads 로 설정된다. 👀 추가 기능 1. hidden 숨기고 싶은 옵션에게 ~ 2. select 에 disabled 속성을 넣으면 아예 옵션을 선택할 수 없게 막힌다! 공감수 0 댓글수 0 2024. 2. 8.
  • [CSS] reset.css : CSS 초기화 💡 태그별로 기본적으로 적용되는 css 초기화 reset.css 파일을 만들고, 적용할 파일에 import 한다. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th,.. 공감수 0 댓글수 1 2024. 1. 24.
  • [CSS/React] styled components CSS, createGlobalStyle 💅 스타일드 컴포넌트를 사용해보자먼저 styled components 플러그인을 설치하고,터미널에 npm add styled-components 를 입력한다.그럼 세팅 끝! import "./App.css";import styled from "styled-components"; {/*style 를 임포트 해온다.*/}const StContainer = styled.div` {/*div 에 스타일 적용*/} display: flex;`;const StBodx = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; {/*props 를 받아올 수 있음*/} margin: 10px;`;co.. 공감수 0 댓글수 0 2024. 1. 24.
  • [CSS] 스크롤 따라다니는 플로팅 메뉴 position: sticky 👀 영화 검색 사이트 제작 중 검색 창이 스크롤을 따라다니게 만들고 싶었다! ~ scroll ~ ⬇️ 왼쪽에 있는 serch-container 를 고정해 두었다! 💡 설정 코드 HTML ~ Search movie title Click CSS ~ #search-container { align-self: flex-start; position: sticky; top: 0; padding: 10px; } 그리고 설정하다 잘 안되서 찾아본 정보들.. 1. 임계값 설정 고정할 요소에 아래 속성 중 하나 이상에 대해 "auto" 이외의 값을 설정해야 한다. top: 0; right: 0; bottom: 0; left: 0; 2. 사파리 벤더 접두사 추가 사파리 브라우저에서 기능하도록! position: -webkit.. 공감수 0 댓글수 0 2024. 1. 9.
  • [CSS] grid 정리 (3) : align-items, justify-items, 💡 그리드 속성 몇 개 더 알아보자. 기본 세팅! .container { display: grid; height: 500px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } ✳️ align-items : 플렉스박스 방식에서와 유사한 역할을 한다. 그리드 컨테이너 행 트랙의 높이, 수직축(열)을 기준으로 그리드 아이템의 배치를 결정한다. ✳️ align-self : 각각의 그리드 아이템이 어떤 식으로 배치될 것인지를 스스로 결정 속성값 의미 stretch 기본값! 그리드 아이템들이 트랙 높이만큼 확장된다. start 트랙 상단으로부터 하단을 향해 배치 end 트랙 하단으로부터 상단을 향해 배치 center 할당된.. 공감수 0 댓글수 0 2024. 1. 5.
  • [CSS] grid 정리 (2) : grid-column & row, grid-template-areas 💡 그리드 컨테이너 내 그리드 아이템에 주어지는 속성에 대해 알아보자. ✳️ grid-column & row : 그리드 컨테이너의 줄 번호를 이용해 아이템을 배치한다. 기본 세팅! 6개의 리스트를 2열 3행으로 ~ 1 2 3 4 5 6 * { box-sizing: border-box; } body { margin: 0; } ul { padding: 0; list-style: none; border: 5px solid aquamarine; } li { display: flex; justify-content: center; align-items: center; background-color: lemonchiffon; border: 5px solid pink; border-radius: 10px; } .con.. 공감수 0 댓글수 0 2024. 1. 5.
  • [CSS] grid 정리 (1) : grid-template, gap, repeat(), minmax(), auto-fill 💡 grid layout : 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식 그리드 아이템의 배치와 정렬은 그리드 컨테이너 내부의 행과 열의 상호작용을 통해 결정된다! 그리드 방식은 컨테이너에 행 and 열을 제공한다. 행과 열을 동시에 제어해 요소를 배치할 수 있다! 그리드 컨테이너 : 그리드 방식으로 레이아웃을 결정할 요소 그리드 아이템 : 그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소 display : grid 기본적으로 블록 레벨 display : inline-grid 인라인 속성으로 쓰고 싶을 때! 시작해 보아요. 1 2 3 4 * { box-sizing: border-box; } body { margin: 0; } ul { padding: 0; list-style: none; bo.. 공감수 0 댓글수 1 2024. 1. 5.
  • [CSS] flex 정리 : 중앙 정렬, justify-content, align-content 💡 flexbox : 행 or 열을 주축('가로 ➡️' 가 기본값)으로 설정해 웹 요소를 배치 / 정렬하는 1차원 레이아웃 방식 플렉스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결정할 요소, ul 플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소, li 고양이 강아지 오리 달팽이 고라니 * { box-sizing: border-box; } body { margin: 0; } #first-ul { display: flex; padding: 0; list-style: none; height: 300px; } 먼저 기본으로 이렇게 flex 를 설정해 주면 ⬇️ 한줄로 정렬된다! ⬇️ display: flex 는 기본적으로 블록레벨 속성, 그 줄을 전체 차지함 ⬇️ display: .. 공감수 0 댓글수 1 2024. 1. 5.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.