본문 바로가기

전체 글206

[자바스크립트] 00. 개요 ㅁ css든 자바스크립트든 다 html 문서 내에 작성. ㅁ 자바스크립트 언어를 기반으로한 프론트엔드 라이브러리가 엄청 많다. 리액트, 노드, 뷰 등  ㅁ 1) HTML : 웹 문서의 큰 틀 (뼈대)2) CSS : 웹 문서의 스타일(색상, 디자인, 간격, 배치 등)3) JavaScript : 웹 문서내의 동적인 처리들을 담당                        특정 이벤트(클릭, 드래그 앤 드랍 등) 발생시 수행되어야되는 동작들 처리  ㅁ 자바스크립트는 html, css처럼 단순하지 않음. 자바처럼 하나의 프로그래밍 언어다.  ㅁ - 자바와 무관. 옛날에는 모카라는 이름. - 브라우저 전쟁하면서 단기간에 개발되어서 자유도가 되게 높아서 어려워 한다.- 하필 문법이 자바와 비슷하다. 하지만 자바와는 .. 2024. 8. 8.
[css] 마무리 ㅁ 초반 10분 ㅁ transition - 이행(움직임 과정) 스타일 속성 1. transition-property : 이행 과정을 볼 css속성을 지정 2. transition-duration : 이행 시간을 지정 (3s == 3초) (3초동안 지속. 3초에 걸쳐서.) 3. transition-timing-function : 이행 과정이 동작하는 방식을 지정 ease, ease-in, ease-out, linear  ㅁdiv class="box1">box1div>     style>    .box1 {        box-sizing: border-box;        width: 100px;        height: 100px;        border: 1px solid gray;    }    .. 2024. 8. 8.
[CSS] 04. 레이아웃 스타일 ㅁ 큰 것부터 작은 것순으로 설계한다.ㅁ 반응형을 생각하지 않고 브라우저 화면 제일 큰 화면을 기준으로 생각한다.  - 테두리는 레이아웃 다 잡고 지워주면 된다.  DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    title>Documenttitle>    style>        * { /* 모든 요소를 가리킴 */            box-sizing: border-box;            border: 1px solid red;        }        .wrap {            width: 100%;    /* 상위요소(화면전체)의 100*를 다 사용 */            max-width: 1300px; /* 단, .. 2024. 8. 7.
[CSS] 05. Flex 스타일 ㅁ display: flex;- display로 인라인 요소를 블럭 요소로, 블럭 요소를 인라인 요소로, 인라인 요소와 블럭 요소의 특징을 다 가지게 할 수 있었다.- display: flex를 요즘 많이 쓴다. - 부모 컨테이너에 display: flex; 설정시 자식 컨테이너들은 flexible item이 된다.  - 컨테이너는 (html)요소들을 의미한다.    ㅁ 용어 - CSS에서 부모 요소에 display: flex를 설정하면, 그 부모 요소는 flex 컨테이너가 되고,이 부모 요소의 자식 요소들은 자동으로 flex 아이템이 됩니다. (1) 부모 : flex container- 이 컨테이너는 자식 요소들의 배치와 정렬을 제어하는 역할을 합니다. (2)  자식 : flex item- flexbo.. 2024. 8. 7.
[CSS] 04. 레이아웃 스타일 ㅁ  DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    title>Documenttitle>    style>        .wrap1 * {            background-color: yellow;            margin: 10px;            width: 100px;            height: 100px;        }        .wrap1 > div {            display: block; /* div는 dispaly 기본값이 block */        }    style>head>body>    div class="wrap1">        div>블럭요소div>        span>.. 2024. 8. 6.
[CSS] 실습문제 ㅁ 실습문제01_달력만들기 문제  DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    style>        /*             하단의 html 요소를 활용하여 style을 적용시켜 사진과 같은 달력모양으로 보여지도록 하시오.             특정 날짜에 마우스를 올리게 되면 해당 날짜의 배경색이 베이지 색상이 되도록 부여하시오.            html 요소에 추가적인 속성을 부여하셔도 됩니다.                    */    style>hea.. 2024. 8. 6.
[CSS] 테이블 관련 스타일 ㅁ 에밋      table.table1      table class="table1">table>        (tr>td*3)*3             tr>                td>td>                td>td>                td>td>            tr>            tr>                td>td>                td>td>                td>td>            tr>            tr>                td>td>                td>td>                td>td>            tr>   ㅁ 테이블 만들 때 border를 지금도 많이 쓰는데 사실.. 2024. 8. 6.
[CSS] 03. 색상 스타일 ㅁ DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    title>Documenttitle>    style>        .box1 {            width: 100px;            height: 50px;            /* 배경색 */ background-color: orange;        }    style>head>body>        div class="box1">div>body>html> - background는 단축 속성. 정확히는 background-color다 세분화하면. 후자로 써라. ㅁ  DOCTYPE html>html lang="en">head>    meta charset="UTF-8">   .. 2024. 8. 6.
[CSS] 02. 텍스트 스타일, 04. 레이아웃 스타일 ㅁ Emmet 문법 몇가지     p#p$*4      p id="p1">p>    p id="p2">p>    p id="p3">p>    p id="p4">p>  - p 태그 아이디 값으로 p1, p2, p3, p4 부여한다.이때 시작태그와 종료태그 사이에 들어갈 문구는 중괄호에 쓴다.     p#p${글꼴 및 텍스트 Style Test}*4     p id="p1">글꼴 및 텍스트 Style Testp>    p id="p2">글꼴 및 텍스트 Style Testp>    p id="p3">글꼴 및 텍스트 Style Testp>    p id="p4">글꼴 및 텍스트 Style Testp>      ㅁ 텍스트 관련 스타일1- 글꼴 : font-family- 크기 : font-size- 굵기 : fon.. 2024. 8. 6.
[CSS] 01. 기초선택자 ㅁ - Cascade Style Sheet- HTML 문서상의 요소들에 스타일을 지정하는 언어  ㅁ 참고로 style 태그를 body에 작성해도 상관없지만 head에 작성하는 것이 권장된다.   ㅁ CSS 스타일 지정 방식 (1) internal 내부 방식- html 문서 내에 태그를 통해 스타일 구문을 작성하는 방식 (2) external 외부 방식- 별도의 *.css 파일에 스타일 구문을 작성한 후 html 문서에 태그로 가져오는 방식(여러 태그에 스타일 구문을 작성하면 너무 길어짐) (3) inline 인라인 방식- 요소 내에 style 속성을 통해 스타일 구문을 작성하는 방식  ㅁ 기본적인 스타일 작성 구조- 선택자로 요소를 선택. 중괄호 안에 어떤 스타일을 적용할건지. 선택자 {    sty.. 2024. 8. 5.
07. 폼 관련 태그 ㅁ input >- 사용자에게 값을 입력받을 수 있는 텍스트 상자 또는 체크 박스 등을 만들 수 있다.- 인라인 요소(자동 줄바꿈 안 됨) - 형식   ㅁ type 종류 (많은데 다 외워야 함. 다 자주 쓰임)- 텍스트 관련 : text(기본값), password, search, url, email, tel- 숫자 관련 : number, range- 날짜 관련 : date, month, week, time, datetime-local- 선택 관련 : radio, checkbox- 버튼 관련 : button, submit, reset- 기타 : file, color, hidden   ㅁ 주요 속성- placeholder : 안내 메세지- size : 입력란의 크기- value : 입력란에 표현할 값 / 사.. 2024. 8. 5.
HTML 실습문제 ㅁ 문제 1 - 글자태그, 목록태그 DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    title>Documenttitle>head>body>    h1>자바(Java) 학습내용h1>    h2>담당 강사 : 강보람h2>    p>이메일 : teacherboram@gmail.comp>    hr>    ul type="disc">         li>프로그래밍 언어            ul type="circle">                li>s>Javas>li>            ul>        li>          li>데이터베이스            ul type="circle">                li>s>Oracle.. 2024. 8. 2.
03. 표 관련 태그 05. 멀티미디어 관련 태그 ㅁ 표 관련 태그- table, thead, tbody, tfoot, tr, td, th- 방대한 자료들을 정리할 때 주로 사용- 행과 열로 구성되어 있고 행과 열이 만나는 지점을 "셀"이라고 표현한다.   ㅁ 태그 종류 (1) - 표를 생성해주는 태그 (2) - 표 내의 한 행을 표현해주는 태그 (3) - 표 내의 제목 셀을 표현해주는 태그 (글자 가운데정렬, 굵게 표현) (4) - 표 내의 일반 셀을 표현해주는 태그   ㅁ 기본 형식             문구        문구                 문구        문구     - 참고로 테두리 두께를 주지 않으면 테두리가 보여지지 않음.- 셀마다 가로길이 세로길이를 지정할 수 있다.크기를 지정하지 않으면 작성한 문구에 맞춰서 가로세로길이가 .. 2024. 8. 2.
1. HTML5 - (1) 웹 통신 기초, HTML 개요, 개발 환경 설정 ㅁ 웹페이지에서 우클릭 - "검사(f12)" or "페이지 소스 보기"하면 소스코드 볼 수 있다. 웹 브라우저로. ㅁ 브라우저마다 속성도 되는 것도 있고 안되는 것도 있음. 크롬으로 통일함.    [웹 통신 기초] ㅁ 인터넷과 웹은 다른 개념이다. ㅁ 인터넷은 전 세계적으로 모든 네트워크가 연결. 연결된 네트워크 망을 인터넷이라 함.인터넷은 웹이 아니다. 엄연히 다른 개념. ㅁ 웹(WEB)은 인터넷이라는 망 위에서 가능한 서비스이다.    ㅁ 외국에선 인터넷 익스플로러(IE) 안 씀. 근데 우리나라는 아직도 조금 씀.전세계적으로는 크롬을 가장 많이 씀.  ㅁ- 사용자가 웹브라우저를 키고 접속하고자 하는 url주소를 써서 보냄(엔터). 이게 구글 서버(측)에 요청을 보내는 것이다.- 구글 서버는 매 페이지.. 2024. 8. 2.
7. JDBC MVC패턴 실습문제 & 최종정리 [ 상품관련프로그램_실습문제 ][ 상품관련프로그램_실습문제_최종 ]    [ 상품관련프로그램_실습문제 ]      ============================================================================== [ 상품관련프로그램_실습문제_최종 ]    CREATE TABLE PRODUCT_IO (     IO_NUM      NUMBER(5)       PRIMARY KEY   , PRODUCT_ID  VARCHAR2(30)    REFERENCES PRODUCT ON DELETE CASCADE   , IO_DATE     DATE            DEFAULT SYSDATE NOT NULL    , AMOUNT      NUMBER(5)       NO.. 2024. 8. 1.
5. Properties ㅁ4번째 프로젝트 복붙으로 가져와서 05_MVC_JDBC_Porperties,Dynamic으로 변경.- 정적 코딩방식을 동적 코딩 방식으로 바꾸는 걸 해본다.  ㅁ run 패키지에 PropertiesTest 클래스 만들고 프로퍼티스 복습.  ㅁ - Map 계열의 컬렉션이라 key:value 세트로 저장된다.- 순서 유지 x, 중복 저장 x(가장 최근에 저장한 것으로 저장됨)- key도 value도 String 타입이다.- setProperty(key, value) : 데이터 담기- getPropery(key) : value 꺼내기  ㅁ 프로젝트 우클릭 - new - folder로 폴더 만들기- 보통 외부 자원들을 보관하는 폴더로 resources라는 이름을 씀.  ㅁ list, set, map 참조타입 .. 2024. 8. 1.
4. 모듈화 작업 & static import ㅁ static import import com.br.common.JDBCTemplate; 이 아닌import static com.br.common.JDBCTemplate.*; 하면  Connection conn = JDBCTemplate.getConnection();JDBCTemplate.close(conn);이 아닌 Connection conn = getConnection();close(conn);이 가능하다.   ㅁ 모듈화 작업- 지금까지 매번 똑같은 구문을 작성하고 있는데 한번만 정의하고 재사용하는 것을 모듈화라고 한다. - Service 클래스의 구문을 모듈화해서 재사용한다.- JDBCTemplate으로 공통코드 최소화.   ㅁ Service는 Dao의 역할을 분담한다.   (1) jdbc dr.. 2024. 7. 31.
3. PreparedStatement ㅁ - 둘 다 sql문을 실행하고 결과를 받아내는 객체다. - Statement가 PreparedStatement의 부모다. (상속구조) - Statement는 완성 형태의 sql문을 전달하면서 곧바로 실행한다.완성 형태란 실제 데이터값들이 다 채워진 상태를 말한다. - PreparedStatement는 미완성 형태의 sql문을 임시로 가지고 있다가 완성시킨 후 실행시킬 수 있다.미완성 형태란 실제 데이터값이 채워질 공간을 ?(홀더)로 공간을 확보해둔 상태로 작성해둔 형태를 말한다.ex) insert into 테이블 values(?, ?, ?)  ㅁ  (1) Connection 객체를 통해 Statement 객체 생성     stmt = conn.createStatement();  (2) sql문을 전달.. 2024. 7. 30.
2. JDBC에 MVC 패턴 적용하기 ㅁ MVC 흐름 (서비스 없는 경우) - 컨트롤러와 Dao 사이에 Service라는 단계를 하나 추가한다.- Service는 비즈니스 로직을 처리하는 클래스.근데 아직은 제대로된 비즈니스 로직을 작성할 건 없다. 나중 웹개발 때.  ㅁ MVC 흐름 (서비스 있는 경우) - service는 com.br.service로 빼기도 하고 com.br.model.service로 빼기도 한다.  ㅁ Service는 Dao의 역할을 분담한다.   (1) jdbc driver 등록  (2) Connection 객체 생성  (3) Statement 객체 생성  (4), (5) select문을 전달하면서 실행 후 결과(ResultSet) 받기              or insert, update, delete문을 전달하면.. 2024. 7. 29.
1. JDBC 기본 ㅁ 자바와 오라클 연동- 실제 DB상의 데이터를 자바 프로그램 상에서 조회하거나, DB에 데이터를 insert 하거나 update, delete 한다.  ㅁ (sql developer) 관리자 계정에서 계정 만들기CREATE USER JDBC IDENTIFIED BY JDBC;GRANT CONNECT, RESOURCE TO JDBC;  ㅁ (sql developer) 테이블 생성하고 데이터 삽입  - DML문은 실제 DB에 반영되지는 않음. 트랜잭션에만 쌓여 있다. COMMIT을 해야 실제 DB에 적용된다. 자바 프로그램에서 DB의 데이터를 조회할 때는 실제 DB로부터 조회함.  - CRUD : CREATE(INSERT), READ(SELECT), UPDATE(UPDATE), DELETE(DELETE)-.. 2024. 7. 29.
13. OBJECT(TRIGGER) ㅁ PL/SQL에 이름을 붙여서 객체로 만들 수 있음. 프로시저로도 만들 수 있고 트리거로도 만들 수 있다.- PL/SQL 코드를 객체화하여 저장 프로시저나 트리거로 만들 수 있습니다.  ㅁ - 특정 테이블에 변경사항(이벤트) 발생시(DML문) 묵시적으로(자동으로) 실행시킬 내용을 정의해둘 수 있는 데이터베이스 객체.- 한번 정의해두면 내가 매번 실행 안해도 됨.- PL/SQL 구문을 이용해서 생성  ㅁ 트리거 종류 (1) SQL문 실행시기에 따라- BEFORE TRIGGER : 특정 테이블에 이벤트가 발생되기 전에 트리거 실행- AFTER TRIGGER : 특정 테이블에 이벤트가 발생된 후에 트리거 실행  (2) SQL문에 영향을 받는 행수에 따라 - STATEMENT TRIGGER(문장 트리거) : .. 2024. 7. 25.
12. PL/SQL ㅁ PL/SQL은 데이터베이스 객체같은 것은 아니고 문법이다.  ㅁ - Procedure Language extension to SQL- 오라클 내에 내장되어 있는 절차적 언어- 변수의 정의, 조건/반복처리  ㅁ PL/SQL 구조- 선언부 : DELCARE로 시작. 변수 및 상수를 선언 및 초기화 가능.- 실행부 : BEGIN으로 시작. 실행부는 필수로 작성해야 한다. SQL문 또는 제어문(조건/반복) 로직 기술 가능.- 예외처리부 : EXCEPTION으로 시작. 예외발생시 실행할 구문을 미리 정의.  ㅁ 화면에 문구 출력  ㅇ 출력결과를 보기 위해서 SERVEROUTPUT 옵션을 ON으로 설정해야 한다. (기본값은 OFF이다)  SET SERVEROUTPUT ON;   ㅇ BEGIN~END; 는 필수다.. 2024. 7. 25.
11.OBJECT(VIEW) ㅁ - 쿼리문(SELECT문)을 저장해둘 수 있는 데이터베이스 객체.- 내가 자주 쓰는 쿼리문을 저장해두는 것.- 임시 테이블처럼 활용할 수 있음.실제 데이터가 존재하는 물리적 테이블은 아니고, 논리적인 테이블이다.- VIEW를 통해 DML문 수행시 많은 제약이 있으므로 조회용으로만 쓰는 것을 권장함.  ㅁ 이전까지는 다 작성해야 했다. ㅇ '한국'에서 근무하는 사원의 사번, 이름, 부서명, 급여, 근무국가명 조회 SELECT EMP_ID, EMP_NAME, DEPT_TITLE, SALARY, NATIONAL_NAME FROM EMPLOYEE JOIN DEPARTMENT ON DEPT_CODE = DEPT_ID JOIN LOCATION L ON LOCATION_ID = LOCAL_CODE JOIN NAT.. 2024. 7. 24.
10. OBJECT(SEQUENCE) ㅁ - 일련번호를 생성해주는 데이터베이스 객체- 주로 기본키 컬럼값으로 사용됨. (회원번호, 사원번호, 게시글번호 등)  ㅁ 시퀀스 생성 CREATE SEQUENCE 시퀀스명                        //      이렇게만 해도 시퀀스는 생성됨. [START WITH 시작숫자]                                    //      몇번부터 시작할지 지정 가능. (기본값1)[INCREMENT BY 증가값]                                  //      몇씩 증가할지도 지정 가능. (기본값1)[NOMAXVALUE | MAXVALUE 숫자]                  //      상한값 지정할 수도 있고, 안할 수도 있음. (기본값 겁나큼.. 2024. 7. 24.
09. TCL(COMMIT, ROLLBACK + SAVEPOINT) ㅁ DCL은 데이터 제어어TCL은 트랜잭션 제어어 ㅁ - Transaction Contol Language 트랜잭션 제어어- 트랜잭션은 데이터베이스의 논리적 연산단위(업무단위)- 데이터의 변경이 실제 바로 DB에 반영되지 않음. 추가, 수정, 삭제가 된 것처럼 보이지만 실제론 안되어있음.변경 사항들이 하나의 트랜잭션으로 묶여있다.  ㅁ TCL 종류- COMMIT : 트랜잭션에 포함되어있는 변경사항을 실제 DB에 반영시키고 트랜잭션 소멸- ROLLBACK : 트랜잭션에 포함되어있는 변경사항을 삭제(취소)한 후 트랜잭션 소멸 - SAVEPOINT : 현재 시점에 특정 세이브포인트명으로 임시저장점을 만든다.                          롤백시 전체 취소가 아니라 일부만 롤백 가능. ㅁ 트랜잭션.. 2024. 7. 24.
08_DDL(ALTER, DROP) + DCL(GRANT, REVOKE) ㅁ DDL들은 롤백이 불가능하다.  ㅁ - 데이터베이스 객체(구조)를 변경하는 언어 (DDL)  ALTER 데이터베이스객체 객체명 변경할내용;  - 변경할 객체가 테이블일 경우 (지금은 테이블밖에 안배웠음) ALTER TABLE 테이블명 변경할내용; (1) 컬럼 추가/수정/삭제(2) 제약조건 추가/삭제(3) 컬럼명/제약조건명/테이블명 변경   (1) 컬럼 추가/수정/삭제  i) 컬럼 추가(ADD) ALTER TABLE 테이블명  ADD 컬럼명 데이터타입 [DEFAULT 기본값] - DEPT_COPY에 CNAME과 LNAME 컬럼 추가 ALTER TABLE DEPT_COPY ADD CNAME VARCHAR2(20);ALTER TABLE DEPT_COPY ADD LNAME VARCHAR2(20) DEFAUL.. 2024. 7. 23.
07_DML(INSERT, UPDATE, DELETE) ㅁ - Data Manipulation Language 데이터 조작어- 데이터값을관리(삽입, 수정, 삭제)하는 언어- INSERT(삽입), UPDATE(수정), DELETE(삭제)  ㅁ INSERT- 테이블에 새로운 행을 추가하는 구문. (행단위로 추가가 된다)  (1) 테이블의 모든 컬럼값을 제시해서 한 행 추가 INSERT INTO 테이블명 VALUES (값, 값, 값, ... ); - 테이블에 존재하는 컬럼의 순서대로 모든 값을 작성해야 한다.  INSERT INTO EMPLOYEE VALUES ( 900, '이춘향', '980918-2222211', 'jang_ch@br.com', '01011112222,                                                    .. 2024. 7. 23.
06_DDL(CREATE) ㅁ SQL DEVELOPER에서 관리자 계정으로 접속해서 새 계정 생성. CREATE USER DDL IDENTIFIED BY DDL;GRANT CONNECT, RESOURCE TO DDL; - 초록색 플러스 아이콘(접속창)에서, DB 서버가 있다면 [세부정보]-[호스트이름]에 그 IP 주소를 칠 텐데 본인 PC를 쓸 거라 그냥 localhost 쓰면 됨.  ㅁ 새로 만든 계정이라 테이블이 없다.- 데이터를 보관하기 위해서는 테이블이 필요하다.    ㅁ - Data Definition Language 데이터 정의어- 데이터베이스 객체들(생성, 수정, 삭제)을 관리하는 언어- CREATE, ALTER, DROP, RENAME, TRUNCATE   ㅁ 데이터베이스 객체 - 저것들이 다 객체다.- 자바의 객체.. 2024. 7. 22.
데이터베이스 활용 실습문제 모음 [ 01_SELECT(기본문법 및 함수)_실습문제 - 01_SCOTT계정 실습문제  ][ 종합실습문제1_춘대학 - SQL01_SELECT(basic) ][ 종합실습문제1_춘대학 - SQL02_SELECT(FUNCTION) ] [ 02_SELECT(JOIN)_실습문제 - SELECT(JOIN)_실습문제_BR계정 ] [ 종합실습문제1_춘대학 - SQL_03_SELECT문제파일 ] [ 03_DDL(CREATE)_실습문제 ][ 종합실습문제1_춘대학 - SQL_04_DDL,DML_CNS계정_문제 ][ 종합실습문제2_도서관련문제 (ETC계정) ][ 종합실습문제3_상품관련문제 (ETC계정 ][ 종합실습문제4_축구관련문제 (SOCCER계정)][ 종합실습문제5_도서관련문제 (WORKSHOP계정) ]    [ 01_SEL.. 2024. 7. 19.
05. SUBQUERY ㅁ 서브쿼리 종류 ㅁ 서브쿼리는 대부분 단일행 서브쿼리가 많이 사용된다.  ㅁ - 하나의 쿼리문 안에 포함되어있는 또다른 쿼리문- 메인 쿼리를 위해 보조 역할을 수행- 서브쿼리가 먼저 실행되고 메인쿼리가 실행된다. ㅁ 서브쿼리의 종류- SELECT절 : 스칼라 서브쿼리- FROM절: 인라인 뷰- WHERE절 : 단일행, 다중행, 다중열, 다중행다중열 서브쿼리  ㅁ 예제 (노옹철 사원과 같은 부서에 속한 사원들 조회) SELECT DEPT_CODEFROM EMPLOYEEWHERE EMP_NAME = '노옹철';   //   D9 SELECT EMP_NAMEFROM EMPLOYEEWHERE DEPT_CODE = 'D9';  - 이 두 과정을 하나의 쿼리로 축약.  SELECT EMP_NAMEFROM EMPL.. 2024. 7. 19.

티스토리툴바