본문 바로가기

html, css, javascript68

css 창 크기에 따른 이미지 사이즈 조절 css 창 크기에 따른 이미지 사이즈 조절창 크기를 줄이면 이미지 사이즈가 줄어드는 코드는 아래와 같습니다.  See the Pen Untitled by hyunho (@momalcy) on CodePen.">See the Pen Untitled by hyunho (@momalcy) on CodePen. 2024. 11. 27.
css 버튼 그림자 넣기 css 버튼 그림자 넣기버튼에 마우스를 올리면 box-shadow 가 적용된 버튼을 보실 수 있습니다.  See the Pen box-shadow by hyunho (@momalcy) on CodePen.">See the Pen box-shadow by hyunho (@momalcy) on CodePen. 2024. 11. 26.
css 버튼 클릭하면 반대로 회전 transform.rotate css 버튼 클릭하면 반대로 회전 transform.rotate 버튼에 회전 효과  See the Pen button_transform_rotate by hyunho (@momalcy) on CodePen.">See the Pen button_transform_rotate by hyunho (@momalcy) on CodePen. 2024. 11. 25.
클릭시 버튼 크기 작아지기 css, html 클릭시 버튼 크기 작아지기 css, htmlactive 상태에서 transform: scale 을 이용하여 클릭시 크기가 잠시 작아지는 버튼을 만들 수 있습니다.  See the Pen Untitled by hyunho (@momalcy) on CodePen.">See the Pen Untitled by hyunho (@momalcy) on CodePen. [참고] 버튼 크게하기 transform: scale 을 1 이상으로 지정하면 클락하는 순간 버튼의 크기가 커집니다. See the Pen transform_scale_up by hyunho (@momalcy) on CodePen.">See the Pen transform_scale_up by hyunho (@momalcy) on C.. 2024. 11. 24.
html css 모서리 둥글게 입력창 만들기 html css 모서리 둥글게 입력창 만들기border-radius 속성을 사용하면 입력 필드의 모서리를 둥글게 만들 수 있습니다 codepen에서 보기  See the Pen Untitled by hyunho (@momalcy) on CodePen.">See the Pen Untitled by hyunho (@momalcy) on CodePen. html, css 코드 한눈에 보기 2024. 11. 22.
사이드바 하위 메뉴 클릭하면 나오고 클릭하면 사라지는 기능 사이드바 하위 메뉴 클릭하면 나오고 클릭하면 사라지는 기능 (feat 부트스트랩, javascript) 부트스트랩 5와 javascipt 코드를 활용하여 사이드바 메뉴를 만든 예시 코드입니다. 부트스트랩 5는 사이드바 스타일을 고정하기 위해 사용하였으며, javascript는 마우스 클릭에 따라 메뉴가 사라지고 나타나는 동작에 관여합니다. HTML 삽입 미리보기할 수 없는 소스 위 코드는 document.getElementById 객체에 style.display 매소드를 사용하였습니다. style.display 에서 주로 사용하는 옵션은 none, block이고 none 은 해당 내용을 제거하기 위해 사용되고 block은 다시 보여주기 위해 사용됩니다. 위 기능을 사용한 코드팬 예시는 아래와 같습니다. .. 2024. 3. 13.