HighLight in your life~

(스프링부트 동영상)Spring Boot 한번 알아보세요~(자바교육/스프링교육/자바/JAVA교육/스프링동영상/자바동영상/자바강의/스프링강의/JAVA동영상)

https://youtu.be/cOH-DVAuBes?list=PLxU-iZCqT52Bihgf3v1bg5xEYeCwFQ_Zz

스프링, 마이바티스,오라클연동게시판실습(1)_스프링5, MyBatis3.5, Oracle12.2 로그인, 게시판 실습(자바교육/스프링교육/자바/JAVA교육/스프링동영상/스프링강의)

https://youtu.be/Pn4k4PSewxw

MyBatis 개념과 세팅및 사용법

https://youtu.be/eMuFWW6-8i0

자바 스프링 DataSource Mybatis 연결과정

https://youtu.be/dMriz1HFr-E

[ Java 취업 #101 ] JSP #19 - oracle+mybatis 상품관리(관리자 로그인, 상품 등록,수정,삭제,상세, 회원 로그인, 장바구니 기능)

https://youtu.be/bepiioZDUN8

Webjjang Spring 08-07 board - JDBC - Spring Mybatis 흐름 정리와 글쓰기(웹짱과 함께하는 스프링)

https://youtu.be/y_wNLIVHpNg

스프링 게시판 강의 CHAPTER 2. - 스프링 프로젝트에 Oracle 및 Mybatis 연결방법 [사케누]

https://youtu.be/WdgDWbLCOUg

Spring Framework 5.4, MyBatis 3.5.5, Oracle 19g 연동하기 - 5가지 방법

https://youtu.be/WYjVmIplNyI

Spring Framework 5.4, Mybatis 3.5.5, Oracle 19g, XML설정 및 Java맵핑

https://youtu.be/h4ERkEnfm-k

Spring 09장 1 MyBatis 설명 및 스프링 환경 설정

https://youtu.be/KqGoPSr7nn0

------------------------------------------------------------------------------------------------------

[ Java 취업 #72 ] 자바와 Oracle 연동 - 트랜잭션 처리 방법
 https://youtu.be/Ehf_dkd-uhg?list=PLY9pe3iUjRrTzLoSTml9hPxL5kp0qC3SP

[ Java 취업 #71 ] 자바와 Oracle 연동 - 부서정보, 사원정보 테이블 실습
 https://youtu.be/vZomN8aLnIw?list=PLY9pe3iUjRrTzLoSTml9hPxL5kp0qC3SP

사회생활 할 때, 어떤 언어를 사용해서 개발을 했었습니다.

pdf로 되어 있는 refman이라고 해서... reference manual 이라는 메뉴얼을 통해서 도움을 많이 받았습니다.

그런데 자바스크립트를 공부하면서 메뉴얼 사이트에 대한 의문을 많이 갖었습니다.

아래와 같이 자바스크립트에 대한 Referecne 사이트를 발견하였습니다.

https://www.w3schools.com/jsref/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
https://developer.mozilla.org/en-US/docs/Web/JavaScript

궁금한 것이 있으면 구글링도 좋지만, 위의 사이트를 통해 검색해보는 것도 정말 도움 받을 것 같아서 기분이 좋습니다.

1. 객체
- 프로그램에서 인식할 수 있는 모든 대상
- 데이터를 저장하고 처리하는 기본 단위

2. 자바스크립트 객체
- 자바스크립트 안에 미리 객체로 정의해 놓은 것
- 문서 객체 모델(DOM): 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등을 모두 별도의 객체로 관리
- 브라우저 관련 객체: 웹 브라우저 정보를 객체로 관리
- 내장 객체: 웹 프로그래밍에서 자주 사용하는 요소를 객체로 정의해 놓음

3. 사용자 정의 객체
- 필요할 때마다 사용자가 직접 만드는 객체

4. 객체의 인스턴스 만들기
- 객체는 객체 자체가 아니라 인스턴스 형태로 만들어서 사용
- 인스턴스: 객체를 틀처럼 사용해서 같은 모양으로 찍어낸 것

(예시) new 객체명
(예시) Date 객체의 인스턴스를 만들어서 날짜와 시간 표시하기
var now = new Date();
document.write("현재 시각은 " + now);

5. 참고 URL
https://developer.mozilla.org/en-US/docs/Web/Javascript

Javascript Function을 사용하는 몇 가지 방법을 정리해 보았습니다.

아래의 첨부파일과 같이 크게 4가지 정도로 자바스크립트에서 펑션을 사용할 수 있습니다.

while문 : 조건을 체크하고 true이면 괄호안의 명령을 계속 실행한다.

Javascript에서 정해진 숫자만큼 반복하기 위해서 아래의 for문을 사용합니다.

1. 논리연산자

1. 그리드 레이아웃
 - 반응형 웹 디자인에서 웹 문서 요소를 배치하는 기준
 - 웹 사이트 화면을 여러 개의 컬럼으로 나눈 후 웹 요소를 배치
 - 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있음

2. 그리드 레이아웃의 특징
 - 시각적으로 안정된 디자인
 - 업데이트가 편한 웹 디자인 구성
 - 요소를 자유롭게 배치

3. 그리드 레이아웃을 만드는 방법
 1) 플렉스 박스 레이아웃(플렉서블 박스 레이아웃)
  - 수평 방향이나 수직 방향 중 하나를 주축으로 정하고 박스를 배치
  - 여유 공간이 생길 경우 너비나 높이를 적절하게 늘리거나 줄일 수 있음

 2) CSS 그리드 레이아웃
 - 최근에 등장한 CSS표준
 - 수평 방향이나 수직 방향 어디로든 배치 가능
 - 마치 레고 블록을 끼워 맞추듯 요소를 배치할 수 있음

4. Flexbox 관련 사이트

http://flexboxfroggy.com/#ko
http://www.flexboxdefense.com

5. CSS Grid Layout Module Level 1

URL : w3.org/TR/css-grid-1

1. 반응형 웹 디자인
 - 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법
 - 다양한 화면 크기의 모바일 기기들이 계속 쏟아져 나오는데 그 때마다 그 크기에 맞춘 사이트를 별도로 제작하는 것은 비효율적
   => 화면 크기에 '반응'해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인

2. 모바일 기기를 위한 뷰포트(viewport)
 - 뷰포트 : 실제 내용이 표시되는 영역
 - PC화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문에 모바일 화면에서의 의도한대로 표시되지 않음
   => 뷰포트를 지정하면 기기 화면에 맞춰 확대/축소해서 내용 표시

SCREEN DIMENSIONS
Popular Devices Viewport Size

https://yesviz.com/devices.php

이번 장은 가장 중요한 듯 하다. 화면 구성에 많은 도움을 받을 수 있을 듯 하다.

특히, 첨부파일에 매우 중요하다. 개인적으로 공부를 하다 보니 이번 장이 가장 도움을 받는 듯 하면서, 유용한 듯 하다.

link, visited, hover, active 등 순서지켜서 지정해줘야 한다.