기록창고

이번에는 버튼을 클릭하면 버튼의 모양을 바꾸게 할 것이다. 기존의 햄버거 모양에서 X로, X에서 다시 햄버거 모양으로 바뀌게 할 것이다. 이를 위해 이번에는 자바스크립트 코드를 작성할 것이다. 시작 전, 기본 HTML 코드는 아래와 같다. 햄버거 버튼을 위한 선 버튼에 hamburger_button이라는 id를 추가하였다. 그리고 저번 글에는 button의 class에 clicked가 있었다. 하지만 clicked는 버튼이 클릭된 경우 추가될 클래스이며 버튼은 처음에는 클릭되지 않은 상태이기에 clicked를 제거하였다. 이제 본격적으로 코드를 작성하기 전, 대략적인 의사 코드를 구상해보자. 버튼 요소를 선택한다. 버튼 요소가 클릭되는 것을 감지한다. 버튼이 클릭되었을 경우, clicked 클래스를 추가..

햄버거 버튼을 위한 선 저번에 만들었던 햄버거 버튼을 이어서 진행할 것이다. 이번에는 버튼을 누를 경우 햄버거에서 X자로 바뀌게 할 것이다. 이를 위해 button의 class에 "clicked"를 추가한다. 그리고 X자는 2개의 선으로 구성되어 있으며 아래처럼 선을 구성할 것이다. before는 왼쪽 위에서 오른쪽 아래로 내려가는 선을, after는 오른쪽 위에서 왼쪽 아래로 내려가는 선이다. 1. 가운데 선 가리기 X자 버튼은 선이 두 개 뿐이다. 그렇기에 기존의 3개의 선 중 가운데 선(span)을 지워야 한다. .hamburger.clicked span { display: none; } 지금 만드는 버튼은 클릭된 상태의 버튼이기에 .clicked도 추가해야 한다. 2. before, after 기..

얼마 전에 배웠던 햄버거 버튼 만들기를 복습할 것이다. 햄버거 버튼이란 위의 이미지처럼 3개의 선이 가로로 놓여져 있는 버튼이다. 이 버튼을 처음부터 만들어보자. html 코드는 아래와 같다. 햄버거 버튼을 위한 선 1. 대략적인 버튼 크기 설정 우선 대략적인 버튼의 크기를 설정할 것이다. 가로, 세로 200px인 정사각형이 적당할 것 같다. 이를 위해 button을 아래처럼 적절히 설정한다. /* 버튼 초기 설정 */ button { appearance: none; border: 0; padding: 0; background-color: transparent; border-radius: 0; } main { width: 100vw; height: 100vh; display: flex; justify-c..

1. 구현할 것 https://uiverse.io/satyamchaudharydev/curvy-rat-14 Button by satyamchaudharydev This Button was posted by satyamchaudharydev. Made with CSS. You can create your own elements by signing in with GitHub. uiverse.io 이번에 구현할 버튼이다. 마우스를 올렸을 때, 여러 색이 오른쪽으로 움직이는 애니메이션이 신기해서 이 버튼을 선택하였다. 구현해야 할 것은 다음과 같다. 버튼의 기본 스타일 hover일 때의 스타일 2. 버튼 구현 2-1. 버튼의 기본 스타일 import styled from "styled-components"; i..

1. 구현해야 할 것 https://uiverse.io/ShrinilDhorda/wicked-lionfish-83 이번에 구현할 것은 위의 버튼이다. 해야할 것을 정리하자면 다음과 같다. 버튼의 기본 모양 마우스를 올렸을 때 변화하는 모양 버튼 밑에 반사되는 모양 2. 구현 2-1. 버튼의 기본 모양 버튼의 기본 모양에서 신경써야 할 부분들이다. 버튼의 배경색 버튼의 글자색 버튼의 그림자색 배경색과 글자색, 그림자색의 색상 코드를 잘 모르기에 배경색은 black으로, 글자색은 white, 그림자색은 blue로 설정하였다. 작성한 코드는 다음과 같다. import styled from "styled-components"; const Container = styled.div` width: 80%; min-w..

1. 구현해야 할 것 오늘 구현해볼 button이다. 이 버튼에서 구현해야할 것은 다음과 같다. 버튼의 기본 디자인 마우스를 올릴 경우 버튼 속의 글자가 한 글자씩 내려오는 애니메이션 마우스로 클릭할 경우 버튼이 눌리는 듯한 모습 마우스를 버튼에서 뗄 경우 글자가 위로 떠오르는 애니메이션 2. 구현 2-1. 버튼의 기본 디자인 가장 먼저 버튼의 기본 디자인을 구현해보았다. 버튼의 width와 height 값은 Page Ruler Redux 확장 프로그램으로 측정한 값을 이용하였다. import styled from "styled-components"; const bgColor = "#0071E1"; const shadowColor = "#0D5DAB"; const Container = styled.div..

이번에 연습해볼 버튼은 위의 버튼이다. 위의 버튼에서 구현해야할 것은 다음과 같다. 버튼의 기본 모양 (hover 시) Hover라는 글자가 위로 이동한 후 Click으로 바꾸기 버튼을 좌측 상단/좌측 하단/우측 상단/우측 하단이 hover상태일 시 위치에 맞게 버튼을 기울이기 버튼의 background-color와 border의 색은 각각 #F4AE51, #F29822으로 설정하였다. 이 값은 색상 스포이드 도구라는 확장 프로그램를 통해 구하였다. 이를 통해 구현한 버튼의 기본 모양은 다음과 같다. import styled from "styled-components"; const bgColor = "#F4AE51"; const borderColor = "#F29822"; const Container =..

CSS 연습을 하기 위해, uiverse라는 사이트의 디자인들을 적어도 하루에 하나씩 구현해보려고 한다. 오늘 구현해보려고 한 것은 바로 이것이다. (https://uiverse.io/Navarog21/loud-bird-67) 이미지와 같이 마우스를 올리기 전에는 좌우에만 파란색 border가 있고 마우스를 올리면 border가 모든 방향으로 생기고 버튼의 배경색이 변한다. 처음 이 버튼을 보고 border는 이렇게 설정하면 될 것이라 생각했다. import styled from "styled-components"; const Container = styled.div` width: 80%; height: 80vh; border: 2px solid black; border-radius: 20px; disp..