<aside> <img src="notion://custom_emoji/83c75a39-3aba-4ba4-a792-7aefe4b07895/2e82dc3e-f514-8084-8cc0-007a4092ebbf" alt="notion://custom_emoji/83c75a39-3aba-4ba4-a792-7aefe4b07895/2e82dc3e-f514-8084-8cc0-007a4092ebbf" width="40px" />

학습 목표

</aside>

<aside> <img src="notion://custom_emoji/83c75a39-3aba-4ba4-a792-7aefe4b07895/2e82dc3e-f514-8084-8cc0-007a4092ebbf" alt="notion://custom_emoji/83c75a39-3aba-4ba4-a792-7aefe4b07895/2e82dc3e-f514-8084-8cc0-007a4092ebbf" width="40px" />

실습 목표

• window 객체와 하위 객체의 프로퍼티를 활용하여 브라우저 환경을 제어할 수 있다.
• location 객체의 메서드를 사용하여 상황에 맞는 페이지 이동 방식을 제어할 수 있다.
• classList 프로퍼티의 메서드를 활용하여 웹 페이지 요소의 스타일을 동적으로 변경할 수 있다. </aside>

<aside> <img src="notion://custom_emoji/83c75a39-3aba-4ba4-a792-7aefe4b07895/2fe2dc3e-f514-8006-95d9-007a99d996b6" alt="notion://custom_emoji/83c75a39-3aba-4ba4-a792-7aefe4b07895/2fe2dc3e-f514-8006-95d9-007a99d996b6" width="40px" />

진행 방식

• 사용 IDE
• 각 문제에 내용들을 확인하여 코드를 작성하여주세요.
• 현업에서 여러분의 코딩 실력을 키우기 위해 ChatGPT 사용을 금지합니다.
  • 당장의 문제는 해결 할 수 있지만 실력 향상에는 독입니다.
  • 추가로 튜터님들에게 직접적으로 문제 해결을 바라는 질문도 지양해주세요. </aside>

필수 1 : 브라우저 환경 정보 조회 및 안내창 출력

<aside>

웹 브라우저가 제공하는 Navigator 객체와 Screen 객체를 활용하여 현재 사용자의 웹 환경 정보를 확인하고 알림을 띄우는 과정입니다.

</aside>

문제 1-1 : 사용자 환경 정보 알림창 띄우기

필수 2 : 주소창 제어 기능을 통한 페이지 강제 전환

<aside>

Location 객체가 제공하는 주소 교체 메서드를 사용하여 브라우저의 방문 기록을 제어하고 화면 주소를 이동시키는 실습입니다.

</aside>

문제 2-1 : 뒤로 가기가 불가능한 화면 이동 구현

심화 1 : classList를 활용한 안내 상자 동적 스타일 제어

<aside>

자바스크립트에서 인라인 스타일을 직접 수정하는 방식 대신, 스타일시트에 정의된 클래스 목록을 제어하는 기능을 사용하여 디자인을 동적으로 변경하는 방법을 학습합니다.

</aside>

문제 3-1 : 클릭으로 전환되는 경고 박스 스타일 토글