display 속성은 요소를 어떻게 보여줄지를 결정합니다. 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다. none : 보이지 않음 block : 블록 박스 inline : 인라인 박스 inline-block : block과 inline의 중간 형태 none 요소를 렌더링하지 않도록 설정합니다. visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않습니다. *visibility:hidden; 영역차지한 채 디스플레이만 안되는 상태 *display:none; 영역도 차지하지 않고 디스플레이도 안되는 상태 block ,,, 태그 등이 이에 해당됩니다. 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 wor..

1. for loop 가장 일반적인 for문 var arr = []; for(var i=0; i

서버호출 없이 JS만으로 엑셀다운로드 구현 //엑셀다운로드시 호출함수 function fnExcelReport(id, title) { var tab_text = ''; tab_text = tab_text + ''; tab_text = tab_text + ""; //엑셀다운로드시 저장될 테이블 지정하여 복사 var exportTable = $('#resultTable').clone(); //복사된 테이블에서 input 태그 제거 exportTable.find('input').each(function (index, elem) { $(elem).remove(); }); tab_text = tab_text + exportTable.html(); tab_text = tab_text + ''; var data_ty..

position 속성 1. static 모든 태그들은 기본적으로 position:static 속성을 가짐(따로 position:static 속성을 주지 않아도 됨) 차례대로 왼쪽에서 오른쪽 위에서 아래로 쌓임 2. relative 기존 static이었을 때의 상태를 기준으로 왼쪽,오른쪽,위,아래 위치를 조절할 수 있음 relative는 각각의 방향을 기준으로 안쪽 방향으로 이동(바깥쪽 방향은 음수로 설정) 보통 태그는 같은 포지션이라면 나중에 나온 태그가 더 위쪽에 위치하지만 z-index속성으로 위쪽 태그 조절가능함 (z-index는 태그들이 겹칠 때 누가 더 위로 올라가는지를 결정하는 속성) 3. absolute relative가 position:static인 상태를 기준으로 움직였다면 absolut..

[헤더고정스크롤 구현] 요건 : JSP내에서 엑셀다운로드를 할 수 있는 테이블 만들어야 하는데, 화면에 보여질 때 헤더는 고정이 된 상태에서 스크롤시 동적으로 리스트를 생성해야함 방법1 . 임시테이블 하나 더 생성 검색 KEY 파일이름 생성일자 KEY 파일이름 생성일자 내용0 내용0 내용0 내용1 내용1 내용1 내용2 내용2 내용2 내용3 내용3 내용3 내용1 내용1 내용1 내용2 내용2 내용2 내용3 내용3 내용3 내용1 내용1 내용1 내용2 내용2 내용2 내용3 내용3 내용3 Excel Download 구현내용: 화면에 리스트로 보여줄 테이블(resultTable) 과 헤더만 보여질 테이블(fixedtable) 을 생성 화면에 리스트로 보여줄 테이블(resultTable) thead를 'display..

object = {key : value}; 1. Literals and properties 1-1. Object의 사용 보통 primitive타입은 변수 하나당 값을 하나만 할당할 수 있는데, 이 변수들을 출력하고자 함수를 정의해서 호출한다면 출력하고자 하는 변수들이 굉장히 많아질 수 있고 비효율적일 수 있는데 이럴 경우 객체(Object)를 활용하면 위의 문제점들을 개선할 수 있음 const name = "ellie"; const age = 4; print(name, age); function print(name, age) { console.log(name); console.log(age); } function printObject(person) { console.log(person.name); con..