728x90 728x90 CSS5 알림 활성화 / 비활성화 타원형 버튼 만들기 모바일 어플 개발 진행 알림 활성화 / 비활성화 버튼을 만드는 작업 진행중 작업해야할 디자인 [ HTML ] 유저가 기존에 활성화를 했던 상태라면 set 클래스명을 추가해줌 [ CSS ] 기본 css .notification-button { position: relative; display: inline-block; border-radius: 30% / 50%; width: 43px; height: 24px; background: #E6E6E6; } .notification-button .circle { position: absolute; top: 4px; left: 4px; display: inline-block; border-radius: 50%; width: 16px; height: 16px; ba.. 2024. 2. 22. user-select 텍스트 선택 효과 지우기 개발 진행하는데 입력태그가 아닌데도 텍스트 효과가 생겨서 찾아보다가 발견 간단하게 해결이 가능했다. div, p, span, table, tr, td { user-select: none;} -> 참고 블로그 [CSS] user-select 텍스트 선택 효과 없애기 웹 개발을 하다보면 간혹 버튼 등에서 텍스트 선택 효과가 나오는 경우가 있다. [CSS] span { cursor :pointer; border : 1px solid tomato; padding : 9px; background-color: transparent; color : tomato; /* 추가하여 텍스트 선 goodmemory.tistory.com 2024. 2. 22. position absolute 를 이용하여 화면 가운데 정렬하기! 이건 제가 자주 사용하는 css 인데요 쓸때마다 검색을 하는 상황이 생겨서,,ㅎ POPUP 저번 popup 스크롤 막기 예제를 이용하겠습니다 ㅎ 파란색 박스를 가운데로 옮겨 보겠습니다! .center_div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } css를 가운데 정렬하고 싶은 안에 넣어주세요! 저는 .popup_div 에 추가했어요! 간단하게 가운데 정렬이 된답니다! HTML 삽입 미리보기할 수 없는 소스 2023. 1. 16. 팝업 화면에서 스크롤 기능 막기! 화면에 팝업이 열렸을 때 스크롤을 막는 기능을 알아보겠습니다! POPUP 간단한 예제입니다! 팝업이 열려있다는 가정하에 만든 예제 화면입니다. 팝업이 열렸다는 가정하에 스크롤이 움직이는게 보이시죠 이럴 때 간단하게 스크롤 막는 방법이 있습니다. body { overflow: hidden; } 이걸 에 넣어주시면 되는데요! body에 height가 지정되어있어도 스크롤이 생기지 않는답니다! 2023. 1. 15. Input tag에 [숫자]만 입력하고 싶을 때 Tip! 보통 Input에 숫자만 입력할 수 있게 만들고 싶을 때 type="number"을 사용할 것입니다. type="number"를 사용하면 최소(=min), 최대(=max)도 간단하게 설정할 수 있어요. 또한, step을 설정해서 설정된 값을 기준으로 내리거나 올릴 수도 있어요. ( ex. step="10" -> 클릭 시 10씩 증가, 감소 ) 우리는 step이 필요없는 경우가 있을 수 있어요. 예를 들어, 핸드폰번호나 인증번호를 입력시 STEP이 필요할까요..? >> 필요하지않는 기능이 있다면 우리는 지우면 돼요! 그럴 때 사용하기 좋은 CSS와 태그에 직접 넣는 방법을 소개해드릴려고 해요. [ CSS 방법 ] 출처 - w3schools - Input:: 으로 직접 사용 시 step이 .. 2023. 1. 14. 이전 1 다음 728x90 728x90
