본문 바로가기
반응형

분류 전체보기276

[웹 디자인] 2일차: HTML 텍스트 관련 요소 HTML 텍스트 관련 요소HTML에는 다양한 텍스트 관련 요소가 있습니다. 이 요소들은 문서의 제목, 단락, 강조, 인용문 등을 정의하는 데 사용됩니다.제목 요소HTML에는 여섯 가지 수준의 제목 요소가 있습니다. 제목 요소는 문서의 구조를 정의하고, 검색 엔진 최적화(SEO)에도 중요한 역할을 합니다.: 최상위 제목 요소. 일반적으로 문서나 섹션의 주요 제목으로 사용됩니다.: 두 번째 수준의 제목 요소.: 세 번째 수준의 제목 요소.: 네 번째 수준의 제목 요소.: 다섯 번째 수준의 제목 요소.: 여섯 번째 수준의 제목 요소. 일반적으로 가장 낮은 중요도를 가집니다.예제:제목 1제목 2제목 3제목 4제목 5제목 6단락 요소단락 요소는 일반적인 텍스트 블록을 정의합니다.: 단락을 정의하는 요소입니다.예제.. 2024. 8. 2.
[JavaScript 프레임워크] 2일차: Vue.js 기초 이해하기 2. Vue.js 기초Vue.js란 무엇인가?Vue.js는 사용하기 쉬운 프런트엔드 프레임워크로, 단일 페이지 애플리케이션(SPA) 개발에 적합합니다. React와 마찬가지로 컴포넌트 기반의 사용자 인터페이스를 구축할 수 있으며, 반응성(Reactivity)을 통해 동적인 웹 애플리케이션을 쉽게 만들 수 있습니다.Vue.js 설치 및 프로젝트 설정Vue.js 프로젝트를 설정하기 위해, Vue CLI를 사용합니다.Vue CLI 설치npm install -g @vue/cli 새로운 Vue 프로젝트 생성vue create my-vue-appcd my-vue-app 프로젝트 폴더 구조는 다음과 같습니다.my-vue-app/├── node_modules/├── public/├── src/│ ├── assets.. 2024. 8. 2.
[JavaScript 프로젝트 시리즈] 2일차: JavaScript로 날씨 API를 이용한 날씨 앱 만들기 2. 날씨 API를 이용한 날씨 앱 만들기프로젝트 개요이번 프로젝트에서는 JavaScript와 외부 날씨 API를 사용하여 날씨 정보를 제공하는 간단한 날씨 애플리케이션을 만들어보겠습니다. 사용자는 도시 이름을 입력하여 해당 도시의 현재 날씨 정보를 확인할 수 있습니다.준비물HTMLCSSJavaScriptOpenWeatherMap API (https://openweathermap.org/api)단계 1: OpenWeatherMap API 키 발급OpenWeatherMap 웹사이트(https://openweathermap.org/api)에 가입합니다.API 키를 발급받습니다.단계 2: 기본 HTML 구조 만들기먼저, 날씨 앱의 기본 HTML 구조를 만듭니다. Weather App .. 2024. 8. 2.
[JavaScript 최신 기능 시리즈] 2일차: JavaScript 템플릿 리터럴 이해하기 2. 템플릿 리터럴템플릿 리터럴이란 무엇인가?템플릿 리터럴(Template Literal)은 ES6에서 도입된 새로운 문자열 표기법으로, 백틱(backtick, `)을 사용하여 문자열을 정의합니다. 템플릿 리터럴은 문자열을 더 쉽게 조작할 수 있는 기능들을 제공합니다.템플릿 리터럴의 기본 사용법템플릿 리터럴은 백틱(``)을 사용하여 문자열을 감쌉니다.let greeting = `Hello, World!`;console.log(greeting); // 출력: Hello, World!문자열 내 변수 삽입 (Interpolation)템플릿 리터럴을 사용하면 문자열 내에서 변수와 표현식을 쉽게 삽입할 수 있습니다. 변수와 표현식을 ${}로 감싸서 사용합니다.let name = 'Alice';let messag.. 2024. 8. 2.
[JavaScript 심화 시리즈] 2일차: JavaScript의 this 키워드 이해하기 2. this 키워드 이해하기this 키워드란 무엇인가?this 키워드는 JavaScript에서 함수가 호출될 때 설정되는 특수한 객체를 참조합니다. this의 값은 함수가 어떻게 호출되었는지에 따라 결정됩니다.기본적인 this의 사용1. 전역 컨텍스트에서의 this전역 컨텍스트에서 this는 전역 객체를 참조합니다. 브라우저 환경에서는 window 객체를 가리킵니다.console.log(this); // 출력: [object Window]2. 객체 메서드에서의 this객체의 메서드에서 this는 그 메서드를 소유한 객체를 참조합니다.let person = { name: 'Alice', greet: function() { console.log('Hello, ' + this.name); }};.. 2024. 8. 2.
[JavaScript 기초 시리즈] 2일차: JavaScript 변수와 자료형에 대해 알아보자 2. 변수와 자료형변수란 무엇인가?변수는 데이터를 저장하기 위한 이름이 붙은 저장소입니다. JavaScript에서는 var, let, const 키워드를 사용하여 변수를 선언할 수 있습니다.변수 선언 방식1. varvar는 ES6 이전에 사용되던 변수 선언 방식입니다. 함수 스코프를 가지며, 중복 선언이 가능합니다.var name = 'JavaScript';console.log(name); // 출력: JavaScriptvar name = 'ECMAScript';console.log(name); // 출력: ECMAScript 2. letlet은 블록 스코프를 가지며, 중복 선언이 불가능합니다. ES6에서 도입되었습니다.let age = 25;console.log(age); // 출력: 25// l.. 2024. 8. 2.
[코딩 테스트] 1일차: 변수와 데이터 타입 변수와 데이터 타입코딩 테스트에서 가장 기본이 되는 부분은 변수와 데이터 타입입니다. 변수는 데이터를 저장하는 공간이며, 데이터 타입은 변수에 저장되는 데이터의 종류를 의미합니다.변수 선언변수를 선언하는 방법은 사용하는 언어에 따라 다릅니다. 여기서는 JavaScript와 Python을 예로 들어 설명합니다.JavaScript에서의 변수 선언JavaScript에서는 var, let, const 키워드를 사용하여 변수를 선언합니다.var: 함수 스코프를 가지며, 선언하기 전에 사용할 수 있습니다(호이스팅).let: 블록 스코프를 가지며, 선언하기 전에 사용할 수 없습니다.const: 블록 스코프를 가지며, 선언과 동시에 초기화되어야 합니다. 이후 변경할 수 없습니다.var x = 5;let y = 10;c.. 2024. 8. 1.
[JavaScript 문법] 1일차: JavaScript 소개 및 설정 JavaScript란?JavaScript는 웹 페이지를 동적으로 만들기 위해 사용되는 프로그래밍 언어입니다. HTML과 CSS와 함께 웹의 핵심 기술 중 하나로, 클라이언트 측 스크립팅을 통해 사용자와의 상호작용을 가능하게 합니다.JavaScript의 역사JavaScript는 1995년 Brendan Eich가 넷스케이프(Netscape) 브라우저를 위해 개발한 언어입니다. 이후 ECMA 국제 표준화 기구에서 표준화되어 ECMAScript(ECMA-262)라는 이름으로 발표되었습니다. 현재 최신 버전은 ECMAScript 2022(ES13)입니다.JavaScript 환경 설정JavaScript를 작성하고 실행하기 위해 필요한 환경을 설정합니다.1. 브라우저 콘솔 사용모던 브라우저는 모두 JavaScrip.. 2024. 8. 1.
[웹 디자인] 1일차: HTML 소개 및 기본 구조 HTML이란 무엇인가?HTML(하이퍼텍스트 마크업 언어)은 웹 페이지를 작성하는 데 사용되는 마크업 언어입니다. 웹 페이지의 구조를 정의하고 콘텐츠를 표시하는 데 사용됩니다. HTML은 태그를 사용하여 문서의 각 부분을 나타냅니다.HTML의 역사1991년: 팀 버너스 리(Tim Berners-Lee)가 처음으로 HTML을 제안하고 개발1995년: HTML 2.0 표준이 발표됨1997년: HTML 3.2 및 HTML 4.0 표준이 발표됨2014년: HTML5 표준이 발표되어 현재까지 사용됨기본 문서 구조HTML 문서는 기본적으로 다음과 같은 구조를 가집니다: Hello, World! This is a simple HTML document.: 문서 타입 선언으로, HTML5 문서임을 나타냅니다.: HTM.. 2024. 8. 1.
[JavaScript 프레임워크] 1일차: React 기초 이해하기 1. React 기초React란 무엇인가?React는 Facebook에서 개발한 UI 라이브러리로, 컴포넌트 기반의 사용자 인터페이스를 구축하는 데 사용됩니다. React는 효율적인 상태 관리를 통해 동적이고 반응성 있는 웹 애플리케이션을 쉽게 만들 수 있도록 도와줍니다. React 설치 및 프로젝트 설정React 프로젝트를 설정하기 위해, Node.js와 npm이 필요합니다. 프로젝트를 생성하고 설정하는 방법은 다음과 같습니다. Node.js와 npm이 설치되어 있는지 확인합니다.node -vnpm -v Create React App을 사용하여 새로운 React 프로젝트를 생성합니다.npx create-react-app my-react-appcd my-react-app 프로젝트 폴더 구조는 다음과 같습.. 2024. 8. 1.
반응형

티스토리툴바