본문 바로가기

🖥️ 프론트엔드12

이전 1 2 다음

[부트스트랩] 화면 쉽게 꾸미기 부트스트랩 홈페이지에서 필요한 기능 찾기 https://getbootstrap.kr/docs/5.3/components/buttons/ 버튼 다양한 크기, 상태 등을 지원하는 폼, 대화상자 등의 작업에 Bootstrap의 사용자 지정 버튼 스타일을 사용하세요. getbootstrap.kr HTML태그에 적절히 class를 추가해서 꾸미기 원하는 페이지 미리 구상하기 레이아웃을 잡고 각 태그에 부트스트랩 class를 추가한다 타임리프 태그를 적용해서 프로젝트와 연결해서 사용하고 이후 다듬어서 사용하면 됨 2024. 1. 5.

[Axios] Axios를 사용한 자바스크립트 코드 Axios란? Axios는 JavaScript로 작성된 강력하고 유연한 HTTP 클라이언트 라이브러리 주로 클라이언트 사이드에서 API 호출을 수행하는 데 사용함 브라우저와 Node.js 환경에서 모두 사용할 수 있으며, HTTP 요청을 쉽게 만들 수 있도록 도와줌 기본적인 사용법 Axios는 GET, POST, PUT, DELETE 등 다양한 HTTP 메서드를 지원함 // PUT 요청 axios.put('/api/users/1', { username: 'updateduser', password: 'newpassword' }) .then(response => { console.log(response.data); // 서버로부터의 응답 }) .catch(error => { console.error(erro.. 2023. 12. 15.

[CSS] 티스토리에서 커서 깜빡임 없애기 커서의 깜빡임이 가끔 거슬릴때가 있다. 글자 크기처럼 작으면 모르겠는데, 큰 사진이나 표 옆에서는 그만큼 비례해서 길어지기 때문에 정말 보기가 싫다! 아래 캡쳐 처럼 거슬리는 커서 깜빡임 없애는 방법 티스토리 관리 > 스킨 편집 > html 편집 > CSS body안에 다음의 코드를 추가해준다 caret-color: transparent; 적용 버튼을 누르면 끝 2023. 12. 9.

[공유] 티스토리 자동 목차 만들기, 따라다니는 자동 목차 생성 방법, 목차 네비게이터 만들기 (완전 쉬움 초보자 가능) 티스토리 목차 네비게이터 만들기(ver_1) by LabMate 매우 쉽고 간단합니다 각 티스토리의 테마에 맞게 수정할 수 있도록 css에 주석을 달아두었습니다 네비게이터를 만드는 기준 글 작성에서 제목1(h1), 제목2(h2), 제목3(h3) 이거나 blockquote(그 중에서 data-ke-style="style2"인 것) 입니다 네비게이터 기준에 따라 글을 작성하면 좋습니다 각 목차별 레벨은 설정하지 않았습니다. 모두 동일 레벨입니다 궁금한 점은 댓글 달아주세요 적용 결과 (우측 네비게이터) 글자를 누르면 페이지 내에서 이동이 가능합니다 스크롤을 내려도 따라다닙니다 설정 전 티스토리 스킨 정보 Book club 스킨을 적용하고 있습니다 글 페이지에서 백그라운드 컬러나 코드 스타일을 약간 수정한 상.. 2023. 12. 9.

[Script] 체크박스 내가 (체크)선택한 순서대로 입력되도록. 최근에 선택한 것이 가장 나중에. 체크 해제하면 그 내용만 삭제 체크하면 아래에 체크한 내용 텍스트 써주기 수동으로 개별체크했을 때 전제도 자동으로 체크되고, 하나만 체크 풀어도 체크해제되게 체크 개수가 4이하, 9일 떄 버튼 누르면 성공 alert 기능 구현하며 새로 배운 내용 $(선택자).arrt("속성 이름","속성 값")와 $(선택자). removeAttr("속성 이름")은 jQuery 1.6 이전 버전에서는 동작했지만, 최신 버전에서는 .prop() 메서드를 사용해야함 속성 추가 예시: $("#allChk").prop("checked", true); 속성 제거 예시: $("#allChk").prop("checked", false); 제이쿼리에서 태그로 선.. 2023. 12. 7.

[Script] 회원가입 페이지 기능 JavaScript/JQuery로 구현하기 요구사항 id : 문자(영어), 숫자만, 중복체크, "test" pw : 비밀번호확인(가입신청버튼 클릭시) 이름 : 5글자(maxlength x)-script 문자(한글,영어) 5글자 넘어갈 시 바로 체크 이메일 : 유효성(가입신청버튼 클릭시) 휴대폰 : 숫자만 4자리 -> 3번째로 4개 입력하면 3번째 창으로 커서이동 주민번호 : 숫자만 주민번호 유효성 뒷자리 맨첫자리만 숫자 1****** (가입 신청클릭시) 예시 화면 같은 기능을 JavaScript와 JQuery 두가지로 구현해봄 JavaScript (요구 사항을 잘못 해석한 코드가 있을 수 있음. 다음의 JQuery에서는 보완.) /* ======================================================= */ /* *.. 2023. 12. 7.

[JQuery] 제이쿼리 기본 사용법 script - jquery 필기 HTML태그들은 화면에 UI요소를 보여주고 입력은 가능하지만 데이터 처리는 안됨. HTML 태그와 데이터 처리를 위해서는 스크립트가 필요함. javaScript,jquery jquery를 사용하기 위해서는 선언 필요함 제이쿼리 기본문법 $(). //제이쿼리 기본 문법 $("selector").api(); 코드 작성 준비 옛날 방법 $(document).ready(function() { // 여기에 jQuery 코드 작성 }); 간결하고 일반적인 방법 $(function() { // 여기에 jQuery 코드 작성 }); 모든 파일은 위에서 부터 읽기 때문에 태그 일기 전에 태그를 사용하는 스크립트가 있다면 온전히 로딩 못됨. 대신 function안에 가둬놓으면 바로 실행되.. 2023. 12. 5.

이전 1 2 다음

티스토리툴바