디자이너를 위한 코딩 이론을 학습하고 이해합니다.React 프레임워크를 알기 위한 사전 지식 HTML, CSS, JavaScript의 기본을 배워봅니다. 1. html - 이미지, 링크 태그, 폼HTML의 기본 태그를 학습합니다. 이는 웹 페이지에서 이미지를 삽입하고, 링크를 설정하며, 폼을 생성하는 데 사용됩니다.- 코드 예제  예제 링크 이름: 이메일: 메시지: 제출  2. css 1 -  backgroundCSS를 사용하여 배경 스타일을 설정하는 방법을 학습합니다. 배경 이미지, 색상, 패턴..

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

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

[javascript] 실습 과제 01! 1. 텍스트 필드에 값을 입력. 2. “제출” 버튼 클릭. 3. 아래에 당신이 입력한 text는 "입력된 값" 입니다. 출력.만들기  사용한 코드는 주석 추가해놓았당 텍스트 입력 실습 제출하기

JavaScript와 React, 기초 개념 정리 1. JavaScript와 React • React는 JavaScript로 만들어진 특화된 도구• React는 웹 앱 개발을 위한 라이브러리로, 상위 개념의 프레임워크가 아님.• React를 사용하려면 JavaScript 이해가 필수.• JavaScript 없이 React는 동작하지 않음.• 바닐라 자바스크립트(Vanilla JavaScript)란?• 프레임워크나 라이브러리를 사용하지 않은 순수 JavaScript.• DOM 조작, 이벤트 처리 등 모든 작업을 JavaScript 코드로 작성. 2. 변수(Variable)란? • 정의: 변수를 사용하면 데이터를 저장하고 재사용할 수 있음.• 예: 이름, 숫자, 계산 결과 등을 저장.• 왜 필요한가?• 동일..

Nodemon은 파일을 수정할 때마다 자동으로 서버를 재시작해주는 도구다. 1. Nodemon 글로벌 설치sudo npm install -g nodemon 2. 글로벌 권한 문제 해결 (필요 시)  1. 새로운 글로벌 경로 생성:mkdir -p ~/.npm-globalnpm config set prefix '~/.npm-global'  2. 경로 환경변수 추가:echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrcsource ~/.zshrc  3. 경로 확인:echo $PATH   4. Nodemon 다시 설치:npm install -g nodemon 3. Nodemon 사용  1. 터미널에서 실행 & 자동반영nodemon 파일이름.js • 파일 수정 시마다 서..

접근성을 높이기 위해 중요한 규칙: • 버튼에는 항상 텍스트를 포함: • 텍스트는 스크린 리더 사용자에게 중요한 정보 제공. • 이미지에 대체 텍스트(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. 맞춤형 애니메이션: 사용자가 지속 시..

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

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