김기지의 코딩노트

🌐 반응형 웹 브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론 디바이스 종류에 따라 웹 페이지의 크기가 자동으로 재조정됨 모바일 퍼스트 사용자 경험을 디자인할 때 모바일인 경우에 최우선으로 초점을 맞춰 디자인하는 것 반응형 웹의 탄생 배경 더보기 과거의 웹 사이트들은 데스크탑 컴퓨터를 통해서 이용하는 경우가 대부분이였기에 개발자들은 데스크탑에 최적화된 화면만 구성했었다. 이후 전자기기의 발전으로 태블릿, 스마트폰 등의 전자기기에서 웹에 접속할 수 있게 되어 전자기기들의 화면의 크기가 다양해져 여러 가지 버전의 웹 페이지를 만들어야 하는 경우가 발생하게 되어 반응형 웹페이지가 나오게 되었다...

수업에서 진행했던 계산기js를 참고하여 계산기를 만들어보았다. (사실 거의 다 보고 베낀 수준이지만..) 계산기 최종 먼저, 내가 구현하고 싶었던 다크모드/라이트모드 와 닫기버튼은 구현해냈다. 다크모드 / 라이트모드 처음에는 단순히 class를 따로 만들어 .dark일때의 css를 따로 설정한 다음 classList.add를 해주면 될 것이라고 생각했다. 하지만 처음에 라이트모드에서 다크모드로 바뀌는건 가능하지만, 반대로 다크모드일때 라이트모드로 다시 변환하는 것은 불가능했다.(첫 번째 고난) 그러다 구글링을 통해 .classList.toggle()을 이용하면 구현이 가능해진다는 것을 알게 되었다. 🔍 element.classList.toggle()이란? -> 클래스 값을 토글링한다. 즉, 클래스가 존재..

◎ CSS 웹 페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어 더 나은 UX(user experienc)를 제공하기 위한 UI(user interface)및 레이아웃을 구성하기 위해 사용 ► UI(사용자 인터페이스) 더보기 • 인터페이스 : 컴퓨터와 교류하기 위한 연결고리 버튼이나 마우스가 없던 시기에 개발자는 자신이 만든 애플리케이션과 소통하기 위해 CLI을 사용했음 이 방식은 키보드로 작성한 암호코드를 적어 엔터로 눌러야 애플리케이션이 작동했으므로, 컴퓨터에 무지한 일반 사용자들은 사용할 수 없었음 하지만 인터페이스가 잘 만들어진 요즘은 일반 사용자도 애플리케이션을 사용할 수 있음 이러한 인터페이스 앞에 '사용자'를 붙여 '사용자 인터페이스'가 됨 UI는 컴퓨터에 무지한 일반 사용자들이 애플리..