혼자 복습하고 필기하는

안녕하세요, 오랜만에 글을 쓰는 것 같네요. 저번에 말씀드린 DOM의 이벤트의 흐름부터 정리하려 합니다. 사실 이전에 작성하던 글이 있었는데 중간에 날아가서 다시 정리하는 시간이에요.. 덕분에 복습도 되고 좋은 것 같습니다 ^-ㅜ.. 이벤트 흐름 브라우저 화면에서 이벤트 발생 시 브라우저는 가장 먼저 이벤트 대상을 찾음 대상을 찾아갈 때 상위의 window 객체부터 document, body 순으로 DOM 트리를 따라 내려감 = 캡처링 단계라고 부름 이벤트 대상을 찾아가는 과정에서 브라우저는 중간에 만나는 모든 캡처링 이벤트 리스너를 실행 이벤트 대상을 찾고 캡처링이 끝나면 이제 다시 DOM 트리를 따라 올라가며 만나는 모든 버블링 이벤트 리스너를 실행 = 버블링 단계라고 부름 이러한 과정에서 이벤트 리..

DOM (Document Object Model) HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜 주는 역할 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 노드 (Node)라고 함 + API (Application Programming Interface) : 설명서 DOM 트리에 접근 document 객체를 통해 HTML 문서에 접근이 가능 (document : 브라우저가 불러온 웹페이지) = DOM 트리의 진입점 역할을 수행 // 해당하는 Id를 가진 요소에 접근 document.getElementById(); // 해당하는 모든 요소에 접근 document.getElementsByTagName(); // 해당하는 클래스를 가진 모든 요소에 접근 document.get..

어느덧 벌써 2월이네요, 어느덧 바람이 옅어지는 것을 보아 좀 있으면 다가올 봄이 기다려지는 하루예요. 오늘 오전 11시까지 LMS강의를 들었어요. HTML 강의를 시청하였고 관련 코드는 맨 아래에 GitHub 링크 올려놓겠습니다. HTML과 CSS다음으로 배울 것은 JavaScript입니다. 오늘은 간단하게 JavaScript가 무엇인지 알아보고 마무리하겠습니다. JavaScript HTML과 CSS로 만들어진 웹 페이지에 생동감을 불어넣기 위해 만들어진 객체기반의 스크립트 프로그래밍 언어 따로 C, C++처럼 컴파일 없이 한 줄 한 줄 해석하며 바로 명령어를 실행하는 인터프리터 언어 HTML의 특정 요소를 선택하여 다양한 이벤트 (마우스 클릭, 키보드 입력 등)에 따라 어떤 동작을 하도록 기능을 넣을..

Position HTML 태그의 위치를 지정해 주는 속성 (페이지의 레이아웃을 결정할 수 있음) 1. static = 따로 position 속성값을 주지 않았다면 static 값을 가짐, html에 쓴 태그 순으로 정상적인 흐름(normal flow)에 따라 위치가 지정되게 됨 2. relative = 원래 자신이 있어야 하는 위치에 상대적, 자신이 원래 있던 자리를 기억함 원래의 자리를 인식하지만 left, right, top, bottom 속성을 이용해서 움직일 때는 다른 콘텐츠들의 레이아웃에 영향을 미치지 않음 3. absolute = 부모 요소 내부에 속박되지 않고 독립된 배치 문맥 (my way), absolute는 static을 제외한 position 속성값을 가진 가장 가까운 부모의 박스 내..

벌써 1월 마지막 주 월요일이네요. 어느덧 오름캠프를 시작한 지 두 달째 되었어요, 항상 느끼지만 시간은 정말 느린 것 같다가도 빠른 것 같아요. 오늘은 저번 HTML에 이어 기본 양식들에 대해 알아보며 VSCode에 직접 코드를 입력해 보며 배워보았어요. 까먹은 것들이 많지만 직접 쳐보니 또 새록새록 기억이 나네요. Form 사용자에게 입력받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획 Q. 꼭 form 태그로 묶어줘야 할까? A. form 태그는 입력한 데이터를 제출 or 전송하기 위해 사용하는 태그, 별도 제출 필요가 없다면 사용하지 않아도 됨 = 단순히 입력받는 값을 화면에 나타내는 용도 1. Method 속성 양식을 제출할 때 사용할 HTTP 메서드 + GET https://exa..

오늘은 Chat GPT 활용법에 대해 알아보았습니다. 머신러닝과 딥러닝에 지친 마음을 Chat GPT로 달래 보았습니다. 저는 주로 Chat GPT 무료버전과 뤼튼을 주로 사용합니다. 처음 뤼튼을 사용했을 땐 이미지 생성이 활성화되지 않았는데 최근에 다시 보니 이미지 생성이 활성화된 것 같아요. 그 외에도 Chat GPT 4 유로버전을 무료로 사용할 수 있는 수많은 대안방법이 있습니다. 다양한 챗봇을 사용할 수 있는 POE.COM, 파일 분석을 위한 Cluade, 데이터 분석은 Julius 그리고 Bing 챗봇을 이용하셔도 됩니다. Bing 챗봇은 Edge 브라우저를 통해 Bing.com에 접속하시면 됩니다. 그러면 상단의 채팅이 눈에 보일 텐데 클릭 후 해당 서비스 이용이 가능합니다. 왼쪽 사진은 수강..

오늘은 배운 걸 정리하기 전에 어제 배운 모듈을 잠시 정리하고 시작하려 합니다. 예외처리는 간단히 정리한 글이 있으니 궁금하신 분이 계시다면 아래 링크로 들어가셔서 참고 부탁드려요 :) https://selfnotes.tistory.com/33 24.01.10 while 조건이 참인 동안에 명령을 반복해서 수행 반복할 명령은 들여 쓰기로 구분, 조건이 거짓이면 들여 쓰기로 구분되어 있는 반복 구문을 탈출 while 구문 : pass # 수행할 문장 while문은 조건을 먼 selfnotes.tistory.com 모듈 (Module) 클래스나 함수, 변수를 다른 파일(.py)에 작성하여 다른 Python 코드에서 재사용할 수 있도록 한 것 Q. 모듈 = 라이브러리? A. 비슷한 개념이지만 좀 다름 모듈은 ..

네번째 강의시간입니다. 오늘은 개발에 있어 필수적이며 아주 중요한 Git에 대해 들을 수 있었어요. 저도 처음 사용했을 때 굉장히 어려워 했었던 부분인데 이렇게 강의를 들으며 정리해보니 엄청 쉬워서 다행이에요. 생각난 김에 오늘 오랜만에 commit를 해야겠단 생각이 들었어요 ;) 4강. Git + GitHub 나의 소스코드를 관리해보자 '깃과 깃허브로 소스코드를 관리해본다.' Git 1. 파일의 변경 사항을 추적 및 관리 2. 개발프로젝트의 버전을 손쉽게 관리 3. 기본적으로 로컬(사용자의 컴퓨터)을 저장소로 사용 GitHub 1. 원격으로 Git 저장소를 제공해주는 서비스 2. 공개(Public), 비공개(Private) 저장소로 설정 가능 3. 협업 시 프로젝트 소스의 서버 역할을 함 4. 다른 원..