좋아요 구현 (1) codepen에서 버튼 가져오기 >> PHP - 좋아요 구현 (1) 버튼 생성 1. 코드펜에서 버튼 가져오기 https://codepen.io/aaroniker/pen/ZEbLZrK Thumbs up button ... codepen.io 2. 버튼 구조 정리하기 HTML 원본 Liked Liked 수정 dark모드와 dribbble, twitter은 지운다. Liked CS.. ohcodingoh.tistory.com 테이블 셋팅하기 데이터 불러오기 1. 해당 게시글의 좋아요 데이터 불러오기 Liked 좋아요 : 2. 로그인 상태의 사용자가 해당 게시글에 좋아요를 눌렀는지 안눌렀는지 여부 데이터 불러오기 좋아요 구현 (3) 데이터 조작하기(jQuery)
01. 이벤트 메서드 : addEventListener('click') : 클릭했을 때 02. 이벤트 메서드 : addEventListener('scroll') : 스크롤 했을 때 03. 이벤트 메서드 : addEventListener('resize') : 브라우저 사이즈 변경 됐을 때 04. 이벤트 메서드 : addEventListener('selectstart') : 텍스트 선택을 시작 했을 때 05. 이벤트 메서드 : addEventListener('visibilitychange') : 브라우저의 탭 상태가 변경 했을 때 06. 이벤트 메서드 : addEventListener('DOMContentLoaded') : 로딩이 된 후 07. 이벤트 메서드 : addEventListener('mousedo..
01. 요소 메서드 : 선택자 : Document.querySelector() : 요소 선택자 02. 요소 메서드 : 선택자 : Document.querySelectorAll() : 모든 요소 선택자 03. 요소 메서드 : 선택자 : Document.getElementById() : 아이디 요소 선택자 04. 요소 메서드 : 선택자 : Document.getElementByClassName() : 클래스 요소 선택자 05. 요소 메서드 : 요소 : Document.createElement() : 요소 만들기 06. 요소 속성 : 선택자 : Element.firstElementChild : 첫 번째 자식 요소 선택자 07. 요소 속성 : 선택자 : Element.lastElementChild : 마지막 번..
01. 브라우저 객체 : window 객체 메서드 : window.alert() : 알림창 표시하기 02. 브라우저 객체 : window 객체 메서드 : window.confirm() : 확인창 표시하기 03. 브라우저 객체 : window 객체 메서드 : window.prompt() : 입력창 표시하기 04. 브라우저 객체 : window 객체 메서드 : window.open() : 새로운 창 열기 05. 브라우저 객체 : window 객체 메서드 : window.close() : 새로운 창 닫기 06. 브라우저 객체 : window 객체 메서드 : window.focus() : 페이지 포커스 설정 07. 브라우저 객체 : window 객체 메서드 : window.blur() : 페이지 포커스 벗어났을..
01. 수학 메서드 : Math.round() : 반올림 : 반환(숫자) 02. 수학 메서드 : Math.floor() : 버림 : 반환(숫자) 03. 수학 메서드 : Math.ceil() : 올림 : 반환(숫자) 04. 수학 메서드 : Math.trulc() : 값의 정수 부분만 반환 : 반환(숫자) 05. 수학 메서드 : Math.random() : 0과 1사이의 난수 값을 반환 : 반환(숫자) 06. 수학 메서드 : Math.max() : 가장 큰 값을 반환 : 반환(숫자) 07. 수학 메서드 : Math.min() : 가장 작은 값을 반환 : 반환(숫자) 08. 수학 메서드 : Math.abs() : 절대값 반환 : 반환(숫자) Math 메서드 참고 사이트 >>
01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자) 02. 배열 메서드 : join() : 배열 요소 문자열 결합 : 반환(문자열) 03. 배열 메서드 : push() : 배열 마지막 요소에 추가 : 반환(숫자) 04. 배열 메서드 : pop() : 배열 마지막 요소에 삭제 : 반환(삭제된 요소) 05. 배열 메서드 : unshift() : 배열 처음 요소에 추가 : 반환(숫자) 06. 배열 메서드 : shift() : 배열 처음 요소 삭제 : 반환(삭제된 요소) 07. 배열 메서드 : reverse() : 배열 요소의 순서를 반대로 정렬 : 반환(배열) 08. 배열 메서드 : sort() : 배열 요소를 정렬할 때 : 반환(배열) 09. 배열 메서드 : concat() : 배열 요소..
01. 문자열 : 문자열 결합 / 템플릿 문자열 02. 문자열 속성 : length : 문자열 길이 구하기 : 반환(숫자) 03. 문자열 메서드 : toUpperCase() : 문자열 대문자 변경 : 반환(문자열) 04. 문자열 메서드 : toLowerCase() : 문자열 소문자 변경 : 반환(문자열) 05. 문자열 메서드 : trim() : 문자열 공백 제거 : 반환(문자열) 06. 문자열 메서드 : indexOf : 문자열 검색 : 반환(숫자) 07. 문자열 메서드 : lastIndexOf() : 문자열 검색 : 반환(숫자) 08. 문자열 메서드 : search() : 문자열 검색 : 반환(숫자) 09. 문자열 메서드 : includes() : 문자열 포함 여부 검색 : 반환(불린) 10. 문자열 ..
CSS 리셋 세팅하기. 1. 여백초기화 body, div, dl, dt, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, button, article, aside, details, footer, header, hgroup, menu, nav, section, figure, figcaption { margin: 0; padding: 0; box-sizing: border-box; } 2.시멘틱 태그 초기화 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav..