firecurry_94.log

Thymeleaf

Fri, 20 Oct 2023 00:37:00 GMT

템플릿 엔진

템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서(응답 화면)를 출력하는 것
만들어둔 화면(html)에 데이터를 추가하여 하나의 html로 만들어서 응답 (JSP도 템플릿 엔진)

Thymeleaf
웹 및 독립 실행형 환경 모두를 위한 최신 서버 측 Java 템플릿 엔진
HTML 파일에서 th*Thymeleaf) 속성을 이용해 컨트롤러로 부터 전달받은 데이터를 이용해 동적 페이지를 만들 수 있음.

Spring Boot에서는 JSP가 아닌 Thymeleaf 사용을 권장하고 있음.

Thymeleaf 사용 준비

[Maven] - pom.xml


org.springframework.boot
spring-boot-starter-thymeleaf

[Gradle] - build.gradle

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf’

application.properties

# thymeleaf 접두사, 접미사 설정
#미작성 시 기본값
#spring.thymeleaf.prefix=classpath:/templates/
#spring.thymeleaf.suffix=.html

Thymeleaf 문법

th 속성을 사용하기 위해 선언된 네임스페이스 순수 HTML로만 이루어진 페이지의 경우, 선언하지 않아도 무관

Spring El

${key} : 변수, Model 등으로 전달된 데이터의 key 입력 시 value 풀력

Spring Boot

Mon, 16 Oct 2023 08:40:20 GMT

Spring Boot란?

Spring MVC Project 구성 시 필요했던 복잡한 환경 설정을 최소화 하여 개발자로 하여금 비즈니스 로직 구현에 집중할 수 있도록 하기 위해 개발됨
Spring Boot의 장점
내장된 서버(Tomcat 등)를 제공해서 war 배포 없이 독립 실행이 가능한 웹애플리케이션을 개발할 수 있음
Spring MVC Project처럼 Tomcat 서버를 Start 하는 것이 아닌 Java Project 처럼 main 메서드가 작성된 class를 Run해서 실행
자동으로 내장된 Tomcat 서버가 시작됨
다양한 Starter POM 파일을 제공해서 Maven, Gradle 등의 빌드 도구 구성, 라이브러리 관리를 간소화 함
Spring Starter를 이용해서 프로젝트를 생성 및 초기 설정을 간소화 함

Spring Framework

Tue, 10 Oct 2023 07:56:35 GMT

Library란?

라이브러리란 개발자가 만든 클래스들의 나열로, 다른 프로그램들에서 사용할 수 있도록 제공하는 방식이다.

Framework란?

개발자가 소프트웨어를 개발함에 있어 코드를 구현하는 개발 시간을 줄이고, 코드의 재사용성을 증가 시키기 위해 일련의 클래스 묶음이나 뼈대, 틀을 라이브러리 형태로 제공되는 것을 말한다.
제어의 역전 개념이 적용된 대표적인 기술이다.

Framework의 특징

개발자가 따라야 하는 가이드를 제공한다.
개발할 수 있는 범위가 정해져 있다.
개발자를 위한 다양한 도구, 플러그인들을 지원한다.

장점

개발 시간을 줄일 수 있음
정형화 되어 있어 일정 수준 이상의 품질을 기대할 수 있음
유지 보수가 쉬움

단점

너무 의존하면 개발자들의 능력이 떨어져서 스스로 직접 개발하는 것이 어려워짐
습득에 걸리는 시간이 오래 걸림

Framework의 종류

영속성 Framework 데이터의 저장, 조회, 변경, 삭제를 다루는 클래스 및 설정 파일들을 라이브러리화하여 구현한 프레임워크 (Mybatis, Hibernate)
자바 Framework Java EE를 통한 웹 어플리케이션 개발에 초점을 맞추어 필요한 요소들을 모듈화 하여 제공하는 프레임워크 (Spring Framework, Struts, 전자정부표준 - Spring)
화면 구현 Framework Front-End를 보다 쉽게 구현할 수 있게 틀을 제공하는 프레임워크 (Bootstrap, Foundation, MDL)
기능 및 지원 Framework 특정 기능이나 업무 수행에 도움을 줄 수 있는 기능을 제공하는 프레임워크 (Log4j, JUnit 5, ANT)

Spring Framework 개요

Spring Framework란?

자바 플랫폼을 위한 오픈 소스 애플리케이션 프레임워크로 간단하게 스프링(Spring)이라고도 불린다. 동적인 웹 사이트를 개발하기 위한 여러 가지 서비스를 제공하고 있으며 대한민국 공공기관의 웹 서비스 개발 시 사용을 권장하고 있는 전자정부 표준 프레임워크(Spring MVC Project 기반 프레임워크)의 기반 기술로서 쓰이고 있다.

Spring Framework의 특징

IOC (Inversion of Control) 제어 반전 컨트롤의 제어권이 개발자가 아니라 프레임워크에 있다는 뜻으로 객체의 생성부터 모든 생명주기의 관리까지 프레임워크가 주도하고 있다. 객체를 생성하고, 직접 호출하는 프로그램이 아니라, 만들어둔 자원을 호출해서 사용한다.
DI (Dependency Injection) 의존성 주입 설정 파일이나 어노테이션을 통해 객체간의 의존 관계를 설정하여 개발자가 직접 의존하는 객체를 생성할 필요가 없다.
POJO 기반 프레임워크 (Plain Old Java Object) J2EE, EJB와 같은 특정 기술이나 라이브러리의 내용을 상속받아 클래스를 구현하 지 않고 일반적인 기본 기능만을 가진 순수한 자바 객체를 의미한다. 특정 클래스에 종속되지 않으므로 자바의 객체지향적 설계가 쉬워지고, 코드길이 감소, 유지보수성 증가, 기존 Java API, 라이브러리 지원에 용이하다.
Spring AOP (Aspect Oriented Programming) 관점 지향 프로그래밍 트랜잭션, 로깅, 보안 등 여러 모듈, 여러 계층에서 공통으로 필요로 하는 기능의 경우 해당 기능들을 분리하여 관리한다.
Spring JDBC Mybatis나 Hibernate 등의 데이터베이스를 처리하는 영속성 프레임워크와 연결할 수 있는 인터페이스를 제공한다.
Spring MVC MVC 디자인 패턴을 통해 웹 어플리케이션의 Model, View, Controller 사이의 의 존 관계를 DI 컨테이너에서 관리하여 개발자가 아닌 서버가 객체들을 관리하는 웹 애플리케이션을 구축 할 수 있다.
PSA (Portable Service Abstraction) 스프링은 다른 여러 모듈을 사용함에 있어 별도의 추상화 레이어를 제공한다. 예 를 들어 JPA를 사용할 때에서 Spring JPA를 사용하여 추상화하므로 실제 구현에 있어서 Hibernate를 사용하든 EclipseLink를 사용하든 개발자는 이 모듈의 의존 없이 프로그램에 집중할 수 있다.

Spring의 구성 모듈

Data 접근 계층 JDBC나 데이터베이스에 연결하는 모듈로, Data 트랜잭션에 해당하는 기능을 담당하여 영속성 프레임워크의 연결을 담당한다.
Web 계층 (MVC / Remoting) Spring Framework에서 Servlet등의 웹 구현 기술과의 연결점을 Spring MVC 구성으로 지원하기 위해 제공되는 모듈 계층이다. 또한 스프링의 리모팅 기술로 RMI, Hessian, Burlap, JAX-WS, HTTP 호출자 그리고 REST API 모듈을 제공 한다.
AOP 계층 Spring에서 각 흐름 간 공통된 코드를 한 쪽으로 빼내어 필요한 시점에 해당 코드를 첨부하게 하기 위해 지원하는 계층으로, 별도의 proxy를 두어 동작한다. 이를 통해 객체간의 결합도를 낮출 수 있다.
Core Container Spring의 핵심 부분이라고 할 수 있으며 모든 스프링 관련 모듈은 이 Core Container 기반으로 구축된다. Spring의 근간이 되는 IOC 기능을 지원하는 영역을 담당하고 있다. BeanFactory를 기반으로 Bean 클래스들을 제어할 수 있는 기능을 지원한다.

Spring 모듈 정리

spring-beans 스프링 컨테이너를 이용해서 객체를 생성하는 기본기능을 제공
spring-context 객체생성, 라이프 사이클 처리, 스키마 확장 등의 기능을 제공
spring-aop AOP 기능을 제공
spring-web REST 클라이언트 데이터 변환 처리, 서블릿 필터, 파일 업로드 지원 등 웹 개발에 필요한 기반 기능을 제공
spring-webmvc 스프링 기반의 MVC 프레임워크, 웹 애플리케이션을 개발하는데 필요한 컨트롤러, 뷰 구현을 제공
spring-websocket 스프링 MVC에서 웹 소켓 연동을 처리할 수 있도록 제공
spring-oxm XML과 자바 객체간의 매핑을 처리하기 위한 API 제공
spring-tx 트랜잭션 처리를 위한 추상 레이어를 제공
spring-jdbc JDBC 프로그래밍을 보다 쉽게 할 수 있는 템플릿 제공
spring-orm Hibernate, JPA, Mybatis 등과의 연동을 지원
spring-jms JMS 서버와 메시지를 쉽게 주고 받을 수 있도록 하기 위한 템플릿
spring-context-support 스케쥴링, 메일발송, 캐시연동, 벨로시티 등 부가 기능을 제공

JavaScript 기능

Fri, 15 Sep 2023 07:07:37 GMT

데이터 입출력

innerText

js에서 요소에 작성된 내용(content)를 읽거나 변경하는 속성
내용만 읽어온다 (내용에 태그가 포함되어 있어도 읽어오지 않음)

변경되는 내용에 태그, 마크업 특수 문자가 포함되어 있어도 태그는 해석되지 않는다

const test1 = document.getElementById("test1");
function getBoxText(){
console.log(test1.innerText);
}
function setBoxText(){
test1.innerText = 
"innerText로 
 변경된 내용입니다 © ";
}

innerHTML

자바스크립트에서 요소 전체를(태그 + 내용) 읽어들이거나 변경하는 속성
내용을 읽어올 때 태그 + 내용 모두를 포함해서 읽음

내용을 변경할 때 태그, 마크업 특수문자가 모두 해석됨

function setBoxHTML(){
test2.innerHTML += "적용되나요??"
+ "됩니다!!";
}

[window.]alert()

브라우저에 경고창(알림창, 대화 상자)을 띄우는 함수
[window.]confirm()
"내용"에 대한 확인/취소 결과를 얻고자 할 때 사용하는 함수
alert에 확인/취소 두 개의 버튼이 생성됨
```
확인 -> true 반환
취소 -> false 반환
```

[window.]prompt()

텍스트를 입력할 수 있는 alert
텍스트 입력 후 확인 클릭 시 입력한 텍스트가 그대로 반환
취소 클릭 시 null 반환

요소접근방법

DOM(Document Object Model) 웹 문서(HTML)의 모든 요소를 객체 형식으로 표현한 것 (HTML 요소 == JS에서 객체라고 부름)
문서 내 특정 요소에 접근 가능 + 요소(객체)에 속성 값을 세팅 또는 얻어올 수 있다

id로 접근하기
document.getElementById("id속성값"); 아이디가 일치하는 요소(객체)를 얻어옴
```
const div1 = document.getElementById("div1");
```
class로 접근하기
document.getElementsByClassName("class속성값"); 클래스가 일치하는 모든 요소를 얻어와 배열 형태로 반환
```
const arr = document.getElementsByClassName("div2");
```
name으로 접근하기
document.getElementsByName("name속성값"); name이 일치하는 모든 요소를 얻어와 배열(NodeList, 유사배열) 형태로 반환
```
const hobbyArray = document.getElementsByName("hobby");
```
tag로 접근하기
document.getElementsByTagName("tag명"); 태그가 일치하는 모든 요소를 얻어와 배열 형태로 반환
```
const arr = document.getElementsByTagName("li");
```
CSS 선택자로 접근하기
document.querySelector("CSS 선택자"); 선택자가 선택한 요소 중 첫 번째 요소를 반환
document.querySelectorAll("CSS 선택자"); 선택한 요소 모두를 배열(NodeList, 유사배열) 형태로 반환
```
const bg = document.querySelector("#chatting-bg");
const arr = document.querySelectorAll("#css-div>div");
```

변수 선언 위치에 따른 구분

ES5 이전 버전

var : function level scope -> 함수 내부에서 var로 선언하면 함수 안에서 쓸 수 있다 -> 단, if, for, while 등의 다른 {} 내부에 작성되어도 함수 안에 있는거면 무조건 function level

ES6 이후

var : 변수, 변수명 중복 O(덮어쓰기), 함수 레벨 scope let : 변수, 변수명 중복 X, 블록{} 레벨 scope const : 상수, 변수명 중복 X, 블록{} 레벨 scope

1순위 : const (JS는 특정 요소를 선택해서 사용하는 경우가 많아서 변수에 고정시켜둠)

2순위 : let

3순위 : var (ES6 이후 부터 사용 빈도가 많이 적어짐)

이벤트

브라우저에서의 이벤트(동작, 행위) click, keydown, keypress, keyup, mouseover, drag, change, submit, ...
고전/표준 이벤트 모델은 랜더링(해석)된 HTML 요소에만 이벤트 핸들러 연결이 가능하기 때문에 JS 코드 작성 위치를 잘 판단해야 한다

인라인(inline) 이벤트 모델

요소 내부에 이벤트 관련 코드를 직접 작성하는 방법

on이벤트명 = 함수명()

고전 이벤트 모델

요소가 가지고 있는 이벤트 리스너 속성(on이벤트명)에 이벤트 핸들러(함수)를 직접 대입해서 연결하는 방법
인라인 이벤트 모델처럼 HTML에 작성하는 것이 아닌 script 태그 또는 js 파일에 작성
단점 : 한 요소의 같은 이벤트 리스너에 여러 이벤트 핸들러를 대입할 수 없다

표준 이벤트 모델( 요소.addEventListener() )

W3C(웹 표준 재정 단체)에서 공식적으로 지정한 이벤트 모델

장점 : 한 요소에 여러 이벤트 핸들러를 추가할 수 있다

클릭하면 크기가 늘어나요

HTML 요소의 기본 이벤트 제거

a 태그의 기본 이벤트 클릭하면 href 속성에 작성된 주소로 이동

form 태그의 기본 이벤트 action 속성에 작성된 주소로 내부에 작성된 input 값들을 제출

JavaScript

Fri, 15 Sep 2023 07:03:14 GMT

개요

Script 언어

기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어
별도로 소스코드를 컴파일 하지 않고 인터프리터(interpreter, 한 줄씩 코드를 읽어서 해석)를 이용해서 한 코드를 바로 실행
짧은 소스코드 파일로 상호작용 하도록 고안됨
장점 : 컴파일에 소요되는 시간이 없음
단점 : 프로그램 실행 시간이 상대적으로 느림
JavaScript
웹 브라우저에서 주로 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어
ECMA Script 따르는 대표적인 웹 기술
카멜 표기법 사용
JavaScript 작성 방법

브라우저 개발자도구 -> 콘솔(console)에 직접 작성
html 내부에 script 태그를 이용해 작성(internal 방식) 보통은 body 태그 제일 밑에 작성
html 외부에 .js 파일에 작성 후 연결해서 사용(external 방식) js 파일을 script 태그 내부라고 생각
태그에 직접 JS코드를 작성(inline 방식, 권장 X)

반응형 웹(미디어쿼리)

Thu, 14 Sep 2023 08:45:45 GMT

반응형 웹

브라우저나 장치 환경(크기)에 따라 웹페이지의 모습이 변하는 웹페이지
@media (미디어 쿼리)
사용 환경, 크기에 따라 CSS를 지정 가능하게 해주는
min-width
최소 너비
내부 요소 또는 화면의 크기가 지정된 너비보다 넓으면 자동으로 증가
min-height
최소 높이
내부 요소 또는 화면의 크기가 지정된 높이보다 높으면 자동으로 증가
max-width
최대 너비
내부 요소 또는 화면의 크기가 지정된 너비보다 좁으면 자동으로 축소
내부 요소 또는 화면의 크기가 지정된 너비보다 크더라도 지정된 값 이상으로 증가 X
max-height
최대 높이
@media 미디어유형 and (속성)
미디어유형 : 지정할 미디어의 종류 (all, screen, print,...)
1024px 이상 : 16:9 비율 모니터, 노트북 768px ~ 1024px : 태블릿 가로, 4:3비율 모니터 480px ~ 768px : 태블릿 세로, 모바일 가로 ~ 480px : 모바일
ex) 화면크기가 최대 768px 이하일 경우 적용
```
@media screen and (max-width: 768px){
  CSS 코드;
}
```

FlexBox

Thu, 14 Sep 2023 08:39:41 GMT

FlexBox

요소의 정렬되는 방향, 순서, 요소 간의 간격을 하나하나 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식(방식)
flex의 구성
flex container 정렬이 필요한 요소(item)를 감싸는 요소
item 정렬이 적용될 요소
flex의 축
중심축 (main axis)
교차축, 반대축 (cross axis)
flex container 전용 속성

display : flex
감싸는 요소를 flex 형식으로 변경 -> 내부에 작성되는 item을 유연하게 배치하겠다는 의미
해당 속성이 적용되면 유연하게 배치할 수 있도록 내부 item의 자동으로 지정된 margin 속성이 사라진다
flex-direction
중심축의 방향, 시작/끝 지정
row
기본값
x축, 왼쪽 -> 오른쪽
row-reverse
x축, 오른쪽 -> 왼쪽
column
y축, 위 -> 아래
column-reverse
y축, 아래 -> 위
justify-content
중심축 방향을 기준으로 item 정렬
flex-start
중심축 시작 지점을 기준으로 정렬
flex-end
중심축 끝 지점을 기준으로 정렬(순서가 뒤집히진 않음)
center
중심축 가운데 정렬
space-around
item에 중심축 방향으로 일정한 간격을 부여
space-evenly
item에 중심축 방향으로 동일한 간격을 부여
space-between
item에 중심축 방향으로 동일한 간격을 부여
단, 양 끝은 flex-container에 붙게 한다
align-items
교차축을 기준으로 item 정렬
stretch
기본값
item을 교차축 방향으로 꽉 찰만큼 늘림
단, item에 교차축 방향 크기가 지정되어 있다면 적용 X
flex-start
교차축 시작 지점에 배치
flex-end
교차축 끝 지점에 배치
center
교차축 가운데 지점에 배치
baseline
item에 작성된 내용(content)이 한 직선에 배치될 수 있도록 item을 교차축 방향을 알맞게 움직여 배치
flex-wrap
item이 한 줄/여러 줄로 배치 되게 지정
nowrap
기본값
한 줄로 배치, item의 크기가 변경(훼손)될 수 있음
wrap
여러 줄로 배치
wrap-reverse
여러 줄로 배치(cross axis 방향 반대)
flex-flow
flex-direction과 flex-wrap을 한 번에 지정하는 속성
```
.flex-container{
  flex-flow: row-reverse wrap;
}
```
align-content
cross axis(교차축)을 기준으로 포장된(wrap) item들을 정렬
조건 : flex-wrap이 wrap 또는 wrap-reverse 이여야 함
flex-start
축 시작 지점 기준으로 정렬
flex-end
축 끝 지점 기준으로 정렬
center
축 가운데 정렬
space-around
item에 축 방향 양쪽으로 일정 크기 공간을 배치
space-evenly
item에 축 방향 양쪽으로 모두 동일한 크기의 공간을 배치
space-between
space-evenly에서 시작, 끝 item은 flex-container 붙게 배치
item 전용 속성

order
item이 중심축이 배치되는 순서를 지정 기본값 0, 정수(음수, 양수, 0) 작성 가능

값이 작을수록 중심축의 시작 부분에 배치됨

.order1{order:1;}
.order2{order:2;}
.order3{order:3;}
.order4{order:4;}
.order5{order:5;}

flex-grow

item이 flex container 내부에서 비어있는 공간을 매꿀 수 있도록 팽창하는 정도를 지정하는 속성
기본값 0 -> 팽창하지 않음

팽창할 비율 작성

.grow1{flex-grow: 1;}
.grow2{flex-grow: 2;}
.grow3{flex-grow: 3;}
.grow4{flex-grow: 4;}

flex-shrink

item이 수축하는 정도를 지정하는 속성

기본값 1

.shrink0{flex-shrink: 0;}
.shrink1{flex-shrink: 1;}
.shrink2{flex-shrink: 2;}
.shrink3{flex-shrink: 3;}

flex-basis

item의 중심축 방향의 기본 점유율(크기)을 지정하는 속성 (각종 크기 단위 px, %, vh, em, rem 등 사용 가능)
```
.basis-150px{flex-basis: 150px;}
.basis-10{flex-basis: 10%;}
.basis-25{flex-basis: 25%;}
```
flex
flex-grow, flex-shrink, flex-basis를 한 번에 작성하는 속성
```
.flex1{flex: 0 0 200px;}
```
align-self

각각의 item별로 교차축 방향으로 정렬을 지정하는 속성

.self-start{align-self: flex-start;}
.self-end{align-self: flex-end;}
.self-center{align-self: center;}

CSS 레이아웃 스타일

Wed, 13 Sep 2023 08:48:30 GMT

레이아웃

사전적 의미 : 배치, 정리
기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하는 것

display
화면 배치(표시) 방법
요소가 화면에 어떻게 보여질지 형식을 지정하는 속성

block
화면을 수직 분할(행을 나눔, 한 줄 다 차지)
width, height 지정 가능

inline
화면을 수평 분할(하나의 행의 열을 나눔 == 글자, 문자열 생각)
width, height 지정 불가능

inline-block
inline의 수평 분할 + block의 width, height 지정
가로로 배치되면서 크기 지정

none
요소는 존재하나 화면에는 보이지 않게 함

flex
요소의 정렬되는 방향, 요소간의 간격을 유연하게 처리하는 방식

grid
격자무늬 형식으로 화면을 쉽게 분할하는 형식

요소의 영역(여백) 관련 스타일
HTML 요소는 총 4가지의 영역으로 구성되어 있다
padding, border, margin 크기를 한 번에 지정하려면 속성 값 1개 : (상하좌우) 지정 속성 값 2개 : (상하) (좌우) 지정 속성 값 3개 : (상) (좌우) (하) 지정 (위->아래) 속성 값 4개 : (상) (우) (하) (좌) 지정 (상 기준 시계방향)

content
요소의 내용이 작성 되어지는 영역

padding
content와 border 사이의 공간
상하좌우 크기 지정 가능

border
요소의 테두리가 지정되는 영역
content 보다 바깥쪽에서 content를 감싸고 있다
border-width로 상하좌우 크기 지정 가능
border의 속성 값은 [크기 모양 색상] 형식으로 작성

margin
다른 요소와의 간격을 나타내는 영역
상하좌우 크기 지정 가능

margin : auto;
다른 요소와의 간격을 자동으로 지정(가운데 정렬)
기본적으로 좌우 간격만 지정됨

지정되는 대상은 block 형식 요소여야 된다 (inline 형식은 text-align : center; 사용)

.content{
width: 150px;
height: 150px;
box-sizing: content-box;
}
.border{
border: 10px solid black;
}
.padding{
padding: 20px;
}
.margin{
margin: 50px;
}
#test2{
display: inline-block;

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

margin-top: 50px;
margin-bottom: 50px;
margin-left: 100px;
margin-right: 100px;

border-top: 5px solid red;
border-bottom: 10px double black;
border-left: 15px dotted yellow;
border-right: 20px dashed purple;
}
#test3{
border: 1px solid black;

padding: 30px;
padding: 30px 50px;
padding: 30px 50px 10px;
padding: 30px 20px 40px 50px;

border-width: 3px;
border-width: 3px 10px;
border-width: 3px 5px 10px;
border-width: 3px 5px 10px 20px;

margin: 30px;
margin: 30px 50px;
margin: 30px 50px 10px;
margin: 30px 20px 40px 50px;
}
#test4{
margin: auto;
margin-top: 100px;
}

box-sizing

width/height 크기 조정 속성의 범위를 지정하는 css 속성

content-box
width/height 지정 시 content 영역의 크기만 조정(기본값)

border-box
width/height 지정 시 content + padding + border의 크기를 합산한 결과가 작성된 width/height와 같아지도록 content 영역의 크기를 자동으로 조정
```
.border-box{
box-sizing: border-box;
}
```
요소 정렬 스타일

float
요소를 띄워서 좌/우로 정렬하는 속성

clear
float로 인해 띄워져 있는 상태를 해제하는 속성
float 사용 시 요소가 겹치는 문제를 clear로 해결

배치 관련 스타일

position : relative
지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되게 만드는 속성
내부에 작성되는 요소에 위치 지정 시 top, bottom, left, right 속성을 사용할 수 있음

position : absolute
기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치함

position : fixed
항상 고정된 위치에 요소를 배치함. (화면이 움직이든 말든 항상 같은 위치)

position : sticky
원래 요소가 보여지는 영역이라면 position X
요소가 보여지는 화면을 벗어나면 fixed

z-index : 정수
position : absolute 상태의 요소의 z축 방향으로 올라와 있는 정도를 지정하는 속성 (같은 기준 요소(relative)를 가진 요소만 설정 가능)

CSS

Mon, 11 Sep 2023 08:45:23 GMT

CSS (Cascading Style Sheets)

마크업 언어(HTML)가 실제로 화면에 표시되는 방법을 기술하는 언어 (모양, 색상, 크기, 스타일 ... 지정 가능)
하나의 요소에 여러 CSS코드를 겹쳐서 원하는 스타일을 만들 수 있다
W3C에서 CSS를 웹 표준으로 지정함

CSS 선택자(Selector)

현재 HTML 문서 내에서 특정 요소를 선택하는 문자 또는 문자열(기호) (스타일을 적용하고자 하는 요소를 선택하는 방법)

태그 선택자

현재 HTML 문서 내에 같은 태그를 모두 선택하는 선택자

작성법 태그명 { CSS 코드; }

strong{ background-color : coral; }
span{ background-color : pink; }
div{ border : 3px solid skyblue; }

id 선택자

HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자
id 속성 값은 페이지 내에서 유일해야 한다

작성법 #id속성값 { CSS 코드; }

#li1{ background-color: red; }
#li2{ background-color: orange; }
#li3{ background-color: yellow; }

클래스 선택자

HTML 문서 내에서 class 속성값이 일치하는 요소를 선택하는 선택자
CSS가 적용되는 요소가 겹치는 경우 마지막에 작성한 CSS가 적용된다

작성법 .class속성값 { CSS 코드; }

.test-1{color: red;}
.test-2{
  background-color: black;
  color: white;
}

모든 요소 선택자

단독 사용 시 : 문서에 있는 모든 요소
다른 선택자와 사용 시 : 선택된 요소의 모든 자식/후손/형제 ```
{font-style: italic;}

기본 속성 선택자

태그에 작성된 특정 속성을 선택하는 선택자 (모든 속성을 선택할 수 있는 기본 방법) (id, class 로 선택 가능하지만 보통은 #, . 을 사용)
선택자는 생략할 수 있다 -> 특정, 속성을 가진 모든 요소를 선택
"속성값" 에서 쌍따옴표("")는 홑따옴표('')로 변경하거나 생략할 수 있다

작성법 선택자[속성명="속성값"] { CSS 코드; }

div[name="name-1"]{background-color: violet;}
p[data="data-2"]{background-color: whitesmoke;}

자식 선택자

지정된 요소 바로 한 단계 하위 요소를 선택하는 선택자
작성법 선택자1(부모 요소) > 선택자2(자식 요소) {CSS 코드;}
```
#parent1>li>span{background-color: darkgreen;}
```

후손(자손) 선택자

지정된 요소의 모든 하위 요소를 선택하는 선택자
작성법 선택자1(부모(조상) 요소) 선택자2(후손 요소) {CSS 코드;}
```
#parent2 p{background-color: aqua;}
```

반응 선택자

사용자의 움직임에 반응하여 스타일이 변경되는 선택자
:active
선택된 요소가 클릭 되어지고 있을 경우

작성법 선택자:active

#activeTest:active{
background-color: yellow;
border: 10px inset black;
}

:hover

선택된 요소에 마우스가 올라가 있는 경우

작성법 선택자:hover

#hoverTest:hover{
background-image: url(../../images/cats/cat4.jpg);
background-size: cover;
}

상태 선택자

입력 양식(input, input 관련 태그)의 상태에 따라 선택되는 선택자
:focus
요소에 초점이 맞춰졌을 때(커서 깜빡거림)
```
#focus-test:focus{
outline-color: yellowgreen;
}
```
:checked
요소가 체크 되었을 때(radio, checkbox)
```
input[name="fruits"]:checked{
width: 30px;
height: 30px;
}
```
:enabled, :disabled

요소가 활성/비활성 상태일 때

#test-div2 > input:enabled{background-color: lightgreen;}
#test-div2 > input:disabled{background-color: lightcoral;}

동위 선택자

동위(동등한 위치 == 형제 관계)관계에서 다음(뒤)에 위치한 요소를 선택하는 선택자
+
A 바로 다음(뒤)에 있는 B 요소를 하나 선택 A선택자 + B선택자 {CSS 코드;}
```
#div1 + div{background-color: gold;}
```
~
A 뒤에 있는 모든 B 요소를 선택 A선택자 ~ B선택자 {CSS 코드;}
```
#div3 ~ div{background-color: chocolate;}
```
문자열 속성 선택자
선택자[속성명 ~= "특정값"] { CSS 코드; } 띄어쓰기로 구분되어있는 여러 속성 값이 작성된 속성 중 속성 값이 특정 값을 단어로 포함하는 요소를 선택
선택자[속성명 |= "특정값"] { CSS 코드; } 속성 값이 특정 값을 단어로 포함하는 요소를 선택 단, "-" 기호로 구분, "-" 앞의 내용이 동일해야 한다
선택자[속성명 ^= "특정값"] { CSS 코드; } 속성 값이 특정 값으로 시작하는 요소를 선택
선택자[속성명 $= "특정값"] { CSS 코드; } 속성 값이 특정 값으로 끝나는 요소를 선택

선택자[속성명 *= "특정값"] { CSS 코드; } 속성 값이 특정 값을 포함하는 요소를 선택

div[name~="aaa"]{background-color: greenyellow;}
div[class|="str"]{color: red; font-weight: bold;}
div[class^="class"]{background-color: black; color: white;}
div[class$="2"]{font-style: italic; font-size: 30px;}
div[name*="2"]{border: 2px solid magenta;}

일반 구조 선택자

형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자
위치를 기준으로 구분함
(※) 선택된 형제 중에서 순서를 찾는게 아닌 모든 형제 중에서 순서를 찾고 그 다음 지정된 선택자가 맞는지 확인하기 때문에 잘 살펴봐야 한다
:first-child

형제 관계 중 첫 번째 요소

#test1 > p:first-child{
background-color: red;
color: white;
}

:last-child

형제 관계의 요소 중 마지막 요소
```
#test1>p:last-child{
background-color: blueviolet;
}
```
:nth-child()

형제 관계 중 숫자/수열 번째 형제 요소 선택

#test1>p:nth-child(2){
background-color: yellow;
}
#test1>p:nth-child(2n+1){
font-style: italic;
}

:nth-last-child()

뒤에서 부터 숫자|수열 번째 요소 선택

#test1>p:nth-last-child(2){
color: brown;
}
#test1>p:nth-last-child(2n){
color: brown;
}

형태 구조 선택자

선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자
선택된 요소들을 기준으로 구분
:first-of-type
같이 선택된 형제들 중에서 첫 번째 요소
```
#test2>p:first-of-type{
background-color: orange;
}
```
:last-of-type
같이 선택된 형제들 중에서 마지막 요소
```
#test2>p:last-of-type{
background-color: deepskyblue;
}
```
:nth-of-type()
같이 선택된 형제들 중에서 숫자|수열 번째 모든 요소
```
#test2>p:nth-of-type(2n+1){
font-family: "궁서체";
font-size: 30px;
}
```
:nth-last-of-type()
같이 선택된 형제들 중에서 뒤에서 숫자|수열 번째 모든 요소
```
#test2>p:nth-last-of-type(2n){
background-color: aquamarine;
}
```
부정 선택자

:not()
괄호 내 선택자를 제외한 나머지 요소를 선택
```
#test3>li:not(:nth-of-type(3n)){
background-color: violet;
}
```
기타 선택자, 추가 선택 작성 방법

:only-child
특정 요소의 자식이 하나밖에 없을 때 선택
```
#test1-1>p:only-child{
background-color: gold;
}
```
:only-of-type
특정 요소의 자식 중 지정된 형태와 같은 자식 요소가 하나만 있을 때 선택
```
#test2>p:only-of-type{
background-color: plum;
}
```
:empty
자식 요소가 없는 요소인 경우 선택
(태그, 글자, 띄어쓰기 모두 자식이라고 함)
```
#test3>p:empty{
height: 30px;
background-color: greenyellow;
}
```
여러 선택자 동시 작성
같은 스타일을 지정하고 싶은 요소가 있으나 선택자 하나로 모두 선택할 수 없을 때 사용
작성법 선택자1, 선택자2, 선택자3, ... {CSS 코드;}
```
#test4-1, #test4-2, .test4-3{
border: 3px dashed black;
}
```
특정 요소 내부에 있는 특정 클래스만 선택
#test5-1의 후손 중 클래스가 c5인 요소 선택
```
#test5-1 .c5{
background-color: rgb(170, 142, 17);
}
```
#test5-2의 자식 li 태그 중 클래스가 c5인 요소 선택
```
#test5-2>li.c5{
background-color: brown;
}
```
여러 클래스가 작성된 요소만 선택
```
.test6.c6{
background-color: red;
}
```
CSS 선택자 우선순위
기본적으로 css 속성은 style태그 또는 css 파일에 작성된 순서(위->아래)대로 해석이 진행 되지만 같은 요소에 여러 css 속성이 설정되는 경우 우선 순위가 적용된다.
동일한 우선 순위로 css 속성이 설정된 경우 제일 마지막에 작성된 css 속성이 반영된다
여러 선택자를 이용해서 같은 요소를 선택하더라도 지정되는 css 속성이 다르면 모두 반영된다.
선택자 우선순위

css속성 : 속성값 !important;
inline-style 속성 (요소에 직접 작성되는 style 속성)
아이디 선택자 (#아이디 속성명)
클래스 선택자 (.class 속성명)
태그 선택자 (태그명)

!important로 같은 요소에 같은 CSS 설정이 적용되면 감싸고 있는 선택자 우선순위를 먼저 판별, 감싸고 있는 선택자 우선순위가 같으면 마지막 작성된 내용이 적용

HTML

Wed, 06 Sep 2023 08:45:34 GMT

태그의 종류

기본 태그

html 태그

html 문서의 내용을 정의하는 태그
html 코드는 모두 이 태그 내부에 작성해야 한다
lang 속성
html 문서가 어떤 언어로 표기되어 있는지 표시
검색엔진에서 사용 (ex. 한국어로만 작성된 페이지 검색)
head 태그
html 문서를 정의하는 태그
제목, 스타일 (css), 로딩 시 기능(js), 추가 설정/정보(메타데이터)
```
  제목
  
```
body 태그
화면에 보여질 내용을 정의하는 태그
글자 관련 태그

highlight (h1 ~ h6) 태그
제목을 나타내는 태그

1(큼) ~ 6(작음) 폰트 크기가 지정되어 있음

h1 태그에 작성된 내용
h2 태그에 작성된 내용
h3 태그에 작성된 내용
h4 태그에 작성된 내용
h5 태그에 작성된 내용
h6 태그에 작성된 내용

hr (horizon) 태그

가로줄 긋기 태그
br (line break) 태그
다음 줄 이동
p (Paragraph) 태그
글을 작성하는 용도, 종료 시 줄 바꿈
```
내용
```
pre (Preformatted) 태그
태그 내에 작성된 문자열 형식을 그대로 보여주는 태그
p 태그 + 형식 유지
```
내용
```
b 태그
단순히 글자를 굵게 표시하는 태그
```
b 태그
```
i 태그
단순히 글자를 기울여 표시하는 태그
```
i 태그
```
strong 태그
글자(단어)를 강조하는 태그
글자를 굵게 표시하는 태그
웹 접근성을 위해 사용
```
strong 태그
```
em 태그
글자(문장)를 강조하는 태그
글자를 기울여 표시하는 태그
웹 접근성을 위해 사용
```
em 태그
```
mark 태그
형광펜 효과를 나타내는 태그
```
mark 태그
```
u 태그
밑줄 태그
```
u 태그
```
s 태그
취소선
```
s 태그
```
del 태그
삭제선
```
del 태그 
```
small 태그
작은 글자 태그
```
small 태그
```
sup 태그
윗첨자 태그
```
^내용
```
sub 태그
아랫첨자 태그
```
_내용
```
abbr (abbreviation) 태그
마우스 오버 시 툴팁 출력 태그
```
내용
```
목록 관련 태그

ul (unordered list) 태그
순서 없는 목록 태그
li (list item) 태그
목록의 한 줄(목록에서 구별되는 내용) 태그
```
  김밥
  서브웨이
  라면
  햄버거
```
emmet을 이용해서 목록 만들기
> : 태그 내부에 작성(하위)
+ : 형제(같은 레벨)로 작성
* 숫자 : 개수
{} : 태그 내용
$ : 1부터 1씩 증가하는 숫자 출력
```
ul*2>li*3{$번 항목}
```
ol (ordered list) 태그
순서가 있는 목록 태그
type 속성 : 순서를 나타내는 형식을 지정
미작성 : 1 부터 1씩 증가하는 숫자
type="a" : 영어 소문자 순서(abcd...)
type="A" : 영어 대문자 순서(ABCD...)
type="i" : 로마 소문자 순서
type="I" : 로마 대문자 순서
start 속성 : 시작하는 숫자 설정

reversed : 반대(역순)


  샐러드
  김밥
  삼겹살
  돼지갈비
  우육면

dl (description list) 태그

설명 목록 태그
dl 태그 : 설명 목록이 작성될 판(공간)
dt 태그 : 설명 제목

dd 태그 : 설명 내용


  제목1
  내용1-1
  내용1-2
  제목2
  내용2

표 관련 태그

table 태그

웹 문서에서 자료 정리를 위해 주로 사용하는 태그
행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell) 이라고 함.
table 태그는 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정함.
tr (Table Row) 태그
한 행을 나타내는 태그
td (Table Data) 태그
한 행의 한 컬럼(셀)을 나타내는 태그
th (Table Header) 태그
컬럼명을 표시하는 용도의 태그
기본 성질은 td 태그와 같으나 추가적으로 굵은 글씨, 가운데 정렬이 이루어짐
caption 태그
테이블의 제목이나 설명 내용을 추가하는 태그
행 병합, 열 병합
td 또는 th 태그에 작성하는 속성
테이블의 병합은 다른 td/th 태그를 하나로 합치는 것이 아닌 지정된 크기 만큼의 행, 열의 자리를 차지하겠다라는 의미
rowspan
행 병합
colspan
열 병합
테이블 구조 설정 태그
미작성시 모든 내용은 tbody 내부에 작성
thead 태그
테이블 상단 영역 (컬럼명)
tbody 태그
테이블 중단 영역 (실제 값, 내용)
tfoot 태그

테이블 하단 영역 (합계)

개인정보
이름	나이	주소
홍길동	20	서울시 금천구
김개똥	25	서울시 강남구
김영희	23	경기도 파주시
총 인원	3명

이미지 관련 태그

img 태그

웹 문서에서 사진이나 그림 같은 이미지를 삽입하는 용도의 태그
속성
src : 삽입할 이미지의 경로를 작성하는 속성(파일경로, 웹 주소)
width / height : 이미지 크기(px, %)
alt (대안) : 이미지의 설명을 작성하는 속성, 이미지가 출력되지 않는 경우 화면에 표시됨, 웹 접근성(스크린 리더가 이미지 설명을 읽어줌)
절대 경로로 이미지 출력
변하지 않는 기준점으로 부터 목표까지의 경로 (서버 배포 시 컴퓨터 절대 경로는 인식되지 않음)
상대 경로로 이미지 출력
상대 경로 : 현재 파일/페이지 위치를 기준점으로 하여 목표까지의 경로를 나타내는 것 (절대 경로가 노출되지 않기 때문에 서버 배포시에도 사용 가능)
웹 주소를 이용해서 이미지 출력
고정 크기 단위
항상 고정된 크기를 지닌 단위 (px, pt)
가변 크기 단위
화면 또는 영역에 대한 상대적 크기 단위 (%, em, rem, vh, vw)
영역 관련 태그

block 형식
공간을 수직 분할
수직으로 되어있는 화면을 가로로 잘라서 여러 행을 만드는 것
크기를 지정하는 css 속성인 width, height를 사용할 수 있다
사각형 박스 형태로 영역을 지정
ex) h, p, pre, hr, div 태그 등
inline 형식
공간을 수평 분할
수평으로 되어있는 화면을 세로로 잘라서 여러 열(컬럼)을 만드는 것
크기를 지정하는 css 속성인 width, height를 사용할 수 없다
내부에 작성된 내용(content) 단위로 영역을 지정
ex) b, strong, i, em, mark, span, img
iframe 태그
웹 문서 내부에 또 다른 웹 문서를 추가하는 태그(inline 형식)
웹 문서를 겹쳐서 보여주기 때문에 활용 방법에 따라 다양한 연출이 가능한 장점 있음
하지만, 한 번에 여러 페이지를 로딩하기 때문에 컴퓨터 성능, 인터넷 속도에 따라 느려지거나, 오류가 발생할 수 있다

하이퍼 링크 관련 태그

a 태그

a태그는 현재 HTML 문서와 다른 HTML 문서를 연결해서 페이지 이동을 할 수 있게 하는 기능을 제공
이 때, a태그로 감싸진 문자열은 하이퍼링크(또는 하이퍼 텍스트)
속성
href(HyperText Reference) 속성 : 연결할 주소를 지정하는 속성
target="_blank" : 새 탭에서 열기
상대 경로 방식으로 파일 연결하기
```
글자 관련 태그
```
a태그와 다른 태그 같이 사용하기
```
  
    네이버
  
```
이미지 클릭 시 이동하기
```
  
```
페이지 내부에서 점프하기
```
  꽃 1
  꽃 2
  꽃 3
```

꽃 1

목록으로 이동

꽃 2

목록으로 이동

꽃 3

목록으로 이동 ``` ## 입력 관련 태그 ### text 관련 input 태그 * 웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그 (inline) * 공통 속성 - size : 입력 상자의 크기 - maxlength : 입력 받는 텍스트의 최대 길이 - placeholder : 입력 상자에 작성될 내용을 설명 - value : input 태그에 들어갈 초기값을 지정 (모든 input 태그의 type에서 사용 가능한 속성) #### type="text" * 한 줄 짜리 문자열(텍스트)를 입력할 수 있는 입력 상자 * input 태그의 type 기본값으로 생략 가능 ``` ``` #### type="password" * 비밀번호 입력 상자(입력되는 텍스트를 가려줌) ``` 비밀번호 : ``` ### 기타 텍스트 관련 태그 * url, email, tel 단독 사용 시 type="text"와 똑같지만 form태그 내부에서 사용되면 입력된 값이 용도에 맞는 값인지 유효성 검사를 간단히 진행함 #### type="url" * 주소 입력 시 사용하는 입력 상자 ``` ``` #### type="email" * 이메일 입력 시 사용하는 입력 상자 ``` ``` #### type="tel" * 전화번호 입력 시 사용하는 입력 상자 ``` ``` #### type="search" * 검색어 입력 시 사용하는 입력 상자 ``` ``` ### 숫자 관련 input 태그 * 공통 속성 - min : 최소값 - max : 최대값 - step : 증가/감소 단계 지정 - value : input 태그에 들어갈 초기값을 지정 (모든 input 태그의 type에서 사용 가능한 속성)

type="number"

숫자만 입력 할 수 있는 입력 상자
브라우저에 따라 스핀박스가 표시되기도 함
type="range"
슬라이드 바를 이용해서 숫자 지정(단독 사용X, JS와 함께 사용)
날짜/시간 관련 input 태그
type="date / month / week / time / datetime-local"

radio, checkbox
여러 관련된 값을 묶어서 선택하는 경우에 사용하는 input type
묶음으로 다루려는 input 태그들은 반드시 같은 name 속성 값을 가져야 한다
속성에 checked 작성 시 기본값으로 설정

name 속성
radio, checkbox 뿐만 아니라 input 태그들 중 관련된 것들을 묶어서 부를 때(묶음으로 다룰때) 사용 (그룹이름)
서버쪽에 제출되는 input 태그 값의 이름을 지정(form태그와 같이 사용) (checkbox에 사용 시 name이 같은 input은 하나의 배열로 전달됨)

label
input 태그에 대한 설명/제목을 지정하는 태그
for 속성에 input 태그의 id 속성 값을 작성하여 연결 가능 -> label을 클릭해도 input을 클릭한 효과를 얻을 수 있음

type="radio"
하나만 선택 가능
```
A팀  

B팀  

C팀  
```
type="checkbox"
여러 개 선택 가능
```
야구  

축구  

농구  
```
버튼을 나타내는 input 태그
input 태그 중 type="submit" / type="reset" / type="button" 위 3개가 버튼을 나타내는 타입인데 최근에는 잘 사용되지 않음
버튼의 사용도가 너무 많아져서 별도의 button 태그가 새롭게 등장했기 때문

button 태그
type="submit(기본값) / reset(form에 작성된 값 초기화) / button(JS에서 사용)"
기타 input 태그

type="color"
색 선택 태그

type="file"
파일 선택 태그

type="hidden"
화면에 보이지는 않지만 실제로는 존재하는 input 태그 ->꼭 보여질 필요는 없지만 기능 수행 시 필요한 값(ex. 회원번호)
form 태그
div와 같은 영역(block 형식) + 내부에 작성된 input 태그의 값을 서버로 전달하는 역할
속성
- action : 내부에 작성된 값을 전달할 서버 또는 페이지 주소를 작성
- method(방식) : 서버로 데이터 전달하는 방식을 지정하는 속성
- name : form태그의 이름을 지정하여 각각의 form태그 구분(JS사용)
- target : action에 지정된 주소를 새탭/현재탭 중 어디서 열지 지정
예시 1 아이디, 비밀번호 입력 후 로그인(제출) 클릭 시 action에 작성된 주소 result.html로 입력된 값을 전달(제출)
```
  아이디 입력 :  

  비밀번호 입력 :  

   
```
예시 2 action : 제출할 서버 또는 페이지 주소 method= "get" : 주소에 데이터를 key=value 형식으로 전달하는 방식 (기본값)
```
  이름 :  

  나이 :  

  
```

예시 3 target="_blank" : 제출 결과를 새 창에서 확인


  팀 선택 

  A팀  

  B팀  

  C팀  

  
  취미 선택 

  야구  

  축구  

  농구

fieldset 태그

테두리를 만들어 그룹을 구분하는 영역

legend 태그

fieldset 테두리에 이름을 부여


  
      로그인
      아이디 :  

      비밀번호 :  

  
  
      개인정보
      이름 :  

      나이 :

textarea 태그

여러 줄을 입력하기 위한 입력 상자

css{resize: none;} 크기 지정 불가


  태그 사이에 기본 값 작성
      pre태그 처럼 모양 그대로를 인식

select 태그

내부에 작성된 option 태그 중 하나를 선택
option에 value가 작성되어 있으면 value 제출 아니면 태그 사이 내용 제출

option 속성 selected 작성 시 기본값으로 설정

JOIN

Wed, 30 Aug 2023 08:41:34 GMT

JOIN

하나 이상의 테이블에서 데이터를 조회하기 위해 사용
수행 결과는 하나의 RESULT SET으로 나옴

내부 조인 (INNER JOIN)

연결되는 컬럼의 값이 일치하는 행들만 조인됨
(= 일치하는 값이 없는 행은 조인에서 제외됨)
ANSI 표준 구문

1) 연결에 사용할 두 컬럼명이 다른 경우

FROM 테이블명1
JOIN 테이블명2 ON(컬럼명1 = 컬럼명2)

2) 연결에 사용할 두 컬럼명이 같은 경우
```
FROM 테이블명1
JOIN 테이블명2 USING(컬럼명)
```
오라클 전용 구문

1) 연결에 사용할 두 컬럼명이 다른 경우

FROM 테이블명1, 테이블명2
WHERE 컬럼명1 = 컬럼명2

2) 연결에 사용할 두 컬럼명이 같은 경우 별칭 사용이 필요하다
```
FROM 테이블명1 별칭1, 테이블명2 별칭2
WHERE 별칭1.컬럼명 = 별칭2.컬럼명
```
외부 조인 (OUTER JOIN)
두 테이블이 지정하는 컬럼값이 일치하지 않는 행도 조인에 포함을 시킨다
ANSI 표준 구문
1) LEFT [OUTER] JOIN 합치기에 사용한 두 테이블 중 왼편에 기술된 테이블의 컬럼 수를 기준으로 JOIN
```
FROM 테이블명1
LEFT JOIN 테이블명2 ON(컬럼명1 = 컬럼명2)
```
2) RIGHT [OUTER] JOIN 합치기에 사용한 두 테이블 중 오른편에 기술된 테이블의 컬럼 수를 기준으로 JOIN
```
FROM 테이블명1
RIGHT JOIN 테이블명2 ON(컬럼명1 = 컬럼명2)
```
3) FULL [OUTER] JOIN 합치기에 사용한 두 테이블이 가진 모든 행을 결과에 포함
```
FROM 테이블명1
FULL JOIN 테이블명2 ON(컬럼명1 = 컬럼명2)
```
오라클은 FULL JOIN을 사용 못함
오라클 전용 구문
1) LEFT JOIN 컬럼명1의 값이 컬럼명2의 값과 일치하지 않아도 추가하라는 뜻
```
FROM 테이블명1, 테이블명2
WHERE 컬럼명1 = 컬럼명2(+)
```

2) RIGHT JOIN

FROM 테이블명1, 테이블명2
WHERE 컬럼명1(+) = 컬럼명2

교차 조인 (CROSS JOIN, CARTESIAN PRODUCT)

조인되는 테이블의 각 행들이 모두 매핑된 데이터가 검색되는 방법(곱집합)
(자연 조인 실패 결과물로 확인 가능하다)
비등가 조인 (NON EQUAL JOIN)
'='(등호)를 사용하지 않는 조인문
지정한 컬럼 값이 일치하는 경우가 아닌, 값의 범위에 포함되는 행들을 연결하는 방식
```
FROM 테이블명1
JOIN 테이블명2 ON(컬럼명 BETWEEN A AND B)
```
자체 조인 (SELF JOIN)

같은 테이블을 조인

ANSI 표준 구문

FROM 테이블명 별칭1
JOIN 테이블명 별칭2 ON(별칭1.컬럼명1 = 별칭2.컬럼명2)

오라클 전용 구문

FROM 테이블명 별칭1, 테이블명 별칭2
WHERE 별칭1.컬럼명1 = 별칭2.컬럼명2(+)

자연 조인 (NATURAL JOIN)

동일한 타입과 이름을 가진 컬럼이 있는 테이블 간의 조인을 간단히 표현하는 방법
반드시 두 테이블 간의 동일한 컬럼명, 타입을 가진 컬럼이 필요하다
없을 경우 교차 조인이 된다
```
FROM 테이블명1
NATURAL JOIN 테이블명2
```
다중 조인
N개의 테이블을 조회할 때 사용

순서가 중요하다

FROM 테이블명1
JOIN 테이블명2 ON(컬럼명1 = 컬럼명2)
JOIN 테이블명3 ON(컬럼명1 = 컬럼명3)
...

SUBQUERY

Wed, 30 Aug 2023 06:07:37 GMT

SUBQUERY란?

하나의 SQL문 안에 포함된 또다른 SQL문
메인쿼리(기존쿼리)를 위해 보조 역할을 하는 쿼리문
유형
서브쿼리 유형에 따라 서브쿼리 앞에 붙은 연산자가 다름
단일행 서브쿼리
서브쿼리의 조회 결과 값의 개수가 1개일 때
단일행 서브쿼리 앞에는 비교 연산자 사용 <, >, <=, >=, =, !=/^=/<>
다중행 서브쿼리
서브쿼리의 조회 결과 값의 개수가 여러개일 때
다중행 서브쿼리 앞에는 일반 비교 연산자 사용 불가 IN / NOT IN : 한 개라도 일치하는 값이 있다 / 없다 < ANY, > ANY : 가장 큰 값보다 작나? / 가장 작은 값보다 큰가? < ALL, > ALL : 가장 작은 값보다 작나? / 가장 큰 값보다 큰가? EXISTS / NOT EXISTS 값이 존재하나? / 값이 존재하지 않나?
다중열 서브쿼리
서브쿼리의 SELECT 절에 자열된 항목수가 여러개 일 때 (행은 단일 행 = 결과 값은 하나)
```
(컬럼명, 컬럼명, ...) 비교연산자 (서브쿼리)
```
다중행 다중열 서브쿼리
조회 결과 행 수와 열 수가 여러개일 때
```
(컬럼명, 컬럼명, ...) 다중행 비교연산자 (서브쿼리)
```
상관 서브쿼리
서브쿼리가 만든 결과 값을 메인 쿼리가 비교 연산할 때 메인 쿼리 테이블의 값이 변경되면 서브쿼리의 결과값도 바뀌는 서브쿼리
상관쿼리는 먼저 메인쿼리 한 행을 조회하고 해당 행이 서브쿼리의 조건을 충족하는지 확인하여 SELECT를 진행함
스칼라 서브쿼리
상관 쿼리이면서 결과 값이 하나인 서브쿼리
인라인 뷰
FROM절에서 서브쿼리를 사용하는 경우로 서브쿼리가 만든 결과의 집합(RESULT SET)을 테이블 대신에 사용한다.
FROM절에 이미 정렬된 서브쿼리(인라인 뷰) 적용 시 ROWNUM이 top-N분석에 사용 가능
WITH
서브쿼리에 이름을 붙여주고 사용시 이름을 사용하게 함
인라인 뷰로 사용될 서브쿼리에 주로 사용됨
실행 속도가 빨라진다는 장점이 있음
```
WITH 서브쿼리명 AS (서브쿼리)
```
RANK() OVER() / DENSE_RANK() OVER()

RANK() OVER()
동일한 순위 이후의 등수를 동일한 인원 수 만큼 건너뛰고 순위 계산
```
RANK() OVER(ORDER BY 컬럼명 [DESC])
```
DENSE_RANK() OVER()
동일한 순위 이후의 등수를 이후의 순위로 계산
```
DENSE_RANK() OVER(ORDER BY 컬럼명 [DESC])
```

DCL (Data Control Language)

Wed, 30 Aug 2023 05:06:49 GMT

DCL이란?

계정에 DB, DB 객체에 대한 접근 권한을 부여하고 회수하는 언어
GRANT : 권한 부여
REVOKE : 권한 회수
권한의 종류

1) 시스템 권한
DB 접속, 객체 생성 권한
종류
CREATE SESSION 데이터베이스 접속 권한
CREATE TABLE 테이블 생성 권한
CREATE VIEW 뷰 생성 권한
CREATE SEQUENCE 시퀀스 생성 권한
CREATE PROCEDURE 함수(프로시져) 생성 권한
CREATE USER 사용자(계정) 생성 권한
DROP USER 사용자(계정) 삭제 권한
DROP ANY TABLE 임의 테이블 삭제 권한
2) 객체 권한
특정 객체를 조작할 수 있는 권한
종류
SELECT TABLE, VIEW, SEQUENCE
INSERT TABLE, VIEW
UPDATE TABLE, VIEW
DELETE TABLE, VIEW
ALTER TABLE, SEQUENCE
REFERENCES TABLE
INDEX TABLE
EXECUTE PROCEDURE

ex)

-- 계정 생성
CREATE USER 아이디 IDENTIFIED BY "비밀번호";

-- 사용자 계정에 접속, 기본 객체 8개, VIEW 생성 권한 부여하기
GRANT CONNECT, RESOURCE, CREATE VIEW TO 아이디;

-- 권한 회수
REVOKE SELECT, INSERT ON 테이블 FROM 아이디;

INDEX

Wed, 30 Aug 2023 04:49:19 GMT

INDEX란?

SQL 구문 중 SELECT 처리 속도를 향상 시키기 위해 컬럼에 대하여 생성하는 객체
장점
이진 트리 형식으로 구성되어 자동 정렬 및 검색 속도 증가
조회 시 테이블의 전체 내용을 확인하며 조회하는 것이 아닌 인덱스가 지정된 컬럼만을 이용해서 조회하기 때문에 시스템의 부하가 낮아짐
단점
데이터 변경(DML) 작업 시 이진 트리 구조에 변형이 일어남
DML 작업이 빈번한 경우 시스템 부하가 늘어 성능이 저하됨
인덱스도 하나의 객체이다 보니 별도의 저장 공간이 필요(메모리 소비)
인덱스 생성 시간이 필요함
작성법
```
- 생성 CREATE [UNIQUE] INDEX 인덱스명 ON 테이블명 (컬럼명[, 컬럼명 | 함수명]);
- 삭제 DROP INDEX 인덱스명; ```
  활용법
인덱스가 설정된 컬럼을 WHERE 조건절에 명시하면 검색속도가 빠르다
자동생성
PRIMARY KEY 또는 UNIQUE 제약조건이 설정된 컬럼에 대해 UNIQUE INDEX가 자동 생성된다

SEQUENCE

Wed, 30 Aug 2023 04:37:24 GMT

SEQUENCE란?

순차적으로 일정한 간격의 숫자(번호)를 발생시키는 객체
PRIMARY KEY가 지정된 컬럼에 사용하기 좋다

작성법

CREATE SEQUENCE 시퀀스이름
[STRAT WITH 숫자]
[INCREMENT BY 숫자]
[MAXVALUE 숫자 | NOMAXVALUE]
[MINVALUE 숫자 | NOMINVALUE]
[CYCLE | NOCYCLE]
[CACHE 바이트크기 | NOCACHE]

START WITH 처음 발생시킬 시작 값 지정, 생략하면 1이 기본
INCREMENT BY 다음 값에 대한 증가치, 생략하면 1이 기본
MAXVALUE | NOMAXVALUE 발생시킬 최댓값 지정
MINVALUE | NOMINVALUE 최솟값 지정
CYCLE | NOCYCLE 값 순환 여부 지정
CACHE | NOCACHE 캐쉬메모리 기본값은 20바이트, 최솟값은 2바이트 시퀀스의 캐쉬메모리는 할당된 크기만큼 미리 다음 값들을 생성해 저장해둔다
사용법

시퀀스명.NEXTVAL
다음 시퀀스 번호를 얻어옴 (INCREMENT BY 만큼 증가된 수)
단, 생성 후 처음 호출된 시퀀스인 경우 START WITH에 작성된 값이 반환됨
시퀀스명.CURRVAL
현재 시퀀스 번호를 얻어옴
단, 시퀀스가 생성 되자마자 호출할 경우 오류 발생 (마지막으로 호출한 NEXTVAL 값을 반환하기 때문)
변경법

기본적으로 CREATE 작성법과 같으나 START WITH는 제외

ALTER SEQUENCE 시퀀스이름
[INCREMENT BY 숫자]
[MAXVALUE 숫자 | NOMAXVALUE]
[MINVALUE 숫자 | NOMINVALUE]
[CYCLE | NOCYCLE]
[CACHE 바이트크기 | NOCACHE]

VIEW

Wed, 30 Aug 2023 03:47:35 GMT

VIEW란?

논리적 가상 테이블
테이블의 모양을 하고는 있지만, 실제로 값을 저장하고 있지는 않음
SELECT문의 실행 결과(RESULT SET)를 저장하는 객체

사용 목적

복잡한 SELECT문을 쉽게 재사용하기 위해
테이블의 진짜 모습을 감출 수 있어 보안상 유리

주의 사항

가상의 테이블이기 때문에 ALTER 구문 사용 불가
VIEW를 이용한 DML이 가능한 경우도 있지만 제약이 많이 따르기 때문에 조회 용도로 대부분 사용

작성법

CREATE [OR REPLACE] [FORCE | NOFORCE] VIEW 뷰이름 [컬럼 별칭]
AS 서브쿼리(SELECT문)
[WITH CHECK OPTION]
[WITH READ ONLY];

OR REPLACE 옵션
기존에 동일한 이름의 VIEW가 존재하면 이를 변경 없으면 새로 생성
FORCE | NOFORCE 옵션
FORCE
서브쿼리에 사용된 테이블이 존재하지 않아도 뷰 생성
NOFORCE(기본값)
서브쿼리에 사용된 테이블이 존재해야만 뷰
컬럼 별칭 옵션
조회되는 VIEW의 컬럼명을 지정
WITH CHECK OPTION 옵션
옵션을 지정한 컬럼의 값을 수정 불가능하게 함
WITH READ ONLY 옵션
뷰에 대해 SELECT만 가능하도록 지정

DDL (Data Definition Language) 데이터 정의 언어

Mon, 28 Aug 2023 08:47:12 GMT

객체(OBJECT)를 만들고(CREATE), 수정(ALTER)하고, 삭제(DROP) 등 데이터의 전체 구조를 정의하는 언어로 주로 DB관리자, 설계자가 사용한다.

오라클에서의 객체 테이블(TABLE), 뷰(VIEW), 시퀀스(SEQUENCE),인덱스(INDEX), 패키지(PACKAGE), 트리거(TRIGGER), 프로시져(PROCEDURE), 함수(FUNCTION), 동의어(SYNONYM), 사용자(USER)

CREATE

테이블이나 인덱스, 뷰 등 다양한 데이터베이스 객체를 생성하는 구문 테이블로 생성된 객체는 DROP구문을 통해 제거할 수 있다.

작성법

CREATE TABLE 테이블명 (
      컬럼명 자료형(크기), 
      컬럼명 자료형(크기),
      ...);

컬럼에 주석 달기

COMMENT ON COLUMN 테이블명.컬럼명 IS '주석내용';

서브쿼리를 이용한 테이블 생성 컬럼명, 데이터 타입, 값이 복사되고, 제약조건은 NOT NULL만 복사됨 데이터가 없는 빈 테이블로 복사하고 싶으면 조건식의 결과를 무조건 FALSE로 만들어라
```
CREATE TABLE 테이블명
AS 서브쿼리;
```

자료형 NUMBER : 숫자형(정수, 실수) CHAR(크기) : 고정길이 문자형 (2000BYTE) -> ex) CHAR(10) 컬럼에 'ABC' 3BYTE 문자열만 저장해도 10BYTE 저장공간을 모두 사용. VARCHAR2(크기) : 가변길이 문자형 (4000 BYTE) -> ex) VARCHAR2(10) 컬럼에 'ABC' 3BYTE 문자열만 저장하면 나머지 7BYTE를 반환함. DATE : 날짜 타입 BLOB : 대용량 이진 데이터 (4GB) (Byte Long Of Byte) CLOB : 대용량 문자 데이터 (4GB) (Charater Long Of Byte)

CONSTRAINTS (제약 조건)

사용자가 원하는 조건의 데이터만 유지하기 위해서 특정 컬럼에 설정하는 제약. 데이터 무결성 보장을 목적으로 함.

NOT NULL

해당 컬럼에 반드시 값이 기록되어야 하는 경우 사용 삽입/수정시 NULL값을 허용하지 않도록 컬럼레벨에서 제한 NOT NULL은 컬럼 레벨만 지정 가능하다.

CREATE TABLE 테이블명(
    컬럼명 자료형 NOT NULL,
    컬럼명 자료형,
    ...
);

UNIQUE

컬럼에 입력 값에 대해서 중복을 제한하는 제약조건 컬럼 레벨에서 설정 가능, 테이블 레벨에서 설정 가능 단, UNIQUE 제약 조건이 설정된 컬럼에 NULL 값은 중복 삽입 가능

CREATE TABLE 테이블명(
    -- 컬럼 레벨
    컬럼명 자료형 UNIQUE,
    컬럼명 자료형 CONSTRAINT 제약조건명 UNIQUE,
    -- 테이블 레벨
    UNIQUE(컬럼명),
    CONSTRAINT 제약조건명 UNIQUE(컬럼명)
);

UNIQUE 복합키

두 개 이상의 컬럼을 묶어서 하나의 UNIQUE 제약조건을 설정한다. 지정된 모든 컬럼의 값이 일치해야 중복으로 판단 복합키는 테이블 레벨로만 설정 가능하다.

CONSTRAINT 제약조건명 UNIQUE(컬럼명1, 컬럼명2, ...)

PRIMARY KEY(기본키)

테이블에서 한 행의 정보를 찾기위해 사용할 컬럼을 의미한다. 테이블에 대한 식별자 역할을 한다. NOT NULL + UNIQUE 제약조건의 의미를 가진다 컬럼 레벨, 테이블 레벨 둘 다 설정 가능 여러 개의 컬럼을 묶어서 설정할 수 있다.

CREATE TABLE 테이블명(
    -- 컬럼 레벨
    컬럼명 자료형 PRIMARY KEY,
    컬럼명 자료형 CONSTRAINT 제약조건명 PRIMARY KEY,

    -- 테이블 레벨
    컬럼명 자료형
    , PRIMARY KEY(컬럼명)
    , CONSTRAINT 제약조건명 PRIMARY KEY(컬럼명1 [, 컬럼명2, ...])
);

FOREIGN KEY(외부키/외래키)

참조된 다른 테이블의 컬럼이 제공하는 값만 사용할 수 있음 이는 특정 값에 대한 중복을 제거하고(무결성 유지) 두 테이블이 같은 컬럼 값을 지니기에 JOIN을 활용할 수 있다 제공되는 값 외에는 NULL을 사용할 수 있음 FOREIGN KEY 제약조건에 의해서 테이블간의 관계(RELATIONSHIP)가 형성됨

-- 컬럼 레벨
컬럼명 자료형(크기) [CONSTRAINT 제약조건명] REFERENCES 참조할 테이블명 [(참조할 컬럼)] [삭제룰]

-- 테이블 레벨
[CONSTRAINT 제약조건명] FOREIGN KEY (적용할컬럼명) REFERENCES 참조할 테이블명 [(참조할 컬럼)] [삭제룰]

참조할 컬럼 미지정시 그 테이블의 PRIMARY KEY로 설정된 컬럼이 지정됨

FOREUGN KEY 삭제룰

ON DELETE RESTRICTED (기본 지정) FOREIGN KEY로 지정된 컬럼에서 사용되고 있는 값일 경우 제공하는 컬럼의 값은 삭제하지 못함
ON DELETE SET NULL 부모키 삭제 시 자식키를 NULL로 변경하는 옵션
ON DELETE CASCADE 부모키 삭제 시 자식키도 함께 삭제 부모키 삭제시 값을 사용하는 자식 테이블의 컬럼에 해당하는 행이 삭제가 됨

CHECK

컬럼에 기록되는 값에 조건 설정을 할 수 있음 비교값은 리터럴만 사용할 수 있음, 변하는 값이나 함수 사용 불가

-- 컬럼 레벨
컬럼명 자료형 [CONTRAINTS 제약조건명] CHECK(컬럼명 비교연산자 비교값)

-- 테이블 레벨
[CONTRAINTS 제약조건명] CHECK(컬럼명 비교연산자 비교값)

ALTER

테이블에 정의된 내용을 수정할 때 사용하는 데이터 정의어로 컬럼의 추가/삭제, 제약조건의 추가/삭제, 컬럼의 자료형 변경, DEFAULT 값 변경, 테이블 명/컬럼 명/제약 조건 명 변경 등을 할 수 있음

제약조건 추가 / 삭제

제약조건 추가

ALTER TABLE 테이블명
ADD [CONSTRAINT 제약조건명] 제약조건(컬럼명) [REFERENCES 테이블명[(컬럼명)]];

제약조건 삭제

ALTER TABLE 테이블명
DROP CONSTRAINT 제약조건명;

NOT NULL 제약조건은 다루는 방법이 다르다

ALTER TABLE 테이블명 MODIFY 컬럼명 [NOT] NULL;

컬럼 추가/수정/삭제

컬럼 추가

ALTER TABLE 테이블명 ADD(컬럼명 데이터타입 [DEFAULT '값']);

컬럼 수정

ALTER TABLE 테이블명 MOIDFY 컬럼명 데이터타입;   (데이터 타입 변경)
ALTER TABLE 테이블명 MOIDFY 컬럼명 DEFAULT '값'; (기본값 변경)

데이터 타입 수정 시 컬럼에 저장된 데이터 크기 미만으로 변경할 수 없다

컬럼 삭제

ALTER TABLE 테이블명 DROP (삭제할컬럼명);
ALTER TABLE 테이블명 DROP COLUMN 삭제할컬럼명;

테이블에는 최소 1개 이상의 컬럼이 존재해야 하기 때문에 모든 컬럼을 삭제할 순 없다.

이름 변경

컬럼명

ALTER TABLE 테이블명 RENAME COLUMN 컬럼명 TO 변경명;

제약조건명

ALTER TABLE 테이블명 RENAME CONSTRAINT 제약조건명 TO 변경명;

테이블명

ALTER TABLE 테이블명 RENAME TO 변경명;

DROP

테이블 삭제

DROP TABLE 테이블명 [CASCADE CONSTRAINTS];

CASCADE CONSTRAINTS 제약조건까지 모두 삭제하기 때문에 FK 제약조건이 있어도 삭제할 수 있다.

TCL (Transaction Control Languege) 트랜잭션 제어 언어

Mon, 28 Aug 2023 08:31:31 GMT

Transaction이란?

데이터베이스의 논리적 연산 단위
데이터 변경 사항을 묶어 하나의 트랜잭션에 담아 처리함
대상이 되는 데이터 변경 사항 : INSERT, UPDATE, DELETE (DML)
데이터 변경 사항을 잠시 담아두는 바구니라고 생각하자

COMMIT

메모리 버퍼(트랜잭션)에 임시 저장된 데이터 변경 사항을 DB에 반영
COMMIT된 내용은 ROLLBACK으로 취소 불가

ROLLBACK

메모리 버퍼(트랜잭션)에 임시 저장된 데이터 변경 사항을 삭제하고 마지막 COMMIT 상태로 돌아감.

SAVEPOINT

메모리 버퍼(트랜잭션)에 저장 지점을 정의하여 ROLLBACK 수행 시 전체 작업을 삭제하는 것이 아닌 저장 지점까지만 일부 ROLLBACK

사용법

SAVEPOINT 포인트명1;
  ...
SAVEPOINT 포인트명2;
  ...
ROLLBACK TO 포인트명1; -- 포인트1 지점 까지 데이터 변경사항 삭제

DML (Data Manipulation Language) 데이터 조작 언어

Mon, 28 Aug 2023 08:24:49 GMT

테이블에 값을 삽입하거나(INSERT), 수정하거나(UPDATE), 삭제(DELETE)하는 구문

INSERT

테이블에 새로운 행을 추가하는 구문

작성법

INSERT INTO 테이블명 VALUES(데이터1, 데이터2, ...);

INSERT INTO 테이블명(컬럼명1, 컬럼명2, ...) VALUES(데이터1, 데이터2, ...);

INSERT시 VALUES 대신 서브쿼리 사용 가능 이 경우 VALUES 생략
```
INSERT INTO 테이블명 (서브쿼리);
```

UPDATE

테이블에 기록된 컬럼의 값을 수정하는 구문

작성법

UPDATE 테이블명 SET 컬럼명1 = 바꿀값1, 컬럼명2 = 바꿀값2 ... [WHERE 컬럼명 비교연산자 비교값];

조건절을 설정하지 않고 구문을 실행하면 모든 행의 컬럼 값이 변경된다.

UPDATE시에도 서브쿼리 사용 가능

UPDATE 테이블명 SET (컬럼명1, 컬럼명2, ...) = (서브쿼리);

MERGE (참고)

구조가 같은 두 개의 테이블을 하나로 합치는 기능

테이블에서 지정하는 조건의 값이 존재하면 UPDATE 조건의 값이 없으면 INSERT된다. EX)

MERGE INTO EMP_M01 USING EMP_M02 ON(EMP_M01.EMP_ID = EMP_M02.EMP_ID)
WHEN MATCHED THEN -- 같은 사번이 존재하면 UPDATE
UPDATE SET
EMP_M01.EMP_NAME = EMP_M02.EMP_NAME,
EMP_M01.EMP_NO = EMP_M02.EMP_NO,
EMP_M01.EMAIL = EMP_M02.EMAIL,
EMP_M01.PHONE = EMP_M02.PHONE,
EMP_M01.DEPT_CODE = EMP_M02.DEPT_CODE,
EMP_M01.JOB_CODE = EMP_M02.JOB_CODE,
EMP_M01.SAL_LEVEL = EMP_M02.SAL_LEVEL,
EMP_M01.SALARY = EMP_M02.SALARY,
EMP_M01.BONUS = EMP_M02.BONUS,
EMP_M01.MANAGER_ID = EMP_M02.MANAGER_ID,
EMP_M01.HIRE_DATE = EMP_M02.HIRE_DATE,
EMP_M01.ENT_DATE = EMP_M02.ENT_DATE,
EMP_M01.ENT_YN = EMP_M02.ENT_YN
WHEN NOT MATCHED THEN -- 같은 사번이 존재하지 않으면 INSERT
INSERT VALUES (EMP_M02.EMP_ID, EMP_M02.EMP_NAME, EMP_M02.EMP_NO,
             EMP_M02.EMAIL, EMP_M02.PHONE, EMP_M02.DEPT_CODE,
             EMP_M02.JOB_CODE, EMP_M02.SAL_LEVEL, EMP_M02.SALARY,
             EMP_M02.BONUS, EMP_M02.MANAGER_ID, EMP_M02.HIRE_DATE,
             EMP_M02.ENT_DATE, EMP_M02.ENT_YN);

DELETE

테이블의 행을 삭제하는 구문

작성법

DELTE FROM 테이블명 WHERE 조건설정;

WHERE 조건을 설정하지 않으면 모든 행 삭제
SELECT문과 유사하다

객체 배열

Sun, 13 Aug 2023 07:35:10 GMT

객체 참조형 변수를 저장하는 배열로 배열의 자료형을 클래스명(사용자 정의 자료형)으로 지정하여 활용

객체 배열 선언

클래스명[ ] 배열명; 클래스명 배열명[ ] ;
```
Academy[] arr;
Academy arr[];
```

객체 배열 할당

배열명 = new 클래스명[배열크기] ;
```
arr = new Academy[5];
```

선언과 동시에 할당

클래스명 배열명[ ] = new 클래스명[배열크기];
```
Academy[] arr = new Academy[5];
```

인덱스를 이용한 초기화

배열명[i] = new 클래스명();

arr[0] = new Academy(1, "KH정보교육원");
arr[1] = new Academy(2, "케이에이치");

선언과 동시에 할당 및 초기화

클래스명 배열명[ ] = {new 클래스명( ), new 클래스명( )};

Academy arr[] = {
  new Academy(1, "KH정보교육원"), 
  new Academy(2, "케이에이치") };

firecurry_94.log

Thymeleaf

템플릿 엔진

Thymeleaf

Thymeleaf 사용 준비

Thymeleaf 문법

Spring El

Spring Boot

Spring Boot란?

Spring Boot란?

Spring Boot의 장점

Spring Framework

Library란?

Framework란?

Framework의 특징

장점

단점

Framework의 종류

Spring Framework 개요

Spring Framework란?

Spring Framework의 특징

Spring의 구성 모듈

Spring 모듈 정리

JavaScript 기능

데이터 입출력

innerText

innerHTML

[window.]alert()

[window.]confirm()

[window.]prompt()

요소접근방법

id로 접근하기

class로 접근하기

name으로 접근하기

tag로 접근하기

CSS 선택자로 접근하기

변수 선언 위치에 따른 구분

ES5 이전 버전

ES6 이후

이벤트

인라인(inline) 이벤트 모델

고전 이벤트 모델

표준 이벤트 모델( 요소.addEventListener() )

HTML 요소의 기본 이벤트 제거

JavaScript

개요

Script 언어

JavaScript

JavaScript 작성 방법

반응형 웹(미디어쿼리)

반응형 웹

@media (미디어 쿼리)

min-width

min-height

max-width

max-height

@media 미디어유형 and (속성)

FlexBox

FlexBox

flex의 구성

flex의 축

flex container 전용 속성

display : flex

flex-direction

row

row-reverse

column

column-reverse

justify-content

flex-start

flex-end

center

space-around

space-evenly

space-between

align-items

stretch

flex-start

flex-end

center