사이먼'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을 통해 아이콘들이 박스 안으로 들어오도록 하고 오른쪽으로..

[marquee]이번에는 marquee 태그를 적용하여 글자가 움직이는 효과를 적용해봅시다.marquee는 글자나 그림 등을 상하좌우로 움직이는 연출을 하고 싶을 때 사용하며, MS에서 Explorer에 적용하기 위해서 만들어낸 태그이다.아래 URL 주소를 참고하여 CSS만을 활용하여 여러가지 형태의 marquee를 확인해보고 실제로 적용시킬 수 있다.참고용 주소 : https://www.quackit.com/css/codes/marquees/See the Pen 240705(marquee) by psm817 (@psm817) on CodePen. [스크롤 바]이번에는 기존에 존재하는 스크롤 바를 커스텀해봅시다.딱히 필요한 라이브러리는 없으며, CSS만을 활용하여 스크롤 바 디자인을 할 수 있다.See..

[밑줄 효과 만들기]이번에는 각 메뉴에 마우스를 올려놓았을 때 밑줄이 그려지는 효과를 적용해봅시다.테일윈드를 사용하여 HTML 자체에서 클래스명을 통해 기본 디자인을 주는 방법도 함께 적용해봅시다.See the Pen 밑줄효과 by psm817 (@psm817) on CodePen.각 메뉴의 이름이 작성된 span 태그에서 position: relative를 적용한다.밑줄이 새겨질 부분은 ::after를 사용하여 배경 색을 칠해줘야 한다.after에 포함된 속성은 position: absolute와 실제 부모 격인 span 태그의 글자를 기준으로 아래에 있어야하고 왼쪽부터 그려져야되기 때문에 left: 0, top: 100%를 적용한다.top: 100% 대신 bottom: 0을 하게되면 밑줄의 heig..