절차탁마
/*css*/ /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 참조 : https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp
value : 기본값 placeholder : 안내 문구 placeholder로 지정하면 화면상에는 뜨지만 submit을 해도 데이터가 넘어가지 않음. input type="number" 와 같은 숫자만 입력 가능한 박스에도 문자열로 안내 가능. //Custom //아무것도 출력되지 않음 경우에 따라 placeholder보다 lable을 이용해 안내 문구 만들기를 권장하는 경우 있음. 2018년 글로 조금 오래되었지만 여전히 참고할 만한 부분이 있어 아래 블로그를 읽어보면 좋을 듯. 블로그 주소: https://ibrahimovic.tistory.com/30 Placeholder를 사용하지 마세요. 이 글은 Don’t Use The Placeholder Attribute 를 번역, 핵심 내용만 짧게 요약..
$("#아이디").on("propertychange change keyup paste input", function() { });
Frontend Mentor - notifications page main 챌린지 뉴비 단계를 3번정도 하고 나니 조금 자신감이 붙어서 이번엔 주니어 단계에 도전했다 (프론트엔드 멘토 챌린지는 newbie, junior, intermediate, advanced, guru의 다섯 단계가 있다). 뉴비때보다 시간이 조금 더 걸렸지만, 구현에 성공했다. 동작설명 1. 스마트폰 앱의 알림창처럼 알림을 하나씩 누를 때 마다 Notification 글자 옆의 알림 숫자가 줄어들고, 누른 알림의 배경이 흰색으로 바뀌며, 알림 끝의 붉은 점이 사라진다. 2. Mark all as read를 누르면 모든 알림이 읽음 상태가 되며, 숫자도 0으로 바뀐다. 3. 메시지가 와 있는 알림을 누르면 메시지가 부드럽게 슬라이드 ..
box-shadow: inset(내부그림자) / x축이동 / y축이동 / blur-radius(블러) / spread-radius(크기) / 색상 /*예시*/ /*box-shadow: x축이동 / y축이동 / blur-radius / 색상*/ box-shadow: 0px 10px 15px hsl(0, 36%, 70%);
background 요소 중 linear-gradient 활용 background: linear-gradient(각도, 색상, 색상); 각도 /*예시*/ background: linear-gradient(90deg, hsl(171, 41%, 78%), hsl(208, 46%, 41%)); to top, to bottom, to left, to right n deg (degree의 줄임말) 색상 /*예시*/ background: linear-gradient(to left, yellow 25%, green 30%, blue); 2가지 이상의 색상도 가능 색상 뒤에 n %를 붙여서 색상 범위 지정
![[HTML] input 요소 안내 문구 (placeholder)](http://i1.daumcdn.net/thumb/C120x120/?fname=https://blog.kakaocdn.net/dn/bzR1gx/btrX4ZW6s2J/cZXkflee9gz0TEjXd0ii3K/img.png)
![[Toy Projects] 알림창 동작화면](http://i1.daumcdn.net/thumb/C120x120/?fname=https://blog.kakaocdn.net/dn/bXBxyx/btrWQ37P76L/IYe3T4eB8Dk5UDYDCVpxJk/img.png)