프로그래밍 공부 노트

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 이미지 스프라이트(image sprite) 이미지 스프라이트(image sprite)는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹브라우저는 서버에 이미지를 요청하게 된다. 하지만 사용되는 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 여러번 요청을 하게되므로 웹페이지의 로딩 시간이 오래 걸리게 된다.  이미지 스프라이트(image sprite)를 사용하면 이미지를 다운 받기 위한 서버 요청을 단 몇 번으로 줄일 수 있다. 모바일 환경과 같은 한정된 자원을 사용하는 플랫폼에서는 웹페이지의 로딩 시간을 단축해주는 효과가 있다. 또한 많은 이미지 파일을 관리하는 대신 몇개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편하다. 요즘 웹공부를하면서 참고하고있는 우리나라의 대표적인 웹사이트 네이버를 보면 개발자 도구를 확인해보면 네이버에서 사용되는 이미지들이 한곳에 모여있는것을 확인할 수 있다. 적어도 20개 이상의 이러한 이미지들을 20번이상 서버에 요청하지않고 단 한번의 요청으로 불러와서 이미지의 좌표를 이용하여 화면에 출력할 수 있다. 일단 사진을 불러오고 사진을 출력할 크기를 width와 height로 지정한다. position 속성으로  사진에서 가져오고자하는 이미지의 위치를 x 축과 y축 좌표를 작성한다. 특이한점은 양수로 작성하지않고 -로 시작하며 시작은 맨왼쪽 상단에서 부터 시작된다. repeat 속성을 작성한 이유는 이미지를 불러와서 사용할때 빈 여백이 발생하면 빈공간을 불러온 이미지로 채워넣게되면서 반복이 발생되는데 이를 방지하기 위함이다. size속성은 불러온 이미지의 크기를 조정해준다. 

 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열을 만들고자 한다면 2개의 div태그의 속성을 displa

inline display 속성이 inline으로 지정된 엘리먼트는 줄 바꿈 없이 컨텐츠가 옆으로 나란히 나열된다. 대표적으로 <span> 태그가 inline 속성을 가진 태그이다. display: inline 속성을 사용할 때 주의할점이 있는데 width와 height 속성을 적용하더라도 무시된다. inline  속성은 무조건 해당 컨텐츠 크기만큼 width와 height가 고정이기 때문이다. 또한 margin과 padding 속성운 좌우에만 적용이 가능하고 상하에는 적용하더라도 무시된다. block display 속성이 block으로 지정된 엘리먼트는 해당 컨텐츠가 한줄을 모두 차지해 다른 컨텐츠가 줄바꿈이 되도록한다. 대표적으로 <div> 태그가 block 속성을 가진 태그이다. display: block 속성을 사용할 때는 inline 속성과 달리 width, height 그리고 margin, padding 속성이 좌우상하 모두 적용 가능하다. inline-block display 속성이 inline-block으로 지정된 엘리먼트는 위 두 속성(inline, block)을 하이브리드한 속성이다. 외부적으로 보여지는 표현되는 방식은 inline 속성과 같이 동작하지만 block 속성에서만 적용할 수 있었던 witdh, height, margin, padding 속성 적용이 가능하다. 즉, 외부적으로는 inline 속성처럼 동작하지만 내부적으로는 block 속성처럼 동작한다. 대표적으로 <button>, <input>, <select> 태그 등이 있다.

 [JAVA] e.toString(), e.getMessage(), e.printStackTrace() 예외처리 차이점 1. e.getMessage() : 에러의 원인을 간단하게 출력한다 2. e.toString() : 에러의 Exception 내용과 원인을 출력한다. 3. e.printStackTrace() : 에러의 발생근원지를 찾아서 단계별로 에러를 출력한다. 1번에서 3번으로 갈수록 더욱 구체적으로 결과를 출력한다. e.getMessage() 와 e.toString() 는  System.out.println(e.getMessage()), System.out.println(e.toString()) 과같이 사용해야하지만  e.printStackTrace()는 System.out.println과 함께 사용하지 않는다.

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_O