프로그래밍 공부 노트

  데이터 속성 ( data-set, data-* ) 데이터 속성은 DOM 요소에 데이터를 저장할 수 있고, 해당 데이터를 event.target.dataset.정의한이름 으로 해당 값에 접근하여 값을 다룰 수 있다. 사용 방법은 DOM 요소에 속성으로 data-원하는이름 을 작성하면 된다. < span id ={ item . id } data-content ={ item . content } role = " presentation " onClick ={ handleModifyComment } style ={{ cursor : ' pointer ' }} > 수정 </ span > 주의할점 data- 뒤에 불가능 대문자 영어 data- 뒤에 가능 소문자 영어, 하이픈( - ), 언더스코어( _ ), 피어리드( . ), 콜론( ; ) 예전에 배웠을 당시에 따로 정리는 하지 않았는데 프로젝트를 진행하면서 아주 유용하게 사용해서 정리를 했다.

box-sizing 속성은 박스 너비의 기준을 정하는 속성이다. 웹 사이트에 여러 요소를 배치하려면 각 요소의 너비를 계산해야 한다. 기본적으로 CSS의 width 속성은 콘텐츠 영역의 너비를 나타내기 때문에 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산해야 한다. 이런경우 box-sizing 속성을 사용하면 콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐서 width 속성을 지정할 수 있다. 기본형 box-sizing: content-box ㅣ border-box  content-box 는 기본값이며 width 속성 지정시 패딩, 테두리를 제외한 오직 컨텐츠만의 크기를 나타낸다. border-box 는 지정한 width 속성 값 안에 패딩, 테두리 크기를 포함한다. box-sizing: content-box; => 1000px + padding 20px + border3px => 화면에 출력되는 width => 1023px box-sizing: border-box; => 1000px + padding 20px+ border3px => 화면에 출력되는 width => 1000px (977px + 20px + 3px) 화면상에 컨텐츠를 배치하려면 박스 모델의 너비 값을 정확히 계산해야하는데 만약 width 값을 계산하기 어렵다면 box-sizing: border-box;로 지정하여 박스 모델 너비를 조절하기 쉽도록 하는것도 좋은 방법이다.

 CSS 기본적인 레이아웃 잡기 우리나라 사람이라면 모두 사용해봤을 네이버(naver)를 예로들어 레이아웃을 잡아보려고한다. 네이버를 기준으로 웹사이트의 기본적인 레이아웃을 잡을때 가장 먼저 div태그로 가로 행의 갯수를 잡는다.(사이트마다 상이하다.) 대충 딱 봤을때 3등분이 되어있다는 느낌이 강하게 느껴진다. (자세히 보지않아서 모르겠지만 더 세세하게 나눠져있을 수 있다.) 총 가로 3행으로 나눈것을 볼수있다. 이럴경우  <div>1</div> <div>2</div> <div>3</div> 와 같이 화면의 가로 너비 100%를 차지하는 div태그로 나눌수있다. 컨텐츠를 직접 작성하기는 어려워 컨텐츠대신 숫자만 대입했다. 그 후 자세히 보면 가로로 3등분 되어있다는 느낌이 확든다. 공백 | 컨텐츠 | 공백 공백 | 컨텐츠 | 공백 으로 되어있는데 이것은 따로 div태그로 나눴다기보다는 데이터들을 담고있는 div태그에 가로 너비(width)를 지정하여 가운데 정렬 시킨것이다.  가운데 정렬은 style 속성으로 margin: 0 auto; 를 작성하면 가운데 정렬이 된다. margin: 0 auto; 은 margin-top, margin-bottom 은 0, margin-right, margin-left 는 auto 이다. 이렇게 div태그로 가운데 정렬된 데이터를 자세히보면 컨텐츠사이에 여백이있고 2열로 나란히 정렬되어있다는 느낌이 든다. (개발자 도구로 확인하면 2열로 나뉜다.) 이것또한 div태그로 열을 지정해준것이다.  네이버에서 지정한 크기와는 다르지만 가운데 정렬한 최상위 div태그의 너비(width)가 1000px이라고 한다면 그 최상위 div태그 안에 작성되는 div들의 너비 100%는  1000px 이다. div태그는 기본적으로 display: block; 속성을 가지고있어서 기본적으로 2열이 아닌 2행이 만들어진다. 2열을 만들고자 한...

PL/SQL이란 Procedural Language PROCEDURE, FUNCTION, PACKAGE , TRIGGER를 제작할 때 사용하는 언어이다. PROCEDURE : 리턴형이 없는 함수 리턴형이 없다는 특징이 자바스크립트 언어와 같음 캐시 메모리에 저장되어 속도가 빠르다. 트랜젝션 제어할 때 사용된다. FUNCTION : 리턴형이 있는 함수 함수 : 독립(C언어) 메소드 : 클래스 종속 PACKAGE : 관련된 PROCEDURE , FUNCTION 을 모아서 둔 곳 TRIGGER : 이미 지정된 이벤트 발생시에 자동 처리 사용자 정의 언어이다. 반복구간이 많을 때 재사용하여 코드를 단축하기 위함이 목적이다. 코드를 통해 PL/SQL 내용이 드러나지 않기 때문에 정보 보안에 유리하다. PL/SQL BLOCK 기본 구성 형식 DECLARE -- 선언부(변수선언) BEGIN -- 구현부 -- 예외처리 (생략 가능) END; / 사용시 유의사항 SELECT에서 실행된 결과값을 받을 때, INTO를 사용한다. 변수에 값 설정 할 때,  := 를 사용한다. PL/SQL에서 변수의 의미와 사용법 변수 지역변수 매개변수 : SUBSTR(‘‘,1,2) MAX(컬럼명) 변수 사용법 스칼라변수  : 단순 변수(NUMBER,VARCHAR2,CLOB,DATE) id VARCHAR2(10) SET SERVEROUTPUT ON; DECLARE vempno NUMBER(4); vename VARCHAR2(20); vjob VARCHAR2(20); vhiredate DATE; vsal NUMBER(7,2); BEGIN SELECT empno,ename,job,hiredate,sal INTO vempno,vename,vjob,vhiredate,vsal FROM emp WHERE empno=7788; -- 출력 DBMS_OUTPUT.PUT_LINE('======결과======'); DBMS_...