[2023.10.30] 개발자 교육 26일 차 : 강의-웹 시작, html, css, JavaScript [구디 아카데미]
0
클라우드 활용 자바개발자 양성과정(구디)
목록 보기
26/95
오늘 정리
Window 객체는? 최상위 객체로 모든 객체가 소속된 객체이다.
html, css, JavsScript? 문서를 작성하고 문서를 꾸미고, 문서를 제어하는 그 과정의 이해가 필요하다. 문서에 들어가는 요소별 이름을 정해주어 그 요소별의 디자인과 기능을 정의할 수 있다.
강의 내용
- HTMl 수업 관련 개념
- DOM?
- 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
- window 인터페이스?
- DOM 문서를 담은 창을 나타냅니다. document 속성이 창에 불러온 DOM 문서를 가리킵니다.
- 다양한 함수, 이름공간, 객체, 생성자가 머무는 장소
- Dom(document)+BOM(navigator, location, fetch, storage 등)+JavaScript(Array, Map, Date 등)
- 브라우저?
- window+document(화면에 출력)+navigator(안보임)
- 역할?
- DOM 트리 그리기
- 위 트리에 BOM 트리를 다시 그린다.(CSS가 존재하는 경우)
- CSS가 적용된 화면 출력 - rendering
- 개발자 센터 활용(F12)
- Element(요소) : 코드, CSS 직접 변경하여 결과 확인 가능
- Network : 요청에 대한 서버 응답결과 약속된 상수로 확인 가능(200, 304, 404, 405, 500(자바에러 exception) 등)
- Application(navigator - storage - cookie)
- Console : 로그 출력, alert, prompt
- 콘솔 입력 실습
- window : 윈도우 인터페이스에 대한 메소드 출력
- prompt() : 입력값을 받는 창 출력
- alert() : 경고창을 출력
- HTMl 입력(!)
- 순서지향적(위에서 아래로 순서대로 진행)
- defer옵션과 같이 순서대로 진행될 때의 에러사항을 방지하고자 모든 것이 완료되었을 때 실행되도록 할 수 있음.
- tag
-
인라인요소 : 자체 크기가 없음(줄바꿈 x, 크기조정 x) 예 : span
- span 쓰는 이유?? textnode는
-
블록요소 : 자체 크기가 있음. (배치하기 까다로움) 예 : div
-
display: block;과 같은 함수로 강제로 블록으로 전환 가능
<style> .rect{ display: block; width: 150px; height: 40px; background-color: aqua; } .rect2{ /* display: block; 이런식으로 인라인을 강제로 블록으로 변경 가능 */ width: 150px; height: 150px; background-color: pink; } </style> <body> <!-- div 블록요소 --> <div class="rect">1</div> <div class="rect">2</div> <div class="rect">3</div> <!-- span.rect*3 emmet 키 --> <span class="rect2">1</span> <span class="rect2">2</span> <span class="rect2">3</span> </body>
-
- 순서지향적(위에서 아래로 순서대로 진행)
- write() 함수 : 태그와 텍스트노드를 쓴다.
```html
document.write("<h1>뉴스제목</h>")
```
- CSS 입력
- 태그 접근 : 태그 이름으로 접근
- 클래스 선택자 접근 : 다트연산자 .선택자로 접근
- block/div/span
- JavaScript
- querySelector() 함수 : 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element (en-US)를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
- document.querySelector(selectors);
- 상수 선언(const) / 변수 선언(let)
- addEventListener()
- Element.getBoundingClientRect() : 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다.
- arrow function : 코드 양을 줄이기 위해 함수 호출방식이 변화함.
- querySelector() 함수 : 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element (en-US)를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
- 실습(마우스 커서에 따라 좌표 설정)
- 백틱 `
-
백틱(`)을 사용하면 ${}를 사용해서 문자열과 변수를 적절히 같이 사용할 수 있다.
const num1 = 10; const num2 = 20; console.log(num1 + ' + ' + num2 + ' = ' + (num1+num2) + " 입니다.");const num1 = 10; const num2 = 20; console.log(`${num1} + ${num2} = ${num1+num2} 입니다.`);
-
강의 마무리
- html, css, JavaScript의 사용법에 대해 익힌다.
