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

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

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

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