HTML

textarea 줄바꿈 태그 적용하기 textarea 줄바꿈 처리 전엔터로 입력한 내용이 DB 내에 특수문자로 들어가서 에러발생  textarea 줄바꿈 처리방법var TX_MEMO = $("textarea[name='TX_MEMO']").val().replace(/");- replace함수 사용하여 줄바꿈을 로 변환- "문자를 HTML 엔티티 <로 변환  textarea 줄바꿈 처리 결과 로 변환하여 들어갔다! ** 서버에서 가져와서 다시 해당 값을 엔터(줄바꿈)으로 보여져야할 경우$("textarea[name='TX_MEMO']").val(nvl(original.TX_MEMO, "").replace(//g, "\n"));서버에서 가져온 값 : original.TX_MEMO- 을 줄바꿈으로 변환해..

애니메이션 토글 버튼 만들기 See the Pen Untitled by Give J (@Give-J) on CodePen. 1. HTML 2. CSS .toggle-btn .switch { position: relative; display: inline-block; width: 46px; height: 28px; } .toggle-btn .slider { position: absolute; cursor: pointer; inset: 0px; background-color: rgb(241, 244, 246); transition: all 0.4s ease 0s; border-radius: 34px; } .toggle-btn .slider::before { position: absolute; content:..

모바일웹에서 a태그로 전화걸기 버튼 클릭시 모바일에서 해당 번호로 바로 전화연결 가능하게 했다. 기타 내용 * onclick도 사용가능하다

Select 박스 화살표 없애기 🩸이슈 발생 select 박스 기본 화살표 없애고 커스텀해보자. 🩹이슈 해결 1.Html 선택해주세요. 옵션1 2. CSS select { -webkit-appearance: none; /* 크롬 화살표 없애기 */ -moz-appearance: none; /* 파이어폭스 화살표 없애기 */ appearance: none; /* 화살표 없애기 */ display: inline-block; border: 1px solid #dbdbdb; width: 100%; } .select_renewal{ background: url(/img/landing/ic-arrow-down-grey-24px.png) no-repeat 95% 50%; border-radius: 6px; } .in..

체크박스 커스텀 하기 , 버튼 눌림 CSS 🩸이슈 발생 체크박스 커스텀해보기. 버튼 모양의 형태로 눌렸을 때에도 CSS 다르게 주어야한다. 🩹이슈 해결 1. Html 01. 선택해주세요. (중복 선택 가능) 1번선택지 2번선택지 3번선택지 * label for= "" 의 값과 input type="checkbox"의 id는 동일해야 한다. 2. CSS input { display: none; } .skinTypeCheck{ height: 280px; width: 470px; } .skinTypeCheck ul{ font-size: 15px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; font-weight: 500; line-heigh..

a태그로 파일 다운로드 하기 🩸이슈 발생 a태그로 파일 다운로드를 할 수 있는 속성이 있었다. 🩹이슈 해결

Video 태그 ios 미 재생 현상 해결하기 🩸이슈 발생 Video 태그가 분명 커밋 전 로컬에서는 자동재생까지 됐는데 모바일(ios)에서는 재생버튼조차 생성되지 않았다. 🩹이슈 해결 video 태그에 속성 추가하기 1) autoplay : 자동재생 (단, 안될 때 많음) 2) loop : 반복실행 3) muted : 음소거 4) playsinline: ios에서 비디오 전체화면 미처리를 위한 설정 💡유의사항 브라우저 정책 상 음소거 설정(muted) 을 하지 않으면 자동재생 제한이 있으며, 사용자의 핸드폰이 저전력 모드일 경우 자동재생이 되지 않는다.

OG태그 설정하기 🩸이슈 발생 웹 페이지 링크를 네이버 블로그에 올렸을 때 뜨는 사진을 변경해 달라고 하셨다. 그것도 제가 할 수 있는 거였나요..? 파비콘 설정하는 곳으로 가봐야 할 것 같아서 일단 헤더로 갔다. 🩹이슈 해결 1. Header 에 적혀있던 meta 태그 발견 구글링 후 새롭게 알게된 og태그 속성 2. og 태그란? Open Graph, SNS 게시할 때 보이는 웹 콘텐츠 내용. 헤드 태그 안에 작성된다. og:type 웹 페이지 타입 og:title 웹 사이트 이름 og:description 웹 페이지 설명 og:image 표시 이미지 3. 이미지 및 내용 수정 적용 네이버 블로그에 뜨는 웹사이트 링크 카카오톡에 뜨는 웹사이트 링크 4. 적용성공! 💡유의사항 OG태그 설정 전에 이미 ..

자바스크립트 툴팁, 툴팁 박스 만들기 🩸이슈 발생 클릭 시 수정/ 삭제 버튼 나타나는 툴팁 박스 뜨게 하기 🩹이슈 해결 See the Pen Untitled by Give J (@Give-J) on CodePen. 💡유의사항 바탕(배경)을 눌러도 툴팁 박스가 닫히도록 구현했다!

자바스크립트 카테고리 기능 만들기 🩸이슈 발생 페이지 추가 안하고 한 페이지 내에서 카테고리 만들어보기. 🩹이슈 해결 See the Pen Untitled by Give J (@Give-J) on CodePen.