본문 바로가기

Programing/CSS37

CSS의 구성 요소 (Selectors, Property, value)와 우선순위 총 정리 CSS 학습의 중요성CSS를 학습하는 데 있어서 가장 중요한 것은 직접 타이핑 해보는 것이다.퍼블리셔가 아니라 프론트엔드 과정을 희망하고 학습을 시작했다면, 이것 말고도 배워야 할 게 산더미이고 그 중에서 자바스크립트와 알고리즘, API 통신의 벽을 만나는 순간 사실 화면을 그리는 CSS의 중요도는 떨어질 수밖에 없다.뒤로 갈수록 학습량이 현저히 줄어들기 때문에 처음에 HTML과 CSS를 배우는 단계에서 명확히 이해하고 넘어가는 것이 좋다. 본인도 이미 부트캠프 전과정을 수료했고 눈에 띄는 결과물도 만들어냈지만 결국 다시 처음부터 학습하는 이유는 기본기가 부족하다고 느껴졌기 때문이다.이후에 bootstrap, NextUI, TailwindCSS 등 다양한 라이브러리를 만나게 되면서 실제로 내가 하나하나 .. Programing/CSS 2025. 3. 10.
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.

티스토리툴바