[코딩 👶의 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. 아트 & 디자인 관련 사이트 • Soloretta - Art and Design예술 작품 및 디자인 관련 프로젝트. • VMA Museum - Art and Architecture건축 및 미술 작품을 다루는 러시아 기반의 아트 뮤지엄. • Freepik - Retro Building Design벡터 기반의 복고풍 건축 디자인 리소스. • Clip Studio Asset - Retro Illustration건축 관련 클립 스튜디오 일러스트 에셋. • Clip Studio Asset - Building Illustration건물 삽화 리소스. 2. 건축 프로젝트 및 포트폴리오 • Ward Jewell Architect - Portfolio건축 포..

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

JavaScript의 배열 메서드 map, filter, forEach는 코딩 초보자가 반드시 알아야 할 기본 개념이다.이 글에서 각 메서드의 개념, 특징, 차이점을 설명하고, 실전에서 어떻게 활용할 수 있는지 정리해보겠다. 🥳 1. 배열 메서드란 무엇인가?JavaScript에서 배열은 데이터를 여러 개 모아놓은 상자와 같다.배열에는 숫자, 문자, 객체 등 다양한 데이터가 들어갈 수 있으며,배열 메서드는 이 데이터를 더 쉽게 가공하고 조작하기 위한 도구라고 보면 된다. 오늘 다룰 map, filter, forEach는 배열을 반복해서 사용하거나, 데이터를 변환할 때 매우 유용하다. 근데, 배열이 뭔데? 🤷‍♀️ (1) 배열의 필요성 1. 여러 데이터를 관리하기 위한 효율적인 방법이다. • 같은 종류의..

[1121 배운 내용 복습]  1. 변수명 정하는 규칙 • 단수/복수 규칙: • 단수형: 하나의 값만 저장할 때 사용.const input = document.querySelector('input'); // 하나의 입력 요소를 가리킴  • 복수형: 여러 값을 저장하거나 배열로 관리할 때 객체명 뒤에 s를 붙이는 것이 관례.const inputs = document.querySelectorAll('input'); // 여러 입력 요소를 가리킴 • 이유: 변수명을 보고 데이터의 형태를 직관적으로 이해할 수 있음. 2. 배열의 특징과 사용법 • 배열은 순서가 있는 데이터의 집합을 관리한다. • 배열의 첫 번째 요소는 [0]으로 접근.const inputs = document.querySelectorAll('i..

js 객체 개념 공부 ✅공부 내용 블로그 정리 ✅map, filter, forEach 공부 ✅array 예제 공부하기 ✅html, css 복습html, css 응용 과제 제출배움일기 ✅피드백

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

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/news/599398?gad_source=1&gclid=Cj0KCQiA0fu5BhDQARIsAMXUBOKF6M_TZWDPD5rXqcJ8InuvgLQErrQ5vqo8QivrqvcP0i3zHtYMdyAaAntNEALw_wcB 따라하며 배우는 리액트 A-Z[19버전 반영] 강의 | John Ahn - 인프런John Ahn | 이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.,www.inflearn.com https..

2024년 11월 8일, 산업디자인학과 네트워킹 데이에서 대략 40명을 대상으로 졸업생 특강을 했다. 평소 존경하는 교수님께서 연락 주셔서 감사하게도 특강 발표에 참여하게 되었다. 2023-2024년 1년간 미국 인턴십을 다녀온 경험을 살려, 특강 주제를 잡았다.경험을 꾸준히 대외적으로 기록하기로 마음을 먹은 11월이기에 글을 쓴다. 💃 혹시나 디자인 직군이거나, 해외 인턴십을 꿈꾸고 있다면.. 이 글이 도움이 되길 바랍니다! 저는 UX, 브랜딩, 출판 쪽 경험이 있고 해외 인턴십을 혼자 찾아 다녀온 1인이라 관련하여 궁금한 점이 있다면 댓글 주세요!최선을 다해 도움드릴게요.💃  생각 패턴을 시각화시켜 이를 바탕으로 설명했다. 1. Listen - 나의 꿈과 목표를 듣다스스로에게 질문하고, 진짜 원하..