Hello World

실습 내용제한 시간내에 고양이 사진 검색 사이트 일부를 만드는 작업 진행 실습 과정베이스 코드와 명세만 주어진후 시간내에 풀어야 함명세 부분 정확히 기억이 안나지만 코드리팩토링 부분 제외 기능 적인 부분은 GPT이용하여 시간내에 작업 완료.  동작 영상 작업 코드https://github.com/josungman/Programmer-s_Web_App_Dev_Course/tree/main/week7/part3 Programmer-s_Web_App_Dev_Course/week7/part3 at main · josungman/Programmer-s_Web_App_Dev_Course클라우딩 어플리케이션 엔지니어링 코스. Contribute to josungman/Programmer-s_Web_App_Dev_Co..

JavaScript의 프로토타입 기반 객체 지향JavaScript는 프로토타입 기반의 객체 지향 언어입니다. 이는 클래스 기반 객체 지향 언어와는 다르게, 객체들이 클래스의 인스턴스로 생성되는 대신 객체를 직접 생성하고 다른 객체를 상속받을 수 있습니다. JavaScript에서 모든 객체는 다른 객체로부터 프로퍼티와 메서드를 상속받을 수 있는 프로토타입 객체를 가지고 있습니다.생성자 함수의 사용생성자 함수는 객체를 생성하기 위해 사용되는 특별한 함수입니다. new 키워드와 함께 사용되며, 생성자 함수 내부에서 this 키워드를 사용하여 객체의 초기 속성을 설정합니다. 샘플 코드 및 설명// 생성자 함수 예시function Person(name, age) { this.name = name; th..

객체(Object)개체(Entity)의 정의:자바스크립트의 객체는 소프트웨어의 가장 기본적인 구성요소로, 개체라고도 불립니다.속성(Property)과 구성:객체는 속성(property)으로 구성되며, 각 속성은 객체의 특징이나 상태를 나타냅니다. 속성은 키(key)와 값(value)의 쌍으로 구성됩니다.자바스크립트 객체 선언:객체는 중괄호 {}를 사용하여 선언합니다. 각 속성은 쉼표로 구분되며, 키는 따옴표로 묶일 수 있습니다(하지만 필수는 아님).const 객체명 = { "속성명": 값, "속성명2": 값}; 자바스크립트 객체의 실용성객체는 데이터를 구조화하는데 매우 유용하며, 코드 내에서 다양한 데이터 타입을 하나의 변수로 관리할 수 있도록 해 줍니다.객체의 속성(Property)속성의 기본 구조..

표현식 expression표현식(Expression)은 자바스크립트에서 값으로 평가되는 코드의 일부입니다. 즉, 표현식은 어떤 값으로 평가될 수 있는 모든 코드 단위를 말합니다. 예를 들어, 숫자, 문자열, 연산자의 조합, 함수 호출, 객체 접근 등이 표현식이 될 수 있습니다.// 리터럴 표현식const number = 42; // 여기서 42는 숫자 리터럴 표현식입니다.// 문자열 리터럴 표현식const greeting = "Hello, World!"; // "Hello, World!"는 문자열 리터럴 표현식입니다.// 산술 표현식const sum = 10 + 32; // 10 + 32는 두 숫자를 더하는 산술 표현식입니다.// 함수 표현식const square = function(x) { re..

1. 원시 타입 (Primitive Types)원시 타입은 불변의 값으로, 값 자체가 변수에 저장됩니다.Number Type// Number 타입은 64비트 부동 소수점 형식으로 숫자를 저장합니다.let x = 0.1 + 0.2;console.log(x); // 출력: 0.30000000000000004, 부동소수점 연산의 예// 특수 숫자 값console.log(1 / 0); // Infinityconsole.log("not a number" / 2); // NaN, Not a NumberBigInt Type// BigInt는 아주 큰 정수를 다룰 수 있습니다.const hugeNumber = BigInt(9007199254740991);console.log(hugeNumber + 1n); // 900..

*브라우저 개발자 도구 개요1. 콘솔(Console)목적: 스크립트 에러를 확인하고, JavaScript 코드를 실행하여 결과를 즉시 볼 수 있게 해줌.핵심 기능: 코드 실행, 로그 확인, 디버깅.2. 소스(Source)목적: 페이지에 적용된 JavaScript, CSS, HTML 소스 코드를 확인하고 디버깅.핵심 기능: 중단점 설정, 코드 단계별 실행, 스코프 확인.JavaScript 언어의 특징1. 동적 타입(Dynamic Types)설명: 변수의 타입은 런타임에 결정되며, 값에 따라 자동으로 타입이 추론됨.명시적 타입 변환의도적 타입 변환// 숫자를 문자열로 변환let num = 123;let str = String(num); // '123'으로 변환console.log(str); //..

레이아웃 설정Display 속성block, inline: 요소의 표시 유형 설정.none: 요소가 문서에 존재하지 않는 것처럼 처리.Visibility 속성요소를 보이거나 (시각적으로만)숨기되, 레이아웃에서 공간을 차지.Float 속성요소를 좌우측으로 배치하여 레이아웃의 흐름(위에서 아래로 만 가능)에서 벗어나게 함.left,right값 사용 *Position 속성static, relative, absolute, fixed, sticky: 요소의 문서 내 위치를 결정하고, 필요한 경우 위치 조정. This div is positioned static. This div is positioned relative. This div is positioned absolute. This div..

CSS 기본 이해CSS는 "Cascading Style Sheets"의 약자로, 웹 문서의 스타일을 정의하는 언어입니다. CSS를 사용하면 HTML 요소의 배경 색상, 글꼴, 여백 등을 조정할 수 있습니다.CSS 적용 방법내부 CSS: HTML 문서의 태그 안에 태그를 사용하여 작성합니다.외부 CSS: 별도의 .css 파일을 생성하고 HTML 문서에서 링크합니다.(가장 많이 사용함)인라인 CSS: HTML 태그의 style 속성에 직접 스타일을 작성합니다. 유지보수가 어렵기 때문에 지양하는 것이 좋습니다.CSS 선택자CSS에서 선택자는 스타일을 적용할 HTML 요소를 결정하는 데 사용됩니다.기본 선택자전체 선택자 (*): 모든 HTML 요소에 스타일을 적용합니다.(사용에 주의)태그 선택자: 특정 태그..

1.HTML 두번째제목 태그 (Headings)h1부터 h6까지 제목 태그는 문서의 구조를 나타냅니다.h1 태그는 페이지 당 한 번만 사용하는 것이 좋습니다.제목 태그는 순서대로 사용하여 문서의 계층 구조를 명확히 해야 합니다.텍스트 서식 태그 태그: 텍스트에 취소선을 추가합니다. 태그: 삭제된 텍스트를 나타내며, 취소선이 자동으로 적용됩니다. 태그: 새로 추가된 텍스트를 나타내며, 밑줄이 자동으로 적용됩니다.하이퍼링크 (Anchor Tag) 태그의 target 속성을 사용하여 링크된 문서가 어디에 표시될지 지정합니다.멀티미디어 태그와 태그를 사용하여 이미지나 동영상에 캡션을 추가합니다. 태그와 태그를 사용하여 다양한 소스의 비디오를 포함할 수 있습니다. 태그는 소리 파일을 임베드하며, control..

1.인라인 요소 (Inline Elements)인라인 요소는 문서의 흐름을 방해하지 않고 텍스트 라인 내에서 콘텐츠를 포함합니다. 이 요소들은 주변 내용과 함께 같은 라인에 위치하고, 필요한 만큼의 너비만 차지합니다. 대표적인 인라인 요소로는 , , , , 등이 있습니다. 예를 들어, 태그는 하이퍼링크를 만들 때 사용되며, 텍스트의 흐름을 방해하지 않습니다.2.블록 요소 (Block Elements)반면에 블록 요소는 새로운 라인에서 시작되며, 가능한 많은 너비를 차지하려고 확장합니다. 이들은 주로 구조적 목적으로 사용되며, 섹션을 나누거나 주요 구성 요소를 정의하는 데 사용됩니다. 대표적인 블록 요소로는 , , ~, , , 등이 있습니다. 예를 들어, 는 웹 페이지를 여러 섹션으로 나누는 데 자주..