브라우저 인터넷창의 개발자 도구의 HTML에서는 CSS를 인식하고 스크립트도 인식한다. 확장자가 다른데 왜 될까? 한글파일은 워드에서 제대로 인식이 안되는데....
그 이유는 DOM때문이라고 한다.
Document Object Model에서의 Document, 문서는 HTML을 말한다. (웹 개발에서 Document는 HTML을 말하는 거라고 생각하면 된다)
Object 는 객체는 자바스크립트나 자바에서 많이 나오는 자료형중의 하나..... HTML을 하나의 객체로 만들어서 자바스크립트도 이해할 수 있게 만든다...
DOM은 브라우저에 내장되어 있는 API이다.
HTML, 또는 XML 페이지의 구조와 요소들을 제어할 수 있도록 제공하는 프로그래밍 인터페이스, 또는 구조화된 데이터를 말한다.
문서 객체 모델은 객체지향 모델로써 구조화된 문서를 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다. DOM은 또한 W3C가 표준화한 여러 개의 API의 기반이 된다.
DOM은 HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원되었다. DOM은 동적으로 문서의 내용 , 구조, 스타일에 접근하고 변경하는 수단이었다.
DOM은 문서의 기반이 되는 데이터 구조에 제한을 두지 않는다.
잘 구조화된 문서는 DOM을 사용하여 트리구조를 얻어낼 수 있다. 대부분의 xml 해석기는 트리 구조의 이용에 대응해 개발되었다.
이같은 구현에서는 문서의 전체 내용이 해석되어 메모리에 저장되어야 한다. 때문에 DOM은 문서 요소가 임의적으로 접근되고 변경할 수 있어야 하는 응용프로그램에 가장 적합하다.
한 번 해석시 단 한번의 선택적 읽기/쓰기가 이루어지는 xml 기반 응용 프로그램에서 DOM은 메모리에 상당한 부하를 가져온다.
자바스크립트는 이 프로그래밍 인터페이스(API)인 DOM에 접근할 수 있으며, DOM 생성 후 화면에 웹페이지가 표시되기 전에 DOM을 제어할 수도 있다.
웹 브라우저로 웹사이트의 특정 페이지에 접속할 경우 웹 브라우저는 HTML 문서를 읽는다. 그리고 CSS와 여러가지 컨텐츠 파일도 함께 읽는다. 최종적으로 HTML, CSS 그리고 컨텐츠 파일들을 조합해 웹 페이지를 브라우저 화면에 표시한다.
웹 브라우저는 이과정을 2단계로 나누어서 실행한다.
먼저 HTML 파일을 일겅 문서의 구조를 파악하고, 트리 형태로 된 데이터 구조를 만든다. 이것이 DOM 이다. DOM이 일단 완성되고 나면, 자바스크립트로 DOM을 제어할 수 있게 된다.
웹 브라우저가 웹 페이지를 화면에 표시하는 단계로 넘어가기 전에 자바스크립트가 DOM을 제어 할수 있다. DOM 제어가 끝나면 웹 브라우저는 DOM 구조를 기반으로 웹 브라우저 화면에 웹페이지를 그리는 과정을 진핸한다. 이 그리는 과정을 렌더링(Rendering)이라고 한다.
렌더링에는 미리 작성한 CSS의 화면 배치와 속성에 대한정보를 사용한다. 이 과정에서 웹 브라우저는 DOM과 마판가지로 CSS를 읽어 CSSOM(Cascading Style Sheet Object Model)을 생성한다. CSSOM은 CSS를 구조화 된 데이터 형태로 생성한 것이다.
DOM과 CSSOM을 조합해 화면에 펴시할 최종 구조를 만든다. 이것이 렌터 트리(Render Tree)다.
렌더트리를 기초로 화면에 HTML페이지가 그려진다. 배치가 되면서 컨텐츠 파일들 또한 비동기로 읽어서 HTML 페이지의 적절한 위치에 배치를 한다.
렌더링과정은 전적으로 웹 브라우저의 몫이다. DOM의 구조는 표준으로 정햐져 있기 때문에 모두 같은 구조를 가지지만 DOM을 웹 브라우저 화면에 어떻게 표시할 것이냐는 웹 브라우저 고유의 방식을 따른다.
먼저 html 파일을 읽어 문서릐 구조를 파악하고, 트리 형태로 된 데이터 구조를 만든다. 이걸 DOM이라고 한다.
3. 렌더링 트리 만들기
DOM tree는 내용을 저장하는 트리로 자바스크립트에서 접근하는 DOM객체를 쓸 때 이용하는 것이고 별도로 그리기 위한 트리가 만들어져야 하는데 그것이 렌더링 트리다.
4. CSS결정
css는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 css스타일을 분석해 태그에 스타일 규칙이 적용되게 결정한다.
5. 레이아웃
렌더링 트리에서 위치나 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를 정해주는 과정을 레이아웃이라고 한다.
6. 그리기
렌터링 트리를 탐색하면서 그리기 참고로 렌더링 엔진은 가능하면 html문서가 파싱될 때까지 기다리지 않고 , 배치와 그리기 과정을 시작한다.
위에랑 같은 말? 인데 자세하게 쓰면
먼저 HTML 파일을 일겅 문서의 구조를 파악하고, 트리 형태로 된 데이터 구조를 만든다. 이것이DOM이다. DOM이 일단 완성되고 나면, 자바스크립트로 DOM을 제어할 수 있게 된다.
웹 브라우저가 웹 페이지를 화면에 표시하는 단계로 넘어가기 전에 자바스크립트가 DOM을 제어 할수 있다. DOM 제어가 끝나면 웹 브라우저는 DOM 구조를 기반으로 웹 브라우저 화면에 웹페이지를 그리는 과정을 진핸한다. 이 그리는 과정을렌더링(Rendering)이라고 한다.
렌더링에는 미리 작성한 CSS의 화면 배치와 속성에 대한정보를 사용한다. 이 과정에서 웹 브라우저는 DOM과 마판가지로 CSS를 읽어CSSOM(Cascading Style Sheet Object Model)을 생성한다. CSSOM은 CSS를 구조화 된 데이터 형태로 생성한 것이다.
DOM과 CSSOM을 조합해 화면에 펴시할 최종 구조를 만든다. 이것이렌터 트리(Render Tree)다.
렌더트리를 기초로 화면에 HTML페이지가 그려진다. 배치가 되면서 컨텐츠 파일들 또한 비동기로 읽어서 HTML 페이지의 적절한 위치에 배치를 한다.
렌더링과정은 전적으로 웹 브라우저의 몫이다. DOM의 구조는 표준으로 정햐져 있기 때문에 모두 같은 구조를 가지지만 DOM을 웹 브라우저 화면에 어떻게 표시할 것이냐는 웹 브라우저 고유의 방식을 따른다.
여기서 호환성 문제가 발생한다.
css는 위에 두고 script는 아래에 두는 이유
문서를 파싱해서 DOM tree를 만들어도 스타일 규칙이 없으면 렌더링 할 수가없다. 즉 최대한 빨리 스타일 규칙을 알아야 렌더링 트리가 완전히 만들어지므로 스타일시트 파일을 모두 다운로드시키기 위해 <head></head>태그 사이에 놓는 것이다. (인터프리터에서 html파일을 위에서 아래로 읽음)
자바스크립트는 왜 아래에 놓아야 성능이 좋아질까?
자바스크립트는 DOM객체를 이용해서 컴포넌트들을 조작하는데 <head></head>태그 사이처럼 상단에 놓게 되면 html파서가 파싱을 멈추고 스크립트 파일을 읽는다. 파싱을 멈추고 읽기 때문에 위에서 스크립트 파일이 많거나 크면 읽는 시간이 오래 걸려 사용자 입장에서 웹페이지가 느리게 보이게 되므로 성능이 안좋아지게 된다. 심지어 잘못 코딩했을 경우 html파싱보다 자바스크립트 파일이 먼저 실행되서 적용이 안되는 모습도 볼 수 있다. 그래서 일반적으로 </body>태그 위에 스크립트를 모아둔다.
4월 28일 수 로그조회메뉴중 3개 했는데 확실하진 않음 코드메뉴쪽 직업/직위코드는 아직 불러오기 실패(값 강제로 넣었는데도 데이터 불러오기 실패) 그리드조회(첫화면) 다이나믹쿼리 적용했고 더블클릭, 상세보기까지 데이터 잘 나오게 확인
4월 29일 목 수정화면 만들기
4월 30일 금 cod쪽 직업/직위코드, 지점관리, 365공통, 자주쓰는적요 상세보기, 등록, 수정, 삭제 완료 수정하면 등록자랑 등록시간 삭제됨(지점관리, 365, 공통코드)
5월3일 월 수정할때 등록자, 등록시간 삭제되는거 수정, 잭스캘린더 적용
5월 4일
5월 5일 어린이날
5월 6일 업무변경 x 새로 만드는 페이지 만들기 시작 - 스크립트 호출스텍 조회 테이블이 아직 안나와서 조회페이지만 제작
5월 7일 - 자주쓰는 적요는 3일 저녁 잭스엔지니어 다녀온 후로 생성할 수 있는 권한이 없어져서 등록,수정,삭제 작업 못함 다른페이지들도 생성 불가능 - 완료된 6개 페이지 조회화면만 3.0css로 수정
5월 10일 월요일 새로만들어지는 페이지 조회화면만 우선 생성 팝업창 3.0버전으로 변경 새로운 페이지 추가됨
5월 11일 팝업창 3.0버전으로 찾았는데 크기조절하는 방법을 못찾음 일단 안에 표는 3.0버전으로 수정완료(데이터 잘 가는지 확인은 아직) 새로운페이지 생성완료( 그리드 2개중 한개만 나오면 된다고 했는데 다시 확인) 웹서비스,ido 생성 수정했다는데 아직까지 생성 안됨
5월 12일
5월 13일 페이지 생성 안되던거 권한말고도 xml파일이랑 다른게 생성안되는 문제였는데 잭스개발자가 3.0스튜디오에서 설정 잡아줘서 xml파일 생성가능하게 만들어줘서 해결 xml파일이 생성되지 않아서 경로를? 못찾아서 새로운 페이지가 연결이 안되는 거였음
BDT페이지 일단 만들었는데 기획이 다시 바뀔거라고 나중에 다시 만들기로 3팝업창 3.0으로 바꾸고 높이는 css에서 100%로 주는걸로 해결 근데 hide 명령어가 안먹혀서 또 찾아야 한다.
5월 14일 다음주부터 9시까지 공식적인 야근 기본적인 조회화면은 다 만들었음 그리드 만드는 것도 확인해서 ido랑 act파일만 바꿔주면 바로 적용가능
5월 17일 새로운페이지(서비스별공지, 긴급공지, Native솔루션 긴급공지, 메뉴별공지, 에러메세지등록, 스크립트호출스택조회) 조회하면 생성, 조회버튼눌렀을때 검색값 받는것 까지 확인
5월 18일 등록, 수정, 상세보기 화면 생성
5월 19일 부처님오신날
5월20일 어드민 테이블 생성완료
5월 21일 BDT약관관리 조회, 등록 작업
========
<script type="text/javascript"> let score; let grade;
score = prompt("당신의 점수는?");
switch(Math.floor(score/10)){ //switch(parseInt(score/10)){ case 10: grade ="A학점"; break; case 9: grade = "A학점"; break; case 8: grade = "B학점"; break; case 7: grade = "C학점"; break; case 6: grade = "D학점"; break; default : grade = "F학점"; }
6월 1일 split 옵션중에 -1을 넣으면 빈값(null)이 들거가게 되는 옵션이 있다.
6월 2일 sql문에서 값을 넣을때 seq값은 자동으로 1씩 증가하게 한다. 예) select max(seq) +1 from 테이블명 =>null 근데 이게 데이터가 0개일때는 0이아닌 null이 출력되서 자동으로 1씩 더하지 못한다.
그럴때는 쿼리문에 null대신 0을 대체하는 명령어를 써주면 된다. 예) select nvl(max(seq) + 1 , 0) from 테이블명 =>0 +1인데도 값이 null이 나와서 0을 대체하는 nvl을 사용하는 이유는 max(seq)가 null이 나오는데 null에 +1을 하면 1이 아니라 null이기 때문이다.
select nvl(max(seq) + 1 , 0) from 테이블명 select nvl(max(seq) + 1 , 0) from 테이블명 => null+1 => null select nvl(max(seq) + 1 , 0) from 테이블명 => nvl명령어 때문에 null이 0으로 대체
근데 위에 처럼하면 0으로 들어간다. 그래서 예) select nvl(max(seq), 0)+1 from 테이블명 =>1 이렇게 해주면 데이터가 없는 상태에서 쿼리문을 실행하면 0대신 생각한 대로 1이 들어가게된다.
select max(seq) +1 from 테이블명
null
select nvl(max(seq) + 1 , 0) from 테이블명
0 (null대신 0을 출력하겠다)
select nvl(max(seq), 0)+1 from 테이블명
1 (null대신 0을 출력하고나서+1을 하겠다)
구글에 '오라클 null값 0으로 대체' 라고 검색하면 나온다. https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=so1ine&logNo=40193593133
6월 9일 등록할때 배열을 받은 순서를 보면 위에서 부터 차례때로 들어갔는데 DB에 저장될때는 abc순으로 저장되고 select하면 DB에 조회된것 처럼 abc순으로 나온다. 이걸 update에서 where 절에 사용할 비교값으로 저장하고 update를 위해 새로 배열을 받으면 update하기 위해 배열로 받은건 순서대로 들어오고 비교값은 abc순이라서 반복문 돌리면 안맞아서 오류가 난다.
만약 update를 위해 받은 배열이 순서대로 들어와서 거기에 맞추거나 아님 DB에서 받은 순서대로 밪추고 싶으면 오라클 커스텀정렬 검색해서 내가 원하는 순서로 조회해서 비교하면 된다.
6월 11일 span태그에 값넣을떈 .text();
input에 값 넣을떈 .val()
6월 21일
선택자 구하기. 그냥 id나 name만 선택하면 쉬워도 데이터 커스텀을 이용해서 그중에 id나 name값을 찾거나 아님 div태그중에서 id값이 ~인것 찾기 처럼 제한적인 상황에서 사용하는 방법
