본문 바로가기
반응형

javascript107

[포트폴리오 페이지] 4단계: Contact 섹션 추가 4단계: Contact 섹션 추가4.1 Contact 섹션 HTML 작성index.html 파일에서 Contact 섹션에 내용을 추가합니다.index.html (수정된 부분) Contact Send 4.2 Contact 섹션 스타일링styles.css 파일에서 Contact 섹션에 스타일을 추가합니다.styles.css (추가된 부분)#contact { background-color: #f9f9f9; /* 배경색을 설정합니다. */ padding: 2em; /* 패딩을 설정합니다. */ margin-top: 2em; /* 상단 여백을 설정합니다. */ border-radius: 8px; /* 모서리를 둥글게 만.. 2024. 6. 16.
[포트폴리오 페이지] 3단계: Projects 섹션 추가 3단계: Projects 섹션 추가3.1 Projects 섹션 HTML 작성index.html 파일에서 Projects 섹션에 내용을 추가합니다.index.html (수정된 부분) Projects Project 1 Description of project 1 View Project Project 2 Description of project 2 View Project Project 3 Description of project 3 View Projec.. 2024. 6. 16.
[포트폴리오 페이지] 2단계: About Me 섹션 추가 2단계: About Me 섹션 추가2.1 About Me 섹션 HTML 작성index.html 파일에서 About Me 섹션에 내용을 추가합니다.index.html (수정된 부분) About Me 안녕하세요! 저는 프론트엔드 개발자 홍길동입니다. 웹 개발에 열정을 가지고 있으며, 최신 기술을 배우고 활용하는 것을 좋아합니다. HTML, CSS, JavaScript와 같은 웹 기술을 사용하여 사용자 친화적이고 반응형 웹사이트를 만드는 데 관심이 있습니다. 저는 다양한 프로젝트를 통해 문제 해결 능력을 키워왔으며, 팀워크와 커뮤니케이션 스킬을 중요하게 생각합니다. 앞으로 더 많은 경험을 쌓고, 더욱 성장하는 개발자가 되고자 합니다.2.2 About Me 섹션 스타일링styles.css 파일에.. 2024. 6. 16.
[포트폴리오 페이지] 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.
반응형

티스토리툴바