반응형 웹프론트엔드8 [개발자도구] 웹 페이지 body 내용 직접 편집하기 / 크롬 개발자 도구 contentEditable 아래 코드를 사용하면 웹 페이지 내용을 직접 편집할 수 있습니다. document.body.contentEditable=true *샘플 화면입니다 ^^; 보시는 것처럼 화면을 사용자 마음대로 편집할 수 있습니다. 문구 보이시나요? contentEditable 속성은 사용자가 html 요소를 편집할 수 있는지 여부를 나타냅니다. 속성 값으로 'true', 'false', 'inherit'이 있는데요. 각각 편집 가능, 편집 불가능, 부모 요소의 편집 가능 여부 상속을 의미합니다. 이 기능을 통해 페이지를 변경했다고, 변경된 내용이 서버에 저장되는 것은 아닙니다. 임시로 클라이언트 측 화면을 수정하는 것이니, 데모나 프레젠테이션 등 화면 이미지가 필요할 때 사용하시면 되겠습니다. 2024. 2. 21. [Javascript/정규표현식] 텍스트에서 공백(' ') 제거하기 클라이언트에서 서버로 데이터를 전달할 때, 공백을 처리해야 하는 경우가 꼭 있다. 자바스크립트로 웹 프론트엔드 작업 시 매우 자주 사용하는 함수들이니 기억해 두는 게 좋겠다. 1. 모든 공백 제거하기 let str = "Hello World"; let result = str.replace(/\s/g, ''); 2. 문자옆 앞 뒤 공백 제거하기 let str = " Hello World "; let result = str.trim(); 3. 문자열 내 여러 공백을 하나로 줄이기 let str = "Hello World"; let result = str.replace(/\s+/g, ' '); 2024. 1. 25. [Javascript] 자바스크립트 Swiper 라이브러리 추천, Javascript Slider Library 슬라이더 기능은 웹 사이트를 만들 때 자주 사용합니다. Swiper는 부트스트렘 템플릿에서도 자주 사용하는 라이브러리로 사용법을 어느 정도 알아두면 좋습니다. 사이트에 가서 Swiper js를 직접 다운로드해 사용하셔도 되지만, 만약 물리 파일을 직접 추가하고 싶지 않다면 아래 CDN을 사용합니다. Swiper의 html 형태는 아래와 같습니다. 기본적으로 class 이름은 swiper를 사용합니다. Slide 1 Slide 2 Slide 3 ... css를 사이즈를 조정하고 싶으면 아래 접근자를 활용하면 됩니다. .swiper { width: 600px; height: 300px; } swiper html를 따로 컴포넌트화 한 후 ajax로 불러오고 싶을 때가 있을 거에요. 그럴 땐 ajax succe.. 2024. 1. 16. [JSP/jstl] 연도 선택 드롭다운 jstl로 구현하기 현재 연도부터 과거 10년까지의 연도를 선택할 수 있는 드롭다운 메뉴를 생성하는 코드 2019. 7. 5. [Javascript] 자바스크립트 시간 타이머 표시 은행 사이트의 상단처럼, 시간 타이머를 보여달라는 요청을 반영했다. 브라우저와 웹로직 서버의 카운트 시간이 다를 수 있기 때문에, 5분 마다 쿠키에 저장된 expired time을 가져와 계산. 결과물 2018. 12. 5. 이전 1 2 다음 반응형
