Web - 'World wide web' HTML5, CSS, JavaScript basic memo [개발스터디 기몬]

web - HTML CSS JavaScript - URL- HTTP 프로토콜 80port 사용..
request - response - JSP 서버


HTML - DOM // 기능 동작 수행 출력 //
DOM에 이벤트를 설정 - 함수 (function) 작성.  
객체 동작을 선택 event handler - callback 으로 작성된 코드 수행
/ 동작- 출력

웹브라우저는 - 객체를 문서화 해서 체계적인 자료구조에 저장해 놓음. 

DOM 이해. 
what is DOM? : Document Object model

tomcat server 최상위 경로 __> web app folder. 

HTML / -  정적 문서 

JSP - servlet -tomcal working  . ====> 동적 문서.

http:// 도메인 : port(개발모드는 808)/ 프로젝트명/ filename.jsp 리소스명(in webapp)
http://localhost:8080/chap24/dom.jsp

web - development tool - elements  개발자 도구에서 elements안에 
dom 전체를 확인할 수 있다. 

souce file 그대로 elements 안 dom 객체로 생성이 됨. 
elements안에서 얼마든지 동적 생성이 가능함. 

web browser icon = favicon  // 아이콘 설정

DOM 진입점  - Document 
DOM 자체를 지칭하는 것 - document

document.body.append(div)

모든 문서 객체에는 style이 있다. 

DOM의 구조 :  트리 구조 

DOM은 실제 메모리상에 javascript 객체화 하고 바로 직관적인 확인이 가능. 

트리 구조는 인덱스를 사용할 수 없는 자료구조 
/ 대신 트리구조는 부모, 자식,형제 관계로 연결되어 있는 자료구조이다.  
parent, child(children), sibling 

문서객체는 트리구조로 연결되어 있어 부모객체와 자식객체 , 형제객체를 
first / next / last / previous keyword를 사용해서 찾을 수 있다.

웹 - 개발 도구 - network - (checked Disable cache)


inline tag - width height 화면상에 랜더링이 적용이 안됨. // 값만 저장됨. 



jsp 작성시. 
style span { position: absolute;}


let spans = document.querySelectorAll("span")

spans[0].style.width

getComputedStyle(spans[0]).width  // 기본 초기값을 구할 수 있음. / 
 


font width 구하고 좌표확인.
offset.. 






=====================
chap24 /// alpha.jsp 

let spans = document.qureySelectorAll('span')

spans

width = parseFloat(getComputedStyle(span[0]).width)

width

height = parseFloat(getComputedStyle(span[0]).height)

height 

for (let i=0; i<spans.length; i++) {
spans[i].style.left = width*i + 'px'
}

for (let i=0; i<spans.length; i++) {
spans[i].style.top = height*i + 'px'
}


chap24/ alpha2.jsp
data 속성으로 // 

spans[0].dataset

line, colum 정보를 가져올 수 있음. 




for (let s of spans) {
    let line = s.dataset.line;
    let column = s.dataset.column;

    s.style.top = height*(line-1) + 'px';
    s.style.left = width*(column-1) + 'px';
    
}



window.onload = function() {
let spans = document.qureySelectAll('span');

  let width = parseFloat(getComputedStyle(spans[0].width)
  let height = parseFloat(getComputedStyle(spans[0].height)

let main = document.qureySelector('main');
main.style.height =  20*height + 'px'; // line 
main.style.width = 40*width + 'px'; // column

for (let s of spans) {
    let line = s.dataset.line;
    let column = s.dataset.column;

    s.style.top = height*(line-1) + 'px';
    s.style.left = width*(column-1) + 'px';
}

===================================



let spans = document.querySelectorAll('span')
undefined

spans[0].style.display = 'none';
'none'

spans[0].style.display = 'inline';
'inline'

let timerId = setInterval(() => {
    let s = spans[0]
    if (s.style.display=="inline")
        s.style.display="none"
    else
        s.style.display="inline"
}, 100);
undefined



==========================================

웹표준 
문서 객체 모델

내용.
- 문서 객체 모델의 기몬 용어와 개념 
- 문서 객체 선택
- 문서 객체 조작
- 이벤트 

문서 객체 모델 기본용어
- 문서 객체 
 : 태그를 가바스크립트에서 사용할 수 있는 객체로 만든 것 
- 문서 객체를 조작한다는 말은 결국 태그를 조작한다는 의미 
- 요소 노드 
: <h1> 태그와  <script> 태그처럼 요소를 생성하는 노드 
- 텍스트 노드 : 화면에 출력되는 문자열
- 정적 생성 
: 웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는 것
- 동적 생성
: 웹 페이지를 실행 중에 자바스크립트를 사용해 문서 객체를 생성하는 것
- 문서 객체 모델 Document Object Model, DOM
: 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식 

웹페이지 실행 순서 
- 문서 객체 사용오류 
- script 태그 위치 옮기기
- 이벤트 활용하기

문서 객체 선택
문서 객체를 선택한다 
: 이미 존재하는 HTML 태그를 DOM에서 자바스크립트로 조회하는 것
document.querySelector(선택자) // 선택자로 1 개 선택
document.querySelectorAll(선택자) // 선택자로 여러 개 선택.

- 글자 조작 
 : 글자 속성 - 문서 객체 내부에 있는 글자를 조작할 때 사용

글자 속성 
속성  설명
textContent  문서 객체 내부 글자를 순수 텍스트 형식으로 가져오도록 변경
innerHTML  문서 객체 내부 글자의 HTML 태그를 반영해 가져오도록 변경

- 스타일 조작
 : 자바스크립트로 CSS 속성 값을 추가, 제거, 변경 가능
: 1. 자바스크립트는 특수문자 '-' 를 식별자에 사용할 수 없으므로 오류 출력
: 2. -로 연결된 단어의 첫 글자를 대문자로 변경

문서 객체 
스타일 조작 
스타일 식별자 변환 
스타일시트의 스타일 속성  자바스크립트의 스타일 식별자
background-image  backgroundImage
background-color backgroundColor
box-sizing boxSizing



getAttribute
setAttribute

문서 객체 조작 
- 속성 조작 

메서드    설명
setAttribute(속성 이름, 속성 값)  속성 지정
getAttribute(속성 이름)  속성 추출

: getAttribute(), setAttribute() 메서드 
: 웹 표준에서 지정하지 않은 속성에 접근할 때 사용

이벤트 용어 정리
- 이벤트 속성 (event attribute) - onload
- 이벤트 이름(event name) 또는 이벤트 타입(event type) - on을 제외한 load
- 이벤트 리스너(event listener) 또는 이벤트 핸들러(event handler) 
: 이벤트 속성에 넣는 함수
▪ 기본적으로 지원하는 이벤트
▪ 마우스 이벤트
▪ 키보드 이벤트
▪ HTML 프레임 이벤트
▪ HTML 입력 양식 이벤트
▪ 사용자 인터페이스 이벤트
▪ 구조 변화 이벤트
▪ 터치 이벤트


 이벤트 연결
▪ 이벤트 모델(event model) - 문서 객체에 이벤트를 연결하는 방식
이벤트 모델 종류 (이벤트 연결 방식)
구분  종류
DOM 레벨0 인라인 이벤트 모델
고전 이벤트 모델
DOM 레벨2  마이크로소프트 인터넷 익스플로러 이벤트 모델
표준 이벤트 모델
 인라인 이벤트 모델
- HTML 태그 내부에 자바스크립트 코드를 넣어 이벤트를 연결하는 방식
<button onclick="alert('click')"> 버튼 < /button>

 고전 이벤트 연결
<script> window.onload = function() { }

이벤트 사용 
- 이벤트 객체를 사용하면 이벤트와 관련한 정보를 알아낼 수 있음. 

기본 이벤트 제거 
window.onload = function() {
return false;
(또는 e.prevantDefault();)
}

웹 표준 
웹 개요와 실습환경. 

최초의 웹 개발자 팀버너스 리 
W3Cworld web consortium 

웹동작 
web : 요청과 응답 과정 

URL : 웹에서 어떤 대상을 구분하는 주소 

서버와 클라이언트 

서버 프로그램(백엔드 프로그램)

클라이언트 프로그램(프론트엔드 프로그램)

웹표준과 기술  html5 css3 javascript

웹 페이지 기본 구조와 작성 
태그, 요소, 속성의 의미 
HTML 태그, CSS, JavaScript 사용 웹 페이지를 작성
검사로 디버그 . 

 
DOM - tree 형태로 

태그와 요소 
 요소 - HTMLK 페이지를 구성하는 각 부품 ( 제목, 본문, 이미지 등 )
 태그 - 요소를 만들 때 사용하는 작성 방법

내용을 가질 수 있는 요소 // <요소 이름> 내용 </요소 이름> 
내용을 가질 수 없는 요소 // <요소 이름>

block tag (보통 여러 태그가 옴) / inline tag (일반적으로 텍스트 태그)


속성 - 태그에 추가 정보를 부여할 때 사용하는 것 
(a) <h1 title = "header"> Hello HTML5 </h1>
(b) <img src = "image.png">  

주석 - 코드 설명 기록(프로그램의 실행에 영향을 미치지 않음)
<!-- 주석 -->

HTML5 페이지 구조
<!DOCTYPE html> 1. 웹 브라우저에 HTML5 문서라는 것을 알리기 위해 반드시 첫 행에 작성. 
<html>
<head> 2. body 태그에 필요한 스타일시트와 자바스크립트를 제공
<title>Hello World</title> 3. 웹 브라우저에 표시하는 제목을 지정
</head>
<body> 4. 사용자에게 실제로 보이는 부분을 작성하는 곳. 
</body>
</html> 5. 모든 HTML 페이지의 기본 요소로, 모든 태그는 이 html 태그 내부에 작성. 


- <html> 태그
: 웹  페이지의 사용 언어를 구글 검색 엔진에 제공.

html 태그의 lang 속성 : language // 

head 태그 내부에 넣을 수 있는 태그 : meta(페이지에 추가 정보 전달), 
title, script, link(다른 파일 추가), style, base(웹페이지의 기본 경로 지정)

스타일시트 작성과 실행
내부 스타일 
: HTML 페이지 내부에서 style 태그를 사용해 스타일시트를 직접 입력
: 스타일시트가 짧은 경우 
외부 스타일 
: 스타일시트를 별도로 생성하고 link 태그의 href 속성을 사용해 불러옴
: 협업 업무나 프로젝트의 규모가 클 경우 사용. 

자바스크립트 작성과 실행 
내부 자바스크립트 
 : <script> 태그를 사용해 HTML 페이지 내부에 코드 작성
외부 자바스크립트 
 : <script> 태그의 src 속성에 파일 경로를 입력해 HTML 페이지로 불러옴
>> alert('OuterScript');   // 보통 console 사용. 


오류과 검증 
검사를 이용한 오류 확인 
- 버그 : 프로그램이 원하지 않는 방향으로 동작하는 것
- 디버그 : 버그를 잡는(수정하는) 행위 
- 웹 브라우저 검사 기능으로 디버그 수행
: 웹 개발자 도구
elements/ console/  

---

문서 객체의 속성과 스타일 속성을 구분. 

=================================


style scroll overflow 

document의 height는 달라지지 않지만 width는 전체 크기에 영향을 받아서 변동됨. 
overflow / scroll 적용으로 스타일을 달리 줄 수 있음. 


overflow : hidden ;  ( scroll이 나오지 않음) 
>>>
document.documentElement.style.overflow = 'hidden';


스크롤 항상 나오도록 . 
>>>
document.body.style.overflow = 'scroll';


문서의 width는 창의 크기에 영향
height는 문서의 child의 크기 갯수에 영향을 받는다 .