사이먼's 코딩노트

[다크모드]이번에는 버튼을 통해 라이트/다크 모드를 제어하도록 해봅시다.사용한 라이브러리는 테일윈드와 jQuery이며, 폰트도 적용하여 디자인을 해보도록 합시다.See the Pen 다크모드 by psm817 (@psm817) on CodePen.CSS를 살펴보면 모든 폰트를 Pretendard-Regular를 적용했다.테마가 라이트 모드일 때는 :root를 통해 기본 색상을 --background-color: white, --text-color: #222, --primary-color-1: #4120b0으로 설정하였고 이 속성들은 하나의 변수라고 생각하면 좋다.테마가 다크 모드일 때는 :root.dark를 통해 기본 색상을 --background-color: #121212, --text-color: ..

[패스워드 보이기]이번에는 jQuery를 사용하여 패드워드 창에서 특정 버튼을 통해 패스워드가 텍스트로 보이고 다시 가려줄 수 있는 기능을 구현해봅시다.기본적으로 패스워드를 입력하는 태그는 input 태그이고, type을 반드시 password로 지정해야한다.jQuery를 사용해야되기 때문에 반드시 html에 script 태그를 통해 작성해줘야 한다.See the Pen 비밀번호 보이기 by psm817 (@psm817) on CodePen.CSS에서는 .box_1에 position: relative를 적용하고 그 아래 특정 버튼 역할을 할 .mode에 position: absolute를 적용한다.또한 .mode에는 top: 0과 right: 0을 통해 아이콘들이 박스 안으로 들어오도록 하고 오른쪽으로..

[팝업 만들기]이번에는 JavaScript를 사용해서 팝업창을 만들어보도록 합시다.만들어 볼 팝업창의 기본 기능은 다음과 같습니다.버튼을 눌렀을 때, 화면 중앙에 팝업창이 생기게 되고, 팝업창이 열리게 되는 순간, 화면의 배경색은 살짝 어두운 색상으로 변하게 된다.팝업창을 닫기 위해서는 팝업창의 x 버튼을 누르거나, 팝업창 바깥의 어두운 배경을 마우스로 아무데나 클릭했을 때 팝업창이 닫히게 된다.아래는 먼저 구현된 HTML, CSS JS 코드이며 각 섹션별로 코드 풀이를 해보려한다.See the Pen 팝업 복습 by psm817 (@psm817) on CodePen. [HTML]html 하단의 텍스트로 된 box-3 부분을 제외하고 마크업한 코드를 아래 작성하였다. ..

[자바 스크립트 소개]JavaScript(JS)는 웹 사이트와 어플리케이션을 동적 및 상호 작용적으로 만드는 데 사용하는 언어 중에 하나이다.서버뿐만 아니라 브라우저에서 직접 실행할 수 있다는 점이 독특하다.HTML/CSS와 함께 JavaScript는 가장 일반적으로 사용하는 프로그래밍 언어 중 하나이다.이 때 주의할 점은 기본 Java의 클래스 사용이나 방식은 유사하지만, JavaScript는 엄연히 Java와는 다른 언어이다.JavaScript 작업을 쉽게 구현하기 위해서는 일반적으로 라이브러리를 많이 사용한다.JQuery나 React가 대표적인 JavaScript의 라이브러리라고 생각하면 된다.프레임워크는 라이브러리의 모음인데, 웹 사이트 구축에 필요한 모든 코드를 제공할 수 있다.Vue.js, N..