본문 바로가기

Time waits for no one 😎
FE 개발자 지망생의 기술 블로그입니다.
[Github - https://github.com/inthhh]

블로그 내 검색

🎮 프로그래밍51

[한경xToss] 🍊추가공부) daisyUI dark mode / Tailwind CSS option / 데이지 UI 다크모드 자동 설정 궁금했던 것 :최근 UIUX 측면에서 다크모드가 필수이다모든 요소를 daisyui로 만든다면, 다크모드가 사용자 PC환경에 맞게 자동으로 적용되는걸까? 오늘 daisyUI를 배웠다.몇년동안 FE개발을 하면서, CSS를 하나하나 깎아 만들었는데이런 component 프레임워크가 있다니 신세계를 접한 느낌이다 👀 DaisyUI란?Tailwind CSS를 확장하는 UI 컴포넌트 라이브러리미리 설계된 UI 요소를 제공하여 빠르고 쉽게 스타일링된 컴포넌트를 사용할 수 있음https://daisyui.com/docs/cdn/ Use daisyUI from CDN — Tailwind CSS Components ( version 4 update is here )How to use daisyUI from a CDN?d.. 2025. 1. 16.

[한경xToss] 🍓추가공부) Tailwind CSS Media Queries / 테일윈드 반응형 스타일 처리 / 미디어쿼리 접두어 궁금했던 것 :Tailwind 미디어쿼리에서 화면 너비가 sm보다 작은 상황은 어떻게 처리되나?Tailwind의 장점, 단점은 무엇인가?수업시간에 Tailwind를 처음으로 배웠다 (FE개발자 맞나요..?) 우선 Tailwind란,유틸리티 클래스 기반의 CSS 프레임워크이다.미리 정의된 클래스를 사용해 HTML에서 직접 스타일을 적용할 수 있고,기존 CSS 작성 없이 빠르게 레이아웃과 디자인을 구현할 수 있다. 미디어 쿼리에서는 위 코드와 같이, 반응형 접두어를 사용한다. • sm: 640px 이상 • md: 768px 이상 • lg: 1024px 이상 • xl: 1280px 이상 • 2xl: 1536px 이상 여기서 내 생각 원래 웹페이지 CSS를 처음에 PC 기준으로 만들고, PC/tablet/.. 2025. 1. 15.

[한경xToss] 🍇추가공부) CSS 반응 반복 설정 / fade over 위치 / SCSS 궁금했던 것 :영화/예매/극장 각 버튼의 순서를 n이라고 할때,hover 시 나타나는 아래쪽 hidden menu 리스트를margin-right: calc(50%-n); 이런 식으로 계산해서 각 버튼마다 위치를 다르게 하고 싶었다. 아직 수업에서 순수 html, css만 사용중이라nth-child(귀찮음)이나 JS 이외에도 방법이 있는지 궁금해졌다! chatGPT한테 우선 물어봄 -> 강사님께도 여쭈어봄 방법 1: nth-child와 calc() 조합CSS의 nth-child()를 활용하여 특정 순서에 따라 다른 스타일을 적용할 수 있다..hidden_menu:nth-child(1) .menulist { margin-right: calc(50% - 10px); /* 첫 번째 hidden_menu *.. 2025. 1. 13.

[한경xToss] 1-2주차 요약 : 컴퓨터 교육 / HTML / CSS * 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다. 매일 노션에 학습 내용을 정리하고 있는데, 블로그에도 요약해서 정리하면 좋을 것 같아 업로드한다회고..가 아닌 리얼 요약 강사님이 항상 설명하실 때 최대한 구체적으로 알려주셔서모르던 내용이나 애매하게 알고 있는 것들을 확실하게 깨닫고 넘어갈 수 있어서 좋았다.전공 과목에서 모두 배웠던 내용이지만, 이렇게 복습하면서 새로운 내용이나 꿀팁도 알게 됨!! chap1. 운영체제(OS)chap2. 컴퓨터 구조2진수 소수점‼️을 8 / 16진수로 변환 : 소수점 기준으로 3 / 4개씩 자르고 앞뒤에 0을 채우고 변환chap3. 정보통신chap4. 네트워크생성형 AI (LLM)chatGPT : 실시간 검색클로드 : 10개월 전 데이터까지 유효제미나.. 2025. 1. 13.

[Chrome Extension] ☃️"붕어빵 스테이션" 크롬 확장 프로그램 개발 기록 "북마크가 너무 많은데 쉽게 관리할 수 없을까?" 라는 아이디어로 토이 프로젝트를 시작했고,며칠 동안 개발을 진행해보았습니다.사용한 툴은 React js, Chrome bookmark API 등입니다. 이라는 크롬 브라우저 시작화면 대시보드를 개발하였고,이번주에 버전 1.0 배포가 완료되었습니다. (개발기간 약 3~5일) 아래 링크에서 다운받으실 수 있습니다. https://chromewebstore.google.com/detail/%EB%B6%95%EC%96%B4%EB%B9%B5-%EC%8A%A4%ED%85%8C%EC%9D%B4%EC%85%98-chrome-dashboard/ecpkcgdaahhpdlanhdobigdkadgmedna 붕어빵 스테이션 - Chrome Dashboard - Chrome 웹 .. 2024. 12. 6.

[Git] 깃허브 빌드 X 표시 / 빌드 실패 / All checks have failed 프로젝트 배포 후 git action을 추가한 뒤, 계속 github상에서 빌드가 잘 되다가 갑자기 연동이 안될때가 있었다. 일단 깃허브 레포지토리 메인에서 저 commits 버튼을 눌러서 커밋 리스트로 들어가자. 저 X표시를 누르면 이런 팝업이 뜬다. Details를 눌러서 자세히 보도록 하자. 그러면 아래와 같이 Build 실패 요인이 비교적 자세하게 나온다. 이걸 꼼꼼히!!! 읽어보고 원인을 찾아야 한다. 나의 경우에는 Swiper 경로 문제였다. 수정해주고 push하니 바로 체크 표시가 뜸 npm start 시 아무 문제가 없었다고 하더라도 이처럼 빌드 실패 가능성이 있으니 배포된 페이지가 연동이 되지 않는다면 깃허브를 확인할 것! 2023. 7. 12.

이전 1 2 3 4 5 6 7 8 9 다음

728x90

티스토리툴바