JiYoung Dev 🖥

🎈 사용자로부터 입력받은 값 가져오기 input, select, textarea 같이 입력받은 값을 가져오기 위해서는 value 속성을 사용해야 함 클릭 innerTEXT로는 값을 받아 올 수 없음 why? innerTEXT는 시작태그와 끝태그 사이의 콘텐츠를 받아오는 것이므로 📖 input 실습 입력한 값을 h1태그로 출력해보기 h1태그 출력 Question. 변수에 .value 속성 추가시 발생하는 문제 입력한 값을 h1태그로 출력해보기 h1태그 출력 let inputVal = document.getElementById('inputTag').value; 위와 같이 변수 지정시 inputVal = ''; 제대로 작동하지 않음 inputVal에 할당된 값은 해당 요소의 현재 값을 복사하는 것입니다. 그러..

🎈 MVC 패턴 Model. View, Controller로 이루어진 소프트웨어 디자인 패턴 🎈 추상 클래스 구체적이지 않은 추상적인 데이터를 담고 있는 클래스 자신의 기능들을 하위 클래스로 확장 비슷한 클래스가 여러개 생길 수 있다고 가정 중복 멤버 통합에 사용 - 각 클래스에 똑같은 변수가 있을 때 명확한 계층 구조가 필요할 때 🎈 인터페이스 객체의 내부 구현에 상관없이, 원하는 메소드만 호출하고 결과값을 받을 수 있는 상호작용 기능 🎈 게임만들기 프로젝트 DAO vs DTO vs VO 차이점 1. DAO(Data Access Object) DB의 data에 접근하기 위한 객체 직접 DB에 접근하여 데이터를 삽입, 삭제, 조회 등 조작할 수 있는 기능 수행 MVC패턴의 Model에서 수행 2. DTO..

🎈 DOM (Document Object Model) HTML 문서의 요소에 접근하여 제어할 수 있도록 객체로 모델링 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공 문서 객체 모델(DOM)은 HTML, XML 문서의 프로그래밍 인터페이스임. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 도움. 웹페이지는 일종의 문서(document)임. 이 문서는 웹브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타남. 📖 HTML 문서의 트리구조 Document 객체는 웹 페이지 그 자체를 의미함. 웹 페이지에 존재하는 HTML 요소에 접근하..

🎈 자바스크립트 객체(object) 여러 속성(property)을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입 데이터(속성)과 그 데이터에 관련되는 동작(절차, 방법, 기능)을 모두 포함한 개념 자바스크립트의 기본 타입(data type)은 객체(object) 객체란 이름(name 혹은 key)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합 프로퍼티의 값으로 함수가 올 수 있도 있음 (이를 메소드라고 함) 자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체 📖 객체의 기본 구조 📖 객체의 생성과 접근 및 수정 // 객체 : 여러 데이터를 하나의 변수에 저장할 수 있는 데이터 타입 // 구조 -> {key1 : value1, ke..

🎈 어제 배운 내용 정리 Box Model - Content : 내용 - Padding : 안쪽 여백 - Border : 경계선 - Margin : 바깥 여백 Box-Sizing 1. content-box (default) : content 만큼만을 크기로 삼는 2. border-box : border까지를 크기로 삼는 => 나는 패딩값은 주고 싶지만, 전체적인 크기에는 영향을 주고 싶지 않을 때 사용! border-box Border-Radius - 테두리를 둥글게 만들어주는 속성 border-위/아래-좌/우-radius Flex Box - Container와 Item 을 나누는 작업이 먼저 - Item : 내가 움직이고자 하는 요소 - Container : 아이템의 부모요소 a. container에 ..

[홈페이지 무료 템플릿 사이트] https://html5up.net/ https://bootstrapthemes.co/items/free-bootstrap-templates/ https://themewagon.com/theme_tag/free/ https://all-free-download.com/free-website-templates/ https://startbootstrap.com/ https://freewebsitetemplates.com/ https://tympanus.net/codrops/ [다양한 아이콘 가져오는 사이트] https://fontawesome.com/ 폰트어썸 - Font Awesome 아이콘 사용법 폰트어썸(fontawesome)이용하기 폰트어썸 사용법에 대해 알아봅니다. 폰..

🎈 박스 모델(box model) 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부름 → 박스는 공간 효율성이 좋기 때문 요소의 부피감을 결정하는 개념 박스모델은 HTML 요소를 패딩(padding), 마진(margin), 그리고 내용(content)으로 구분 1. 내용(content) 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 2. 패딩(padding) 내용과 테두리 사이의 간격 (눈에 보이지 않음) 3. 테두리(border) 내용과 패딩 주변을 감싸는 테두리 4. 마진(margin) 테두리와 이웃하는 요소 사이의 간격 (눈에 보이지 않음) 🎈 마진(margin) 테두리를 기준으로 요소의 바깥 여백 지정 background-color 속성으..

🎈 배열 실습 🎈 함수 특정 기능을 수행하는 소스 코드를 하나로 묶어 필요할 때마다 호출하여 사용하기 위한 구조 // 함수 : 특정 기능을 수행하는 소스 코드를 하나로 묶어서 // 필요할 때마다 사용하기 위한 구조 // 함수 선언 function intro() { console.log('안녕하세요. 저는 신지영입니다👩'); } // 함수 호출 intro(); // 매개변수 function lunch(menu) { console.log(`점심으로는 ${menu} 먹었습니다🥰`); } lunch('가츠동'); // 매개변수 + return문 function dinner(menu){ return `저녁으로는 ${menu} 먹을 거에요!😸`; } console.log(dinner('라면')); 위와 같이 함수를..

🎈 자바스크립트 반복문 실습 for문 실습 // 1. 사용자로부터 시작 숫자와 마지막 숫자를 입력 받는다. // 1-1. 입력창을 입력 : prompt ** 리턴타입 String // 1-2. String -> Number : 형변환 // 1-3. 어딘가에 저장 : 변수 let startNum = Number(prompt('시작할 숫자를 입력하시오.')); let endNum = Number(prompt('마지막 숫자를 입력하시오.')); // 2. 시작~마지막 숫자까지의 합을 구한다. let sum = 0; for(let i = startNum ; i > sum 출력 console.log(`${startNum}부터 ${endNum}까지의 합은? >> ${sum}`); while문 실습 자바스크립트에서 ..

코드 작성시 주석 작성을 통해 다른 사람이 코드를 보아도 이해하기 쉽도록 할 것! 🎈 CSS 📖 CSS(Cascading Style Sheets)란? HTML문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어 (프로그래밍 언어X, 마크업 언어X, 스타일 시트 언어O) Cascading(캐스케이딩)은 폭포, 위에서 아래로 쏟아지는 뜻을 가진 단어로 같은 요소에 여러 개의 스타일이 중복되었을 때 스타일 우선순위와 상속을 통해 어떤 스타일을 적용할지 결정한다는 의미 📖 왜 CSS를 따로 만들었을까? HTML만으로 웹페이지를 제작하는 경우 HTML 요소의 세부 스타일을 일일이 지정해야 함. 이 작업은 매우 많은 시간이 걸리며, 완성한후에도 스타일의 변경 및 유지 보수가 어려움. → 정보 표현(HTML)과 디자인..