프론트엔드 (6) 썸네일형 리스트형 [한경xToss] 3주차 요약 : CSS 중급 및 Javascript * 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다. 3주차 실습CSS 중급 이미지 잘라서 배경으로 쓰기 : background-position가상요소 선택자 before/after li 가로로 배치하기list-style: none;display:inline-block;padding: 10px; 변환효과 - transition 속성 속성 종류transition-delay : 지연시간duration : 변환시간property : 대상 속성timing-function : 보간 타입 (인터폴레이션, 시간의 간격을 채움)cubic-bezier()배지어 곡선 - 수학자 베지어가 제안한 두 점만으로 곡선을 정의하는 공식변형 속성 - transform 속성 CSS 초기화 코드: Eric Meyer’s .. [한경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.. [한경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/.. [한경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 *.. [React/Typescript] 검색 시 자동 렌더링 안될때/ 자동 새로고침/ 강제 렌더링/ location reload 문제 원래는 Header에 있는 검색창에 검색을 위한 input 데이터(키워드) 입력 후 엔터 or 검색 버튼을 누르면 -> Search Page로 넘어가서 api url의 검색 결과 리스트를 보여줌. 근데 Search Page에서 재검색을 하면 url은 바뀌는데 자동으로 검색 결과가 바뀌진 않음! 내가 직접 새로고침을 해줘야 바뀐 결과가 나왔다. 해결 자동으로 새로고침하는 방법 페이지 이동 이벤트 함수 내에 window.location.reload()를 추가한다! 그럼 검색어를 입력하고 엔터 or 검색버튼을 누르는 행위를 할 때, 바로 새로고침이 되면서 새로운 검색결과가 반영된 페이지가 나오게 된다. 끝 [React] TypeError: Cannot read properties of undefined (reading 'prototype') 리액트 프로젝트 도중 이상한 에러가 떴다. 찾아보니 vs code 자동완성으로 아래 코드가 들어가있었는데, 이 코드가 문제였음 import { response } from "express"; 이 친구를 지워주니 에러가 싹 사라졌다. 편-안 이전 1 다음
