react 응용 공부목적: React 프레임워크에 대해 알아보고 중요한 상태 관리에 대해 학습사용툴: JSX, React, Coding 응용 순서 🦧리액트 앱 만들기, 리액트 앱의 동작 원리리액트(React) 앱을 만드는 방법과 리액트의 동작 원리를 학습합니다. 먼저, 리액트 프로젝트를 생성하고 구조를 이해합니다.컴포넌트, JSX, 컴포넌트에 값 전달하기리액트의 기본 구성 요소인 컴포넌트(Component)와 JSX의 개념을 이해합니다. 또한, 컴포넌트 간에 값을 전달하는 방법을 학습합니다.이벤트 처리하기리액트에서 이벤트를 처리하는 방법을 학습합니다. 버튼 클릭, 폼 제출 등과 같은 사용자 인터랙션을 처리합니다.컴포넌트와 상태 이해하기리액트 컴포넌트의 상태(State)와 이를 관리하는 방법을 이해합니다..

접근성을 높이기 위해 중요한 규칙: • 버튼에는 항상 텍스트를 포함: • 텍스트는 스크린 리더 사용자에게 중요한 정보 제공. • 이미지에 대체 텍스트(alt 속성) 추가 * CSS로 접근성을 위한 스타일링CSS로 이미지를 사용해 텍스트를 숨기는 방법: • 스크린 리더에서 텍스트를 읽도록 유지하되 화면에서 숨김 처리. • “blind” 스타일링 예제:.blind { position: absolute; /* 화면에서 제거 */ width: 1px; height: 1px; overflow: hidden; /* 내용 숨김 */ clip: rect(0, 0, 0, 0); /* 브라우저에 잘리지 않도록 */ white-space: nowrap; /* 줄바꿈 방지 */} * VS Code에서 터미널 사용법..

1. Animista  • URL: https://animista.net/ Animista - On-Demand CSS Animations LibraryAnimista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.animista.net  • 설명: Animista는 CSS 애니메이션 효과를 손쉽게 미리 보고 코드로 생성할 수 있는 사이트이다. • 주요 기능: 1. 애니메이션 미리 보기: 다양한 CSS 애니메이션을 선택하고 결과를 실시간으로 확인할 수 있다. 2. 맞춤형 애니메이션: 사용자가 지속 시..

1. CSS 애니메이션의 개념과 활용CSS 애니메이션은 웹 요소에 생동감을 부여하는 기술로, 웹 페이지를 단순한 정적인 구성에서 벗어나 사용자 경험(UX)을 향상시킨다. 애니메이션은 Transition과 Keyframes를 사용하여 구현하며, 요소의 위치, 크기, 불투명도, 색상 등의 속성을 변화시킬 수 있다. CSS가 어렵다면.. (똑같이 어려웠던 과거의 나를 떠올리며🫣)브런치에 쉽게 풀어써놓았다.02. 동화로 이해하는 CSS 02화 02. 동화로 이해하는 CSS“웹 세상에 색을 입히는 마법사, CSS의 모험” 옛날 옛적, 컴퓨터와 인터넷이 생겨나고 사람들은 웹 페이지를 만들기 시작했어. 웹 세상에는 HTML이라는 친구가 먼저 나타나서, 페이지의 구조와brunch.co.kr 애니메이션 종류 1. Tr..

1. CSS Grid CSS Grid는 2차원 레이아웃을 지원하는 강력한 CSS 모듈이다. 이를 통해 우리는 HTML 요소를 행(row)과 열(column) 모두에서 자유롭게 배치할 수 있다. Flexbox가 단방향 레이아웃에 최적화되어 있다면, Grid는 복잡한 2차원 레이아웃을 쉽게 다룰 수 있도록 설계되었다. 쉽게 말해서 엑셀 시트!가로(열, column)와 세로(행, row)로 나누고, 그 안에 있는 칸마다 요소를 배치할 수 있는 것이다. 1. 그리드의 기본 규칙 1. 그리드 컨테이너: 그리드를 적용할 큰 틀을 만든다. • display: grid;를 사용해 활성화. 2. 그리드 아이템: 그 안에 들어갈 요소들을 배치한다. • 그리드 컨테이너 안의 모든 자식 요소가 그리드 아이템이 된다. 2. 그..

티스토리에는 이론, 실습 위주의 글을 올립니다. 🤧프로덕트 디자이너는 기획자, 개발자와 협업이 필수적이다. 아래 리스트를 참고하여 위풍당당한 프로덕트 디자이너가 되보자!프로덕트 디자이너가 알아두면 좋을 개발 상식 01. HTML 기본 개념프로덕트 디자이너가 알아두면 좋을 개발 상식 02. HTML 기본 요소프로덕트 디자이너가 알아두면 좋을 개발 상식 03. HTML으로 웹페이지 기본 구조 작성해보기프로덕트 디자이너가 알아두면 좋을 개발 상식 04. Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법 (컴포넌트 네이밍)프로덕트 디자이너가 알아두면 좋을 개발 상식 05. CSS 기본 개념과 문법 이해하기프로덕트 디자이너가 알아두면 좋을 개발 상식 06. CSS : 박스모델프로덕트 디자이너가 알아두..