Programming/HTML+CSS+JavaScript11 React 자주 쓰이는 문법 핵심 정리 React는 컴포넌트 기반의 UI 라이브러리임. 컴포넌트 기반의 UI 라이브러리 -> 설명글 1. 컴포넌트 (Component)// 함수형 컴포넌트 (권장 방식)function Welcome(props) { return Hello, {props.name};}// 화살표 함수 + JSXconst Button = ({ onClick, children }) => ( {children});2. JSX 문법HTML과 유사하지만 JavaScript 확장 문법const element = Hello!;중괄호 {} 안에 JavaScript 표현식 사용const name = "Alice";const greeting = {name}님, 환영합니다!;3. 상태 관리 (useState)import { useState } .. 2025. 2. 14. JavaScript 문법 정리 JavaScript는 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어임 1. 변수 선언let name = "Alice"; // 재할당 가능const PI = 3.14; // 재할당 불가 (상수)var age = 30; // 옛날 방식 (사용 비권장)2. 데이터 타입원시 타입(Primitive)let str = "Hello"; // 문자열let num = 42; // 숫자let bool = true; // 불리언let nullVal = null; // 의도적 빈 값let undefinedVal; // 정의되지 않음let symbol = Symbol(); // 고유 식별자 (ES6+)객체 타입(Object)l.. 2025. 2. 12. CSS 문법 정리 CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 지정하는 언어임.태그 안에 한칸 띄우고 넣는 거구조와 디자인을 분리하여 웹 페이지의 레이아웃, 색상, 폰트 등을 제어함 1. 기본 문법 구조선택자 { 속성: 값; 속성: 값;}예시:h1 { color: blue; font-size: 24px;}2. 선택자(Selector) 종류(1) 기본 선택자태그 선택자: 태그명 (예: div, p)클래스 선택자: .클래스명 (예: .menu)ID 선택자: #아이디명 (예: #header)전체 선택자: *(2) 조합 선택자자식 선택자: 부모 > 자식 (예: div > p)후손 선택자: 조상 후손 (예: div p)그룹 선택자: 선택자1, 선택자2 (예: h1, h2)(3) 가상 클래스/.. 2025. 2. 12. HTML 기본문법 정리 HTML(Hypertext Markup Language)은 웹 페이지의 구조를 만드는 기초 마크업 언어임. 1. 기본 문서 구조 : HTML5 문서임을 선언: 문서의 루트 요소 안녕하세요! 이것은 HTML 예제입니다. 구글 방문주의사항태그는 대소문자 구분 없지만 소문자 권장속성값은 따옴표로 감싸기 (" " 또는 ' ')닫는 태그를 빠뜨리지 않기 (단, , 등은 예외)HTML은 웹 개발의 기초임.태그를 조합해 구조를 만들고,CSS로 디자인,JavaScript로 동작을 추가하는 것. 2025. 2. 12. 웹개발+앱개발 풀스택 개발자 공부순서 추천 홈페이지도 만들고, 앱도 만들고 싶다면 웹 개발 + 앱 개발을 배워야 해요! 🚀 어떤 순서로 공부하면 좋을지 알려드릴게요!1️⃣ 웹 개발 기초부터 시작하기! 🖥️✅ HTML + CSS → 웹 페이지의 뼈대와 디자인을 만드는 언어✅ JavaScript (JS) → 버튼 클릭, 애니메이션 같은 동적인 기능 추가💡 이걸 배우면? 간단한 정적인 웹사이트(예: 개인 포트폴리오 페이지)를 만들 수 있어요!2️⃣ 프론트엔드 심화 공부 🎨✅ React.js 또는 Vue.js → 현대적인 웹사이트를 만들 때 많이 쓰는 프레임워크✅ API 활용 → 백엔드와 데이터를 주고받는 방법 배우기💡 이걸 배우면? 로그인 기능이 있는 웹사이트, 게시판 같은 기능을 만들 수 있어요!3️⃣ 백엔드 개발 배우기 🛠️✅ Node... 2025. 2. 12. Java, JavaScript 차이점 보통 웹 개발에서는 JavaScript를 많이 쓰니까 AI도 기본적으로 그걸 사용하는 거예요. 근데 꼭 JavaScript만 써야 하는 건 아니고, Python, Java, C++ 같은 다른 언어도 쓸 수 있어요!📌 Java vs JavaScript 차이점!이거 많이 헷갈리죠? 이름은 비슷한데 완전 다른 언어예요!Java ☕ JavaScript 🌐용도앱, 서버 개발웹 개발 (프론트엔드 & 백엔드)실행 환경JVM (Java Virtual Machine)에서 실행웹 브라우저 & Node.js에서 실행문법 스타일엄격한 객체지향 언어유연한 스크립트 언어사용 예시안드로이드 앱, 백엔드 서버웹사이트, 프론트엔드 UI💡 쉽게 말하면!Java는 앱이나 서버를 만들 때 많이 쓰고,JavaScript는 웹사이트에서 .. 2025. 2. 12. JavaScript 프로그래밍 기초 배우는 법 프로그래밍 기초를 배우려면 JavaScript 입문서나 온라인 강의를 보는 게 좋아요!📚 공부 방법 추천!온라인 강의 🎥생활코딩 - JavaScript 입문 (무료, 초보자 강추!)노마드코더 - JavaScript 강의문서 & 튜토리얼 📄MDN Web Docs - JavaScript 기본 (공식 문서)JavaScript.info (설명이 자세하고 쉬움!)책 추천 📖"모던 JavaScript 입문" (초보자에게 쉬운 책!)"Do it! 자바스크립트 입문" (예제 많고 친절한 설명!)완전 처음이라면 생활코딩 강의부터 보는 걸 추천해요! 2025. 2. 12. Claude.ai에게 개발 배우기! 네, 개발 작업을 도와드릴 수 있습니다! 제가 도움을 드릴 수 있는 개발 분야는 다음과 같습니다:프로그래밍 코드 작성 (Python, JavaScript, Java 등 다양한 언어)웹 개발 (HTML, CSS, React 등)데이터 분석 및 시각화알고리즘 문제 해결API 개발데이터베이스 작업어떤 종류의 개발 작업을 하고 싶으신가요? 구체적으로 말씀해 주시면 최선을 다해 도와드리겠습니다.웹 개발을 처음 시작하시는군요! 차근차근 설명해드리겠습니다.웹 개발의 기초는 크게 3가지로 나눌 수 있습니다:HTML - 웹페이지의 구조를 만드는 마크업 언어입니다. 웹페이지의 뼈대라고 생각하시면 됩니다.예: 제목, 단락, 이미지, 버튼 등을 배치하는 역할을 합니다.CSS - 웹페이지의 디자인을 담당합니다. 색상, 크기, .. 2025. 1. 5. CSS : 버튼 추가하기 + 글씨체 바꾸기! 버튼을 추가해볼게요! 먼저 HTML에 버튼을 추가해야 합니다.HTML 코드에 이렇게 추가해보세요:안녕하세요!저는 [당신의 이름]입니다.웹 개발을 배우고 있어요.클릭하세요!그리고 CSS에는 버튼 스타일을 추가할게요. 이전 CSS 코드 맨 아래에 다음 코드를 추가해주세요:button { background-color: #4CAF50; /* 버튼 배경색 (초록색) */ color: white; /* 버튼 글자색 */ padding: 15px 30px; /* 버튼 안쪽 여백 */ border: none; /* 테두리 없애기 */ border-radius: 5px; /* 모서리 둥글게 */ .. 2025. 1. 5. 이전 1 2 다음
