快乐不快乐

단어 간에 거리를 띄우고자 할 때 스페이스 바를 누르거나 를 누르는데 보다 효율적으로 css로 처리하는 방법이다. .space::after { content: ""; display: inline-block; width: 10px; /* 가상 요소의 너비로 간격 조절 */ }

1234567890 은행 앱에서 계좌번호 복사하는 기능과 동일한 기능이다. 모바일 웹에서 계좌번호에 이 기능을 적용해 놓으면 좋을 것 같다.

래디오에 체크된 기본값을 확인하여 로드될 때 내용을 출력한다. A타입과 B타입 선택 A타입 B타입 A타입 레이어 이것은 A타입 레이어의 내용입니다. B타입 레이어 이것은 B타입 레이어의 내용입니다.

래디오 선택에 따라 숨겨진 레이어가 출력된다. A타입과 B타입 선택 A타입 B타입 A타입 레이어 aaaaasdfafsafsaf B타입 레이어 bbbbzvzvxvzvzva

.menu { list-style: none; padding: 0; margin: 0; width: 200px; background-color: #f1f1f1; } .menu li { border-bottom: 1px solid #ccc; } .menu li:last-child { border-bottom: none; } .menu li a { display: block; color: #333; padding: 10px; text-decoration: none; } .menu li.active a { background-color: #175D91; color: white; } .menu li:hover a { background-color: #4CAF50; color: white; } .menu li.h..

Tab 1 Tab 2 This is tab content 1 This is tab content 2

원 위치에 있다, 지정한 지점을 지나면 메뉴가 화면 위로 떠 오르는 효과. 스크롤을 원 위치로 가면 메뉴도 원 위치로 .sub_an_menu { list-style: none; /* 리스트 기호 제거 */ display: flex; /* 요소들을 수평으로 배열 */ float:left; margin:20px 0 0px 30px ; border:0px solid RED; text-align:center; position: absolute; } .sub_an_menu li { margin-right: 20px; /* 메뉴 간격 조정 */ } .sub_an_menu li:last-child { margin-right: 0; } .sub_an_menu li a { display: block; padding: 1..

앵커 클릭 시 애니메이션 효과를 주어 부드럽게 쉬익~ 하면서 이동한다. 팍~!! 1초만에 이동 하는 것도 나쁘지 않지만 애니메이션 효과를 주는 것도 나쁘지 않다. 링크

흐르는 텍스트 wow는 스크립트를 불러온 후 호출하는 방식이지만, css 만으로 위로 올라가는 애니메이션 효과를 줄 수 있다. 이미지 슬라이드를 보는 느낌이 난다. 아래와 같이 변경하면 우측에서 왼쪽으로 흐른다. overflow-X: hidden; from { transform: translateX(3em) }/* 애니메이션 높이 */ to { transform: translateX(0) }

하이퍼링크 샵(#) 클릭 시 상단으로 이동하는 이벤트를 무시하기. 코딩하는 사람에게는 편하지만, 홈페이지를 이용하는 사람에게는 불편하다는 사실. 상단으로 이동하는 이벤트를 무시하도록 클래스를 추가한다. a[href="#"] {pointer-events: none;}