[본 캠프 3일차] 07.17 팀 프로젝트 하며

팀 프로젝트 하며 오늘 한 것과 배울 것들

1. git clone -b ourTeam --single-branch <github주소>

2. git pull origin <브랜치명>

3. git push origin <브랜치명>

 

[메모장]

inputbox {

outline: none; ( input 박스 클릭시 테두리 표시 안함)

 

 

코드 하나씩 뜯어보기

document.addEventListener("DOMContentLoaded", function () {    const teamContainer =

   const teamContainer = document.querySelector('.team-container');

   const imagePath = './image/';

  //  초기화 작업 및 DOM 조작 수행 후, 웹 페이지(Document)를 실행해라. teamContainer

 

• document : Document 객체는 웹 페이지 그 자체를 의미합니다.
  웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 합니다.
• addEventListener : addEventListener()는 document의 특정요소(Id,class,tag 등등..) event(ex - click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등.. )를 등록할 때 사용합니다.
  
  • click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
  • mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
  • mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
  • mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
  • mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
  • mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
  • focus – HTML요소에 포커스가 갔을때 발생한다.
  • blur – HTML요소가 포커스에서 벗어났을때 발생한다.
  • keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
  • keydown – 키를 누를 때 발생한다.
  • keyup – 키를 눌렀다가 떼는 순간에 발생한다.
  • load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
  • resize – 브라우저 창의 크기를 조절할때 발생한다.
  • scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
  • unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
  • change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.
• DOMContentLoaded :   DOMContentLoaded 이벤트는 HTML 문서가 완전히 구문 분석되고 모든 지연된 스크립트(<script defer src="…">와 <script type="module">)가 다운로드되고 실행될 때 발생합니다. 이미지, 서브프레임, 비동기 스크립트와 같은 다른 항목의 로드가 끝날 때까지 기다리지 않습니다.
  
  DOMContentLoaded는 스타일시트의 로드를 기다리지 않습니다. 하지만 지연된 스크립트는 스타일시트를 기다리며 DOMContentLoaded 이벤트는 지연된 스크립트 이후에 대기열로 추가됩니다. 또한, 지연되지 않거나 비동기가 아닌 스크립트(예: <script>)는 이미 구문 분석된 스타일시트가 로드될 때까지 기다립니다.
  
  이벤트 순서
  
  1. 사용자가 웹 페이지에 접속
  
  2. 브라우저가 웹 서버에 페이지 요청 후 HTML 파일을 응답으로 전송
  
  3. DOM(Document Object Model) 트리가 구성 (HTML 파일을 받고, HTML 문서의 파싱)
  
  4. 브라우저는 HTML 문서 내에서 외부 스타일시트, 스크립트 파일, 이미지 등의 리소스를 다운로드하기 위한 추가 요청
  
  5. HTML 문서 파싱 및 DOM 구축이 진행되는 동안, DOMContentLoaded 이벤트가 발생
  
  6. 외부 리소스(이미지, 스크립트, 스타일 등)가 모두 로드되면, load 이벤트가 발생
  
  * 요약: 사용자가 웹 페이지를 요청하면 브라우저는 페이지의 HTML 및 관련 리소스를 다운로드하고, DOMContentLoaded 이벤트는 초기 DOM 구축이 완료된 시점에서, load 이벤트는 모든 리소스가 로드된 후에 발생합니다.
  
  - 시점: HTML 문서의 파싱이 완료되고 DOM 트리가 준비된 시점에 발생합니다. 이는 모든 HTML 요소가 파싱 되고 JavaScript 코드가 실행될 준비가 된 시점을 나타냅니다.
  
  - 활용: 초기화 작업, 이벤트 리스너 등을 추가할 때 사용됩니다. 이 시점에서 DOM 요소에 접근하고 조작할 수 있으므로, 초기 페이지 설정을 구현하는 데 유용합니다.
• Load :웹 페이지와 모든 관련 리소스(이미지, 스타일시트, 스크립트 파일 등)가 완전히 로드되고 사용자에게 표시될 때 발생합니다.
  
  - 시점: 모든 페이지 리소스의 로드가 완료되고, 페이지의 모든 내용이 화면에 표시되는 시점에 발생합니다.
  
  - 활용: 외부 리소스에 의존하는 작업을 수행하거나, 페이지의 모든 콘텐츠가 렌더링 된 후에 추가 작업을 수행할 때 사용됩니다.
• Document.querySelector() : Document.querySelector()는 해당 선택자로 선택되는 요소를 모두 선택함.