728x90 반응형 FE13 HTML 실습 🔷 개요What : HTML 실습When : 2022.11.30Why : HTML 내용 익히기 위해How : 부스트코스 인강 수강 ➡ Atom 이용 실습 ➡ 생활코딩 보며 복습 ➡ velog 정리 / Git 저장📌 HTML 참고 사이트1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element2. http://html5doctor.com/element-index/3. https://www.w3schools.com/tags/default.asp🔷 실습환경 준비1) Atom 설치Atom2) New Folder 및 New File 생성3) 웹페이지 열기파일 열기 : ctrl + A + O다른 컴퓨터에 저장된 웹페이지를 열고 싶을때 ➡ 주소 입력)웹브라우저와.. 2025. 4. 11. HTML 📒 HTML📕 환경설정1. node.js 설치설치 확인node -vnpm -v2. vscode (개발 툴) 설치extemsion 설치HTML CSS SupportHTML to CSS autocompletionAuto Rename TagAuto Close TaghtmltahwrapLive ServerHighlight Matching Tagpx to remHTML End Tag LablesStylelint📕 웹(Web)1. World-Wide-Web (WWW)인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 정보 공간인터넷은 통신망이고, 웹은 그 위에서 동작하는 서비스 (인터넷과 유사하나 다름)🗒️ 예시 : telnet, FTP, e-mail 등 서비스2. 웹 특징사용자가 웹에 접속하면 .. 2025. 4. 11. CSS 📒 CSS📕 CSS (Cascading Style Sheets)1. CSS 문법1) 문법 형식선택자와 선언부로 구분선택자 : CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성한 영역 (속성 : 값으로 구성)2) 주석/* */ 주석웹 브라우저에서 소스 보기로 보면 주석 내용 노출2. CSS 적용1) internal 스타일적용하려는 태그가 포함된 html 파일에서 사용HTML 파일 내부에 CSS 코드를 작성HTML 제공하는 style 태그의 콘텐츠로 CSS 코드 작성 (head 태그 안에 위치)형식 : 2) external 스타일html 파일과 다른 파일에서 css 적용 (*.css 외부 파일 사용)CSS 코드를 작성하는 별도 파일을 만들.. 2025. 4. 11. JavaScript 📒 JavaScript📕 JavaScript1. JavaScript 개념1) 개요모든 웹 브라우저가 같은 JavaScript를 사용하지 않음유럽 컴퓨터 제조회사(ECMA)에서 ECMAScript 이름으로 표준화2) 특징동적인 웹 애플리케이션 개발 가능웹 문서를 동적으로 바꿈사용자가 입력한 폼 데이터의 유효성 검사 기능HTML5의 대부분 기능이 자바스크립트 활용웹 페이지를 위한 스크립트 언어node.js처럼 비브라우저 환경도 사용웹 브라우저에서 실행하면 브라우저에 내장된 자바스크립트 엔진에서 실행됨3) 사용 방법1️⃣ : Body 태그 내의 임의의 위치📋 코드 📋Helloworld📋 실행 📋2️⃣ : Head 태그 내📋 코드 📋Helloworld📋 실행 📋3️⃣ : Body 태그 내의 마.. 2025. 4. 11. jQuery 📒 jQuery📕 jQuery1. jQuery 개념모든 브라우저에서 동작하는 자바스크립트 라이브러리제작 목표DOM과 관련된 처리 쉽게 구현일관된 이벤트 연결 쉽게 구현시각적 효과 쉽게 구현Ajax 애플리케이션 쉽게 구현특징CSS 선택자 기반의 DOM 처리가 가능하여 기존 JavaScript와 비교할 때 매우 쉽고 동적인 화면 처리 가능ajax 애플리케이션 개발이 쉬움한꺼번에 다른 동작을 처리하는 함수를 연결하여 사용하는 '메서드 체인' 기능 효과적으로 사용오픈 소스로 무료로 사용 가능다양한 jQuery 플러그인 사용 가능웹 브라우저 종류와 상관없이 개발 가능한 크로스 브라우징 가능2. jQuery 문법1) 기본 문법문자는 jQuery를 선언하거나 접근할 때 사용문자는 jQuery문자의 별칭(alias.. 2025. 4. 11. Vue.js (CDN) 📒 Vue.js📕 Vue.js 기본1. Vue.js1) 개념Evan You가 2013년에 발표한 Front-end JavaScript frameworkAngular와 React 장점만 가진 프레임워크SPA(Single Page Application) 목적의 프레임워크Vue-CLI : Vuejs 프로젝트(코드, 디렉토리 구조)를 생성 해주는 라이브러리CRA(Create Project App) : ReactJS 프로젝트(코드, 디렉토리 구조)를 생성 해주는 라이브러리Vite : 다양한 JS(TS) 프로젝트를 생성해주는 라이브러리2) 특징JS 컴파일러가 필요함Babel 은 javascript 컴파일러 변환하는 이유는 브라우저 호환성을 위해서 ES6 => ES5 로 transform (변환) 해서 배포Bun.. 2025. 4. 11. Vue.js (CLI, To Do List) 📒 Todo App📕 Vue Project1. 프로젝트 생성1) 프로젝트 구조2) App 작성 순서2. 프로젝트 초기 설정1) index.html 수정반응형 웹 태그 설정viewport meta tag 추가awesome 아이콘 CSS 설정font awesome cdn 검색favicon 설정Vue에서 제공하는 기본 로고 사용google ubuntu 폰트 사용📋 public/index.html 📋favicon.ico"> 2) App.vue 수정루트 컴포넌트📋 src/App.vue 📋 3. 컴포넌트 생성src/compenents 폴더에 생성TodoHeader.vue (어플리케이션 제목 표시)TodoInput.vue (할 일 입력 및 추가)TodoList.vue (할 일 목록 표시 및 삭제)T.. 2025. 4. 10. FE - HTML, CSS, Vue 미션 📒 HTML📕 HTML 미션문제1. table📋 코드 📋 html> head> meta charset="UTF-8"> title>table 태그 실습title> head> body> table border='1'> tr> td rowspan="5">솔루션 지원정책td> td>판매상품td> td>무제한td> td>이미지호스팅td> td>신청시 설치비 무료td> tr> tr> td>트래픽 용량td> td>무제한td> td>디스크 용량td> td>1gb 무료td> tr> tr> td>ftp계정지원td> td>무료이용power1td> td>웹ftp프로그램td> td>무료제공td> tr> tr> td>게시판 생성td> td>무제한td> td>파워메일td> td>무료 1,000통td> tr> tr> td>웹.. 2025. 4. 10. FE - JS, jQuery 미션 📒 JavaScript📕 JS 미션1문제1. var 변수📋 코드 📋문제2. parseInt📋 코드 📋문제3. 나머지 (%)📋 코드 📋문제4. isNaN, if문📋 코드 📋 html> head> meta charset="UTF-8" /> title>Insert title heretitle> script type="text/javascript"> var value = prompt("1.정수값을 입력하시오."); if (isNaN(value)) { alert("입력한 값이 숫자가 아닙니다!"); }else { var int_value = Number(value); if(int_value 1 && int_value > 100 ){ alert(" 값은 1 ~ 100 사이의 값만 가능합니다!").. 2025. 4. 10. 한입 크기로 잘라 먹는 리액트 (React.js) 📒 한입 크기로 잘라 먹는 리액트 (React.js)📕 JavaScript 기본1. 변수와 상수변수프로그램이 실행되는 도중 계속 바뀌는 값을 저장선언let age = 25; // 중복 선언 허용Xvar age = 25; // 중복 선언 가능const age - 25; // 상수 선언 (값 수정 불가)2. 자료형과 형 변환Primitive Data Type (원시 타입)Number : 숫자형String : 문자형BooleanUndefinedNull➡️ 한 번에 하나의 값만 가질 수 있음, 하나의 고정된 저장 공간 이용Non-Primitive Data Type (비 원시 타입)ObjectArrayFunction➡️ 한 번에 여러 개의 값을 가질 수 있음, 여러 개의 고정되지 않은 동적 공간 사용let a.. 2025. 4. 10. MUI (Material-UI) 📒 MUI📕 MUI (Material-UI)1. 개념React UI를 만들 때 도움을 주는 라이브러리Google에서 만든 플랫 디자인 기반의 디자인 시스템Material Design 구현 라이브러리라이브러리 연동 후 컴포넌트 사용하듯이 가져다 조립시 쉽게 디자인 가능반응형 웹 페이지를 디자인하는데 사용되는 라이브러리2. 설치MUI는 Emotion 라이브러리 기반으로 실행Emotion은 JavaScript를 가지고 CSS를 작성할 수 있도록 설계된 라이브러리npm install @mui/material @emotion/react @emotion/styled또는yarn add @mui/material @emotion/react @emotion/styled3. 사용MUI TemplateMUI Compone.. 2025. 4. 10. JavaScript - 개념 📂 JavaScript📌 자바스크립트 기능웹 사이트에 움직이는 효과만 주는 언어➡ 웹의 동적 기능 생성➡ 웹 브라우저에서 실행되는 프로그램 생성➡ 서버를 구성, 서버용 프로그램 생성 (Node.js 자바스크립트 프레임워크 사용)📌 자바스크립트 특징모든 웹 브라우저에서 작동 (JS 최신 문법을 웹 브라우저에서 즉시 사용하진 못함)웹 브라우저에서 실행 결과를 즉시 확인 가능풀스택 웹 개발 등 프로그램 생성자바스크립트 공개 API 사용 가능라이브러리, 프레임워크 사용 가능jQuery (자바스크립트 라이브러리) ➡ 웹 사이트 동적 개발Angular, View (자바스크립트 프레임워크)📌 자바스크립트 실행HTML 문서 안에 자바스크립트 소스 작성외부 스크립트 파일 연결자바스크립트를 따로 작성하여 HTML .. 2025. 4. 10. HTML 실습 🔷 개요What : HTML 실습When : 2022.11.30Why : HTML 내용 익히기 위해How : 부스트코스 인강 수강 ➡ Atom 이용 실습 ➡ 생활코딩 보며 복습 ➡ velog 정리 / Git 저장📌 HTML 참고 사이트1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element2. http://html5doctor.com/element-index/3. https://www.w3schools.com/tags/default.asp🔷 실습환경 준비1) Atom 설치Atom2) New Folder 및 New File 생성3) 웹페이지 열기파일 열기 : ctrl + A + O다른 컴퓨터에 저장된 웹페이지를 열고 싶을때 ➡ 주소 입력)웹브라우저와.. 2025. 4. 9. 이전 1 다음 728x90 반응형
