728x90 Front-end47 [javascript] 버튼 클릭하면 클립보드로 텍스트 복사하기 (-를 제외하고 숫자만) 폰 번호나 계좌번호 등 하이픈이 들어가는 숫자 텍스트에서 '-'를 공백으로 대체하고 복사하는 코드 var textToCopy = $(this).text().replace(/-/g, ""); See the Pen copy to clipboard by sel (@wimmwell) on CodePen. 2023. 7. 27. 그누보드 모바일 버전 해제하고 반응형 웹으로 사용하는 방법 그누보드에 기껏 반응형 CSS로 작업 해놨더니 모바일 디바이스에서는 못생긴 그누보드 모바일 웹으로 연결 됐다. ㅂㄷㅂㄷ.. 여기서 PC버전으로 들어가도 이상한 뱌율로 보인다. 이 문제는 config 설정 변경을 통해 해결할 수 있다. 1. public_html의 config.php 파일을 연다. 2. use_mobile을 검색해 'G5_USE_MOBILE' 부분을 찾는다. 3. 모바일 홈페이지를 사용하지 않기위해 true->false로 변경해준다. 그러면 이렇게 PC사이트를 기준으로 반응형 스타일이 적용되어 보인다. 그리고 head.sub.php 파일에서 2023. 7. 22. [HTML/javascript] 옵션 선택에 따라 달라지는 셀렉트 박스 Cascading dropdown 상위 셀렉트박스에서 어떤 옵션을 선택하는지에 따라 다음 셀렉트박스의 옵션 내용이 바뀐다. 자바스크립트가 필요하다. https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp How To Create a Cascading DropdownW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com 위의.. 2023. 6. 24. [CSS/javascript] 스크롤 하면 줄어드는 헤더 (How To Shrink Navbar on Scroll) 스크롤 높이가 100이 넘어가면 gnb에 변경 후 스타일이 적용된 fixed 클래스를 추가하여 헤더 크기를 줄이는 코드이다. &.fixed { padding: 1rem 0; background-color: #fff; .gnb-wrap { .gnb-logo {max-width: 14rem;} .gnb-list {font-size: 1.8rem;} } } See the Pen Untitled by sel (@wimmwell) on CodePen. 2023. 6. 22. [CSS] overscroll-behavior: contain의 역할 기본적으로 한 박스 안의 스크롤이 끝나면 부모 요소의 스크롤로 넘어간다. 이 것을 scroll chaining 스크롤 체이닝이라고 한다. 이 스크롤 체이닝을 막고싶은 경우 사용하는 속성이 바로 overscroll-behavior이다. 스크롤 박스에만 적용되는 속성이다. 기본 상태에서는 이렇다. 박스 안에서 스크롤이 끝나면 다음 스크롤로 넘어간다.overscroll-behavior: contain;을 적용하면이렇게 박스 안에서 스크롤이 끝나도 더 이상 스크롤이 되지않고 머무른다. (부모 요소에 커서를 대고 스크롤 하면 당연히 스크롤 됨) overscroll-behavior: none;도 부모요소의 스크롤을 제한하여 contain과 같은 효과를 낸다. 사실은 서로 다르다고하는데 외적으로는 큰 차이를 느끼기 .. 2023. 6. 18. [HTML/CSS] DIV 안에 이미지 가득 차게 중앙 정렬하기 같은 비율의 이미지만 사용한다면 수직, 수평 중앙정렬이 어렵지않겠지만 클라이언트들은 보통 제각각의 이미지를 사용하잖아요?그래서 이미지 박스를 작업할 때는 어느 비율의 이미지든 박스에 풀로 채워지며 센터 정렬이 되게 해야한다. 이런 세로 이미지를 박스에 풀로 채운다고 치자이미지 중앙 정렬은 크게 두가지의 CSS로 맞추는데 display: flex,나 position: relative;가 있다.왼쪽(1번)은 flex로 센터 정렬 (object-fit: cover;를 안넣으면 이미지 원본 비율이 깨진다.),.box1 { display: flex; align-items: center; justify-content: center; img { width: 100%; height: 100%; .. 2023. 5. 23. [javascript] 커스텀 스타일링 SELECT 박스 만들기 HTML, CSS를 수정해서 셀렉트박스를 꾸밀 수도 있지만 한계가 있다. select 태그 자체를 꾸민다해도 option 박스는 기본 디자인에서 크게 벗어나지 못하며, 모바일에서는 폰 자체 UI가 적용되기때문이다. 웹디자이너분이 넘기는 시안은 보통 커스텀 셀렉박스인데 사실 나는 코딩하는 입장에서 귀찮기때문에 웬만하면 복잡한 스타일링을 지양하고싶긴하다ㅎㅎ 아무튼 기본 UI에서 벗어나기 위해 자바스크립트를 이용해 스타일링을 해보자. 옵션값이 중복으로 들어가는 다소 귀찮은 코드이다. 그래도 모바일에서 꾸며진 모습이 깔끔해 맘에 든다. See the Pen Custom select box by sel (@wimmwell) on CodePen. 코드펜의 콘솔을 열어서 확인해보면 옵션 값을 선택할때마다 값이 찍히는.. 2023. 5. 22. [HTML] Unsplash 랜덤 이미지(무료) src로 불러오기 코드를 이용해 예쁜 상업용 무료 이미지가 가득한 Unsplash의 이미지를 랜덤으로 불러올 수 있다.새로고침하면 이미지가 바뀜. img의 src에 "https://source.unsplash.com/random/?원하는검색어"를 넣어주면 된다.영어 기반 사이트라 영어로 입력해야 많은 결과를 얻을 수 있다. 아래의 이미지는https://source.unsplash.com/random/?seoul" /> 의 결과값이다.seoul을 검색했을 때 나오는 이미지가 랜덤으로 로드된다. 2024-11-07 추가 위 방법은 더이상 작동하지 않습니다엑박이 떠서 찾아보니 source.unsplash.com은 API 사용자에게만 제공되는 것 같아요 2023. 4. 21. [CSS] 스크롤바 scrollbar CSS 스타일링 수정하기 스크롤바는 스크롤바의 부모 요소::-webkit-scrollbar {}를 통해 수정할 수 있다. 예를 들어 페이지 전체의 스크롤바면 body::-webkit-scrollbar{}이다. 스크롤바 선택자는 세부적으로 ::-webkit-scrollbar — 스크롤바 전체. ::-webkit-scrollbar-button — 스크롤바의 버튼 (한 번 누를 때마다 위아래로 한 줄씩 오르내리는 위아래 화살표). ::-webkit-scrollbar-thumb — 드래그할 수 있는 스크롤 손잡이. ::-webkit-scrollbar-track — 흰색 막대 위에 회색 바가 존재할 경우의 스크롤바의 트랙(진행 표시줄). ::-webkit-scrollbar-track-piece — 손잡이에 의해 덮이지 않은 트랙(진행 표.. 2023. 4. 20. 이전 1 2 3 4 5 6 다음 728x90
