본문 바로가기
내일배움캠프 TIL

2023-09-13 사전캠프 8일차 TIL

by KMS_99 2023. 9. 13.

2023-09-13 사전캠프 8일차 TIL

 

- 스파르타 코딩클럽 강의 수강 - 웹 퍼블리싱 정복반 내일배움캠프 9기 사전캠프

(2주차 강의 시청완료)

 

강의를 통한 학습 내용

1. 네이버 검색창 클론코딩 복습

2. 네이버 GNB 클론코딩 학습

- HTML 구조 학습 및 CSS 요소 분석 진행 (선 분석 후 수강)

3. 2주차 강의 숙제, 검색창 autocomplete 구현하기

 

- UI 구성

autocomplete

- 기능

1. 닫힌 상태라면 fold 클래스를 포함하고 열린 상태라면 fold클래스를 삭제하기

2. 바깥 영역을 클릭하면 닫힌상태로 만들기

3. input 영역에 focus 되면 열린상태로 만들기

 

- 학습한 내용

1. jquery 메서드 - mouseup, addClass, removeClass, hasClass(있는지 여부)

2. 바깥 영역을 클릭하면 autocomplete이 닫히게 하기 - jquery로 구현

$(document).mouseup(function(e)
{
    var container = $("#search");

    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        $autocompleteIcon.addClass('fold');
        $autocompleteArea.addClass('fold');
    }
});

- 책 독학

 

1. 얄코의 TOO MUCH 친절한 깃&깃허브 (118p ~ 136p) - branch merge, rebase

2. 혼자 공부하는 컴퓨터구조 + 운영체제 (78p ~ 101p) - 소스코드, 명령어

3. 모던 자바스크립트 Deep Dive (234p ~ 248p) - 생성자함수 객체생성