반응형 자바스크립트102 [포트폴리오 페이지] 1단계: 프로젝트 초기 설정 1단계: 프로젝트 초기 설정1.1 프로젝트 디렉토리 생성로컬 환경에서 프로젝트 디렉토리를 생성합니다.mkdir MyPortfoliocd MyPortfolio1.2 Git 초기화생성된 프로젝트 디렉토리에서 Git 저장소를 초기화합니다.git init1.3 기본 파일 생성프로젝트의 기본 파일을 생성합니다.touch index.html styles.css scripts.js README.md LICENSE1.4 README.md 작성README.md 파일을 작성하여 프로젝트 설명을 추가합니다. 다음 내용을 추가합니다. # MyPortfolioMyPortfolio는 HTML, CSS, JavaScript를 사용하여 만든 개인 포트폴리오 웹사이트입니다. 이 웹사이트는 나의 경력, 프로젝트, 연락처 정보를 포함하고.. 2024. 6. 16. [Javascript] Javascript 웹 개발 필수 개념 JavaScript로 프론트엔드 개발을 하려고 할 때 중요한 개념들을 잘 이해하고 있어야 웹 애플리케이션을 효율적이고 효과적으로 개발할 수 있습니다. 1. DOM(Document Object Model) 조작1.1 DOM 선택자HTML 문서의 요소를 선택하고 조작할 수 있습니다.getElementById: 특정 ID를 가진 요소를 선택합니다.getElementsByClassName: 특정 클래스를 가진 요소를 모두 선택합니다.getElementsByTagName: 특정 태그 이름을 가진 요소를 모두 선택합니다.querySelector: CSS 선택자를 사용하여 첫 번째 요소를 선택합니다.querySelectorAll: CSS 선택자를 사용하여 모든 요소를 선택합니다.예시:let element = docu.. 2024. 6. 8. [Javascript] Javascript 규칙 JavaScript 코딩 컨벤션, 네이밍 컨벤션, 그리고 규칙을 따르면 코드의 가독성, 유지보수성, 일관성이 크게 향상됩니다. 아래에 JavaScript를 작성할 때 지켜야 할 주요 컨벤션과 규칙을 정리했습니다.JavaScript 코딩 컨벤션1. 들여쓰기와 공백들여쓰기: 일반적으로 2칸 또는 4칸의 공백을 사용합니다. 일관된 들여쓰기를 유지합니다.공백: 연산자 주변, 코드 블록 사이, 함수 인수 목록 등에 적절한 공백을 사용하여 가독성을 높입니다.// 2칸 들여쓰기 예시function add(a, b) { return a + b;}// 공백 사용 예시let sum = add(2, 3);if (sum > 5) { console.log('Sum is greater than 5');}2. 중괄호와 줄바꿈중.. 2024. 6. 8. [Javascript] Javascript 예제(심화) - 수정 UI 디자인을 개선하고, 코드에서 수정된 부분에 대한 메시지를 추가하겠습니다.개선된 UI 디자인HTML 코드 Advanced To-Do List Add All Completed Uncompleted Clear All CSS 코드/* styles.css */body { font-family: Arial, sans-serif; display: flex; justify-content: center; ali.. 2024. 6. 8. [Javascript] Javascript 심화 1단계: ES6+ 기능1.1 let과 constlet과 const는 블록 스코프를 가지는 변수 선언 키워드입니다.let: 재할당이 가능한 변수 선언.const: 재할당이 불가능한 상수 선언.예시:let message = 'Hello, JavaScript!';message = 'Hello, ES6!';console.log(message); // 'Hello, ES6!'const pi = 3.14;console.log(pi); // 3.14// pi = 3.14159; // 오류 발생: 상수 재할당 불가1.2 화살표 함수화살표 함수는 더 간결한 함수 표현식을 제공합니다.예시:// 전통적인 함수 선언function add(a, b) { return a + b;}// 화살표 함수const add = (a,.. 2024. 6. 8. [Javascript] Javascript 실습 JavaScript를 사용하여 할 일 목록(To-Do List) 애플리케이션을 만들어 보겠습니다. 여기서는 항목을 추가하고 삭제할 수 있는 기능을 구현하겠습니다.HTML 코드 To-Do List Add CSS 코드/* styles.css */body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.todo-container { background-color: #fff; .. 2024. 6. 8. [Javascript] Javascript 기본 1단계: JavaScript 기초 이해하기1.1 JavaScript 소개JavaScript는 웹 페이지에 동적 기능을 추가하는 데 사용되는 프로그래밍 언어입니다.JavaScript는 HTML과 CSS와 함께 웹 개발의 핵심 요소입니다.1.2 JavaScript 포함 방법인라인 스크립트: HTML 요소에 직접 JavaScript 코드를 작성합니다.내부 스크립트: 2단계: 기본 문법과 자료형2.1 변수와 상수변수 선언: var, let, const상수 선언: const예시:let message = 'Hello, JavaScript!';const pi = 3.14;2.2 자료형기본 자료형: 문자열(String), 숫자(Number), 불리언(Boolean), null, undefined참조 자료형: 객.. 2024. 6. 8. [Roadmap] Javascript 목차[0. 환경설정](0.0 Windows)0.0.1 VSCode 설치0.0.2 Node.js 설치0.0.3 Browser 설치 (0.1 Ubuntu)0.1.1 VSCode 설치0.1.2 Node.js 설치0.1.3 Browser 설치 (0.2 MacOS)0.2.1 VSCode 설치0.2.2 Node.js 설치0.2.3 Browser 설치 [1. Javascript](1.1 Vanilla Javascript)1.1.0 환경설정1.1.1 변수1.1.2 연산자1.1.3 제어문: 조건문1.1.4 제어문: 반복문1.1.5 함수1.1.6 object/prototype (1.2 Modern Javascript) (1.3 API)1.3.1 DOM [2. 자료구조/알고리즘](2.1 자료구조)2.1.0 자료구조 개요.. 2024. 5. 10. Porfolio Page - (5) Javascript: Web API Index 1. Web API 2. 브라우저 구조 3. 3 4. 4 5. 4 6. 4 7. 4 8. 4 9. 4 10. 4 11. 4 12. 4 13. 4 14. 4 15. 4 16. 4 Reference 1. Web API Web API - API(Application Programming Interfaces)는 - Web API (Web API 종류) - DOM APIs: 웹 페이지의 요소를 생성/삭제/스타일변경 조절 - Network APIs: 서버와 통신 기능 제공 - Graphics APIs: 그래픽 관련 기능 제공 - Audio/Video APIs: 멀티미디어 관련 기능 제공 - Device APIs: 디바이스 상태 정보 확인 - File APIs: 사용자의 파일 정보 확인 - Storage .. 2024. 2. 11. [진행 계획표] Year03. 프로그래밍 기본 JavaScript / TypeScript (선택이유) - 웹 개발에 있어 주요 언어 - 프론트 엔드 / 백엔드 모두 사용 가능 (환경 설정) - Windows: Visual Studio Code + Node.js - Mac OS: Visual Studio Code + npm 1) Javascript 기본 문법 - Vanilla Javascript - Modern Javascript - Javascript documentation - Node.js - Node.js documentation - npm 2) Typescript 기본 문법 - Typescript - Typescript 가이드북 3) Frontend - HTML / CSS - CSS documentation - CSS Style Sheet -.. 2023. 9. 16. 이전 1 ··· 7 8 9 10 11 다음 반응형
