본문 바로가기

Programing/CSS41

CSS란? CSS란?Cascading Style Sheets의 약자웹 페이지의 디자인과 레이아웃을 담당HTML이 웹 페이지의 구조를 결정한다면 CSS는 그렇게 정해진 구조에 스타일(색상, 폰트 크기, 여백, 정렬 등)을 적용하는 역할등장배경원시 웹 페이지는 HTML 하나로만 구성되었다.이것들도 나름의 스타일을 적용하기 위해 아래와 같이 인라인으로 스타일을 지정했다.안녕하세요!제목입니다문제는 이러한 방식은 웹 페이지가 복잡해지면 코드가 너무 복잡해진다는 단점이 있었음.메인 컨텐츠와 디자인이 뒤섞여 있다 보니 유지보수에도 어려움이 있었음.또한 웹 브라우저를 볼 수 있는 다양한 기기가 등장함에 따라 크로스 브라우징이 필요했는데 위 방식으로는 불가능했음.그러다 CSS는 1996년 W3C (World Wide Web Con.. Programing/CSS 2025. 3. 4.
Tailwind :: hover 애니메이션 : 위로 살짝 올라가기 trnasition-tranform : 호버와 같은 변환 속성에 대해 트랜지션을 적용duration-400 : 지속 시간을 400ms(0.4s)로 설정hover:-translate-y-2 : 호버 시 요소를 0.5ream (8px) 만큼 위로 이동시킴. translate 앞에 - 붙어 있으면 위로, 양수면 아래로. Programing/CSS 2024. 6. 30.
Tailwind :: 마우스 호버 시 살짝 커지는 애니메이션 Programing/CSS 2024. 6. 30.
React Tailwind :: 모바일 고려 Layout 컴포넌트 Layout 컴포넌트// src/components/Layout.tsximport React, { ReactNode } from 'react';type LayoutProps = { children: ReactNode; }const Layout : React.FC = ({ children }) => { return ( {children} );};export default Layout;max-w-full: 모바일 장치에서 컨테이너가 전체 너비를 차지하도록 설정sm:max-w-screen-sm: 작은 화면에서 최대 너비를 screen-sm으로 설정md:max-w-screen-md: 중간 크기 화면에서 최대 너비를 screen-md로 설정lg:m.. Programing/CSS 2024. 6. 29.
호버 시 자연스럽게 커지는 애니메이션 div나 텍스트, 버튼 등에 마우스를 hover 했을 때 자연스럽게 커지는 애니메이션을 넣으면 사용자가 '이 아이템을 클릭했을 때 어떤 이벤트가 있겠구나'라는 생각이 들어 사용자 경험을 증대시킬 수 있다. 필요한 CSS를 열심히 작성하고 아래와 같이 호버 이벤트를 추가한다.cursor: pointer; /* 마우스 호버 시 커서를 클릭 커서로 바꿈 */transition: transform 0.3s ease, box-shadow 0.3s ease; /* 호버 이벤트를 천천히 만듦 *//* 마우스 호버 시 크게 카드를 천천히 키우고 그림자를 만듦 */&:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); Programing/CSS 2024. 6. 26.

티스토리툴바