🌐 반응형 웹 브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론 디바이스 종류에 따라 웹 페이지의 크기가 자동으로 재조정됨 모바일 퍼스트 사용자 경험을 디자인할 때 모바일인 경우에 최우선으로 초점을 맞춰 디자인하는 것 반응형 웹의 탄생 배경 더보기 과거의 웹 사이트들은 데스크탑 컴퓨터를 통해서 이용하는 경우가 대부분이였기에 개발자들은 데스크탑에 최적화된 화면만 구성했었다. 이후 전자기기의 발전으로 태블릿, 스마트폰 등의 전자기기에서 웹에 접속할 수 있게 되어 전자기기들의 화면의 크기가 다양해져 여러 가지 버전의 웹 페이지를 만들어야 하는 경우가 발생하게 되어 반응형 웹페이지가 나오게 되었다...
[개인 프로젝트] - 계산기 구현하기
수업에서 진행했던 계산기js를 참고하여 계산기를 만들어보았다. (사실 거의 다 보고 베낀 수준이지만..) 계산기 최종 먼저, 내가 구현하고 싶었던 다크모드/라이트모드 와 닫기버튼은 구현해냈다. 다크모드 / 라이트모드 처음에는 단순히 class를 따로 만들어 .dark일때의 css를 따로 설정한 다음 classList.add를 해주면 될 것이라고 생각했다. 하지만 처음에 라이트모드에서 다크모드로 바뀌는건 가능하지만, 반대로 다크모드일때 라이트모드로 다시 변환하는 것은 불가능했다.(첫 번째 고난) 그러다 구글링을 통해 .classList.toggle()을 이용하면 구현이 가능해진다는 것을 알게 되었다. 🔍 element.classList.toggle()이란? -> 클래스 값을 토글링한다. 즉, 클래스가 존재..
[HTML] 기초
◉ HTML 웹 페이지의 뼈대를 구성하는 마크업 언어 (프로그래밍 언어X) 웹 페이지의 틀을 만듬 ○ HTML은 tag들의 집합 tag : 부등호()로 묶인 HTML의 기본 구성요소 구조를 살펴보면 상위 태그 안에 하위 태그의 묶음으로 구성된 트리 구조로 이루어져 있다. 태그는 여는 태그로 시작해서 닫는 태그로 끝낸다. 하지만 예외인 태그들도 존재한다. 예를 들어 태그같이 내부에 내용이 없는 태그의 경우 닫는 태그 없이 로 표현한다. 여기서 / 도 생략이 가능하다. 이러한 태그를 Self-closing tag라 한다. 자주 사용하는 태그 중 태그를 알아보자 태그는 self-closing tag로 닫는 태그 없이 사용 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성 다양한 종류..