본문 바로가기

Programing375

그림자효과 추가하고 마우스를 올렸을 때 커졌다가 떼면 원상태로 복귀하는 CSS 애니메이션 효과 적용하기 .클래스명 { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 그림자 효과 추가 */ transition: transform 0.3s, box-shadow 0.3s; /* 그림자 애니메이션 효과 추가 */ } .클래스명:hover { transform: scale(1.05); /* 마우스를 올렸을 때 크기를 살짝 키웁니다. */ box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); /* 그림자 효과를 더 짙게 만듭니다. */ } Programing/CSS 2024. 2. 29.
input에 입력된 값을 다른 곳에 붙여넣기 상황 웹 사용자가 값을 입력할 수 있는 input이 있고, 이곳에 타이핑해서 넣은 값을, button을 클릭하면 onclick 이벤트가 발생하여 특정 id를 가진 화면의 구역으로 텍스트 형태로 붙여넣고 싶은 상황 문제해결 순서 input 태그에 ID 값을 부여해준다. 인풋에 담긴 내용을 옮길(출력시킬) 태그에 아이디를 부여해준다. 이나 등 ① 자바스크립트에서 input 값을 특정 변수에 value로 담는 함수를 지정하고 ② innerHTML을 통해 변수값을 특정 태그 아이디에 대체시킨다. function 온클릭함수명() { // 버튼에 온클릭 이벤트로 발생시킬 함수명 // '값을담을변수명'에 인풋값을 불러온다. let 값을담을변수명 = document.getElementById('인풋아이디').value.. Programing/JavaScript 2024. 2. 28.
input 태그 값 가져와서 콘솔에 출력해보기 // input 값 가져오기 function 설정할함수명() { let 값을담을함수명 = document.getElementById('input의아이디').value; console.log(값을담을함수명); } 위와 같이 자바스크립트를 작성한다. 그리고 아래와 같이 버튼 등에 onclick 이벤트를 넣어준다. Programing/JavaScript 2024. 2. 28.
여러 개의 div 한 열로 정렬하기 출처 : https://nine01223.tistory.com/186 (html/css) div 2개 나란히 정렬하는 방법 div를 나란히 정렬하는 것은 사실 굉장히 복잡한 css 기술을 요구한다. 하지만 inline-block을 사용하면 굉장히 심플하게 원하는 효과를 낼 수 있다! 비록 100% 완벽한 방법은 아니지만(좀 더 복잡한 코 nine01223.tistory.com Programing/HTML 2024. 2. 28.
컬러 헥스코드 추출 사이트 https://www.color-hex.com/ Color Hex Color Codes Color Hex Color Codes Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. Color-hex.com also generates a simple css code for the selecte www.color-hex.com Programing 2024. 2. 28.

티스토리툴바