본문 바로가기

Programming17

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.
CSS : 이미지 넣기 이미지를 넣는 방법을 알려드릴게요! HTML에서는 태그를 사용합니다.HTML 코드에 이렇게 추가해보세요 (버튼 위에 넣는다고 가정할게요):안녕하세요!저는 [당신의 이름]입니다.웹 개발을 배우고 있어요.클릭하세요!그리고 이미지 스타일을 위해 CSS에도 코드를 추가해주세요:img { width: 250px; /* 이미지 너비 */ height: 250px; /* 이미지 높이 */ display: block; /* 이미지를 블록 요소로 */ margin: 20px auto; /* 위아래 여백 20px, 좌우는 자동(가운데 정렬) */ border-radius: 50%; /* 이미지를 동그랗.. 2025. 1. 5.
JAVA : 마우스를 피해 도망가는 이미지 효과 (마우스 감지해서 도망가기) 아하! 마우스 위치에 따라 자유롭게 도망가는 효과를 만들려면 JavaScript가 필요합니다. 마우스 위치를 감지해서 반대 방향으로 도망가게 만들어볼게요!안녕하세요!저는 [당신의 이름]입니다.웹 개발을 배우고 있어요. 클릭하세요!CSS는 조금 수정해줍니다:.hex-container { position: relative; width: 250px; height: 250px; margin: 100px auto; transition: all 0.1s ease; /* 움직임을 더 빠르게 */}/* 나머지 CSS는 동일 */이제:마우스가 이미지 주변 200px 반경 안에 들어오면마우스 위치의 반대 방향으로 도망가고마우스가 멀어지면 다시 원래 위치로 돌아옵니다어떠신가요? 이 .. 2025. 1. 5.

티스토리툴바