React를 이용해 TODO앱을 만들어봅니다. 이를 통해 CRUD(Create / Read / Update / Delete) 기능이 작동되는 방식을 알 수 있습니다. 자신이 만든 앱을 공유하고 피드백을 기반으로 앱을 업그레이드하는 것을 포함합니다.  import { useState } from "react";import "./App.css";const initialTodos = [ { id: 1, text: "운동가기", completed: false, dueDate: "2024-11-28" }, { id: 2, text: "미션 완료하기", completed: true, dueDate: "2024-11-29" }, { id: 3, text: "리액트 과제", completed: false, due..

[코딩 👶의 Advent Calendar Interactive Web 제작 도전기]아래 링크를 클릭하면 과정을 확인할 수 있어요! 피드백 환영입니다🪻🪻2024.11.23 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.01 Advent Calendar 기획2024.11.23 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.02 Advent Calendar 레퍼런스 조사2024.11.24 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.03 Advent Calendar 디자인2024.11.25 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.04 Advent Cale..

[코딩 👶의 Advent Calendar Interactive Web 제작 도전기]아래 링크를 클릭하면 과정을 확인할 수 있어요! 피드백 환영입니다🪻🪻2024.11.23 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.01 Advent Calendar 기획2024.11.23 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.02 Advent Calendar 레퍼런스 조사2024.11.24 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.03 Advent Calendar 디자인   지난번 게시글에서 일러스트를 완성했고 대략 코드 구성을 짰다. 위 2번째 이미지처럼 위치랑 창문, 문 클릭했을 때 모달팝업..

[참고]좋은 프로토타입 예시를 찾았다. 코드로 만들어보고 피그마 프로토타입 연습도 해봐야겠다. 일러스트를 정했다! 내가 그리기엔 디자인에 에너지를 100% 다 쓸 것 같아서 ⛓️‍💥😓마음에 드는 일러스트를 열심히 찾았고, 정해서 크리스마스 색깔을 입혔다!  (1) 건물 일러스트💬해당 파일은 CC BY 4.0 (Creative Commons Attribution 4.0 International) 라이선스였다. 이는 상업적 사용을 포함한 거의 모든 용도를 허용하는 것이지만 혹시 몰라 원작자에게 일러스트 사용 허락을 구하는 메일을 보냈다. 그리고 허락 받았다 🩶 우선 메일 답장을 기다리면서 배경 작업을 시작했다.모바일 사용자가 많을 것 같아 모바일과 데스크탑을 모두 고려하고 싶지만, 일러스트 이미지를 ..

어드벤트 캘린더 디자인 1차 초안 1. 컨셉 • 크리스마스 마을 테마의 단일 건물: • 한 건물에 창문 25개를 배치하여 어드벤트 캘린더 구현. • 각 창문은 독특한 SVG 디자인으로 제작. • 사용자가 날짜별 창문을 클릭하면 문이 열리는 애니메이션과 함께 모달 팝업으로 콘텐츠를 표시. 2. 주요 디자인 요소 1. 건물: • 크리스마스 분위기를 강조한 따뜻한 톤의 건물 외관. • 벽돌 질감 또는 아트 스타일로 제작. 2. 창문 (SVG): • 각 창문은 서로 다른 모양과 크기(원, 사각형, 다각형 등)로 구성. • 창문 내부에 날짜를 표시하며, 숫자는 중앙에 배치. • 창문이 문처럼 열리도록 애니메이션 추가. 3. 컬러 팔레트: • 기본 톤: 빨강(#D32F2F), 초록(#388E3C), 금색(#FFD7..

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

웹 세상에 첫 씨앗이 심어지다: HTML의 탄생과 성장 이야기 옛날 옛적, 컴퓨터와 인터넷이 처음 생겨났을 무렵, 사람들은 웹(Web)이라는 새로운 세상을 만들고 있었어. 그곳은 마치 하얀 도화지 같은 공간이었고, 그 안에는 아직 아무런 내용도 없었어. 사람들이 아무리 둘러봐도 그저 텅 빈 화면만이 보였지. 그때, 하얀 도화지 위에 HTML이라는 작은 씨앗이 심어졌어. “안녕, 나는 HTML이라고 해. HyperText Markup Language야. 나의 역할은 웹 페이지에 구조와 내용을 채우는 것이야.” HTML은 웹 세상에 자신이 해야 할 일을 찾아서 열심히 일하기 시작했어. HTML은 사람들에게 글을 보여주고, 이미지를 올리고, 다른 페이지로 이동할 수 있도록 링크를 만들었지. HTML은 웹 페이..

HTML의 계층적 구조와 주요 태그 학습 1. HTML의 계층적 구조란 무엇인가? HTML의 계층적 구조란 웹 페이지를 구성하는 요소들이 부모-자식 관계를 통해 계층적으로 배치되는 방식을 의미한다. 이러한 구조는 HTML 문서의 가독성과 유지보수성을 높이며, 다음과 같은 원칙을 따른다: • 부모 요소(Parent): 다른 요소를 포함하는 요소를 의미한다. • 자식 요소(Child): 부모 요소 안에 포함된 요소를 의미한다. • 형제 요소(Sibling): 동일한 부모를 공유하는 요소를 의미한다. HTML 계층적 구조 예제 HTML 학습 사이트 소개 예제 HTML이란? HTML은 웹 ..

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 : 박스모델프로덕트 디자이너가 알아두..