본문 바로가기
728x90

전체 글156

[Javascript] JSON string object 변환 JSON.stringify() / JSON.parse() JSON : Java Script Object Notation 객체 데이터를 효율적으로 전달하기 위한 포맷 1. 자바스크립트 객체(Javscript object)의 문자열 (String) 변환 2. 문자열을 자바스크립트 객체로 변환 //Javascript 객체 생성 const obj = { name : 'GoodMemory', page : 'https://goodmemory.tistory.com' } //자바스크립트 객체의 문자열 변환 const objToStr = JSON.stringify(obj); //출력 console.log(objToStr); //문자열을 자바스크립트 객체로 변환 const strToObj = JSON.parse(objToStr); //출력 console.log(strToObj).. 2021. 2. 22.
[Javascript] 페이지 로드 이후 스크립트의 실행 defer Javascript async 와 defer 자바스크립트의 실행을 페이지 로드 이후로 늦출수 있는 키워드는 defer이다. [Sample Code :Javscript] ※사용 주의※ defer은 defer : 페이지 로드 이후 해당 스크립트 실행 2021. 2. 21.
[프론트엔드 CSS] 엘리먼트 내 스크롤바 생성 overflow-y CSS Element Scroll bar overflow-x, overflow-y 브라우저 자체가 아닌, 엘리먼트 내 스크롤바 생성을 해야 할 때가 있다. CSS Selector { overflow-x : scroll;//가로 스크롤바 생성 overflow-y : scroll;//세로 스크롤바 생성 } overflow-x 는 선택된 엘리먼트의 가로 스크롤바 생성 overflow-y 는 선택된 엘리먼트의 세로 스크롤바 생성 [결과 출력] 2021. 2. 20.
[프론트엔드] 애플 메인 페이지 샘플 코드(변경가능) Apple Main Page Sample Code (Feat. 순수 CSS , 바닐라 Javascript) 프론트 엔드 연습을 위해 별도 플러그인없이 순수 CSS와 바닐라 자바스크립트로 애플 메인 페이지를 만들어 보았다. 이를 응용하여 웹개발 학습을 하거나 자신의 홈페이지에 입히고 싶은 사람은 하단의 소스코드를 가져가서, 본인의 입맞에 맞게 데이터를 수정하여 사용하면 된다. 가장 하단에 소스파일을 첨부해놓았으니, 복붙이 귀찮으면 다운받아 사용하도록 하자 데이터는 데이터 베이스에서 넘어온 데이터나 직접 본인이 데이터를 수정하기 쉽도록 자바스크립트 소스 상단에 DbData라는 변수를 선언하고 샘플 데이터를 입혀놓았으므로, 자바스크립트를 잘 모르더라도 페이지 출력결과와 데이터를 비교하며 데이터의 수정이 용이하.. 2021. 2. 20.
[CSS] user-select 텍스트 선택 효과 없애기 웹 개발을 하다보면 간혹 버튼 등에서 텍스트 선택 효과가 나오는 경우가 있다. [CSS] span { cursor :pointer; border : 1px solid tomato; padding : 9px; background-color: transparent; color : tomato; /* 추가하여 텍스트 선택효과 방지 */ user-select: none; } 위와같이 css를 작성하게되면, 원치않는 텍스트 선택 효과를 막을수 있다. 2021. 2. 17.
[프론트엔드] 유튜브 페이지 코드 샘플 FrontEnd Youtube Html, Css, Javascript Code Sample (반응형) 프론트 엔드 연습을 위해 유튜브 페이지를 만들어보았다. 오랜시간에 걸쳐서 만든 페이지가 아니라 허접하다. 필요한 사람은 잘 다듬어서 사용하면 좋을 것같다. 출력화면, 소스코드 순서대로 기재해 두었으니 참고바란다. 구동 로직은 header에 css 파일 을 추가하고 body에 script만 추가하면 해당 페이지에 데이터 베이스 또는 사용자가 미리 설정한 데이터를 토대로 페이지 내 마크업 언어가 작성되는 방식이다. 파일은 가장 하단에 첨부해 놓았으니 참고바람. [CSS] :root { /* color */ --headerColor : #252525; --fontColor : #252525; --logoCol.. 2021. 2. 17.
[Javascript] 배열 Array API - splice() 자바스크립트 배열 Array API - splice() array.splice(시작 인덱스, 제거할 요소의 수, 추가할 요소); [개념 이해] array.splice(시작 인덱스, 제거할 요소의 수, 추가할 요소) : 배열의 기존 요소를 삭제 하거나 추가 샘플 예제 ↓ [javascript] //Array.splice() const spliceArr = [1,2,3,4,5]; //요소 추가 없이 0번째 부터 2개의 요소 삭제 const spliceResult = spliceArr.splice(0,2); console.log('-----splice : 요소 삭제-----'); console.log('splice 삭제 배열 : ' + spliceResult); console.log('splice 원본 배열 .. 2021. 2. 16.
[프론트엔드] 메뉴 바 코드 샘플 (반응형) FrontEnd Menu-bar Html, Css , Javascript Code Sample (반응형) 프론트 엔드 연습을 위해 메뉴바를 만들어 보았다. Pc웹과 모바일웹(768px 기준) 반응형이고, 필요한 사람은 편하게 사용할수 있도록 코드를 구성해보았다. 소스코드는 하단에 있고, 중간에 출력 화면, 사용방법을 순서대로 기재해 두었으니 참고바란다. 출력 화면 ↓ 사용방법↓ 1. 파일 다운 (파일 다운이 부담스러운 사람은 파일다운 하단에 소스코드 복붙해도 됨) 2. html header에 아래 소스 추가 3. html body 마지막에 아래소스 추가 4. menu-script.js 파일 내 메뉴 데이터 입맛에 맞게 변경 (홈페이지명, 로고, 메뉴 이름 등) 5. 출력확인 [Html,Css,Javasc.. 2021. 2. 16.
[Javascript] 배열 Array API - sort() 자바스크립트 배열 Array API - sort() array.sort(); [개념 이해] array.sort() : 배열의 요소를 정렬한 후 반환 (주의 : 원본 배열 또한 정렬된다.) 단, 정렬기준은 전달되는 함수에 따라 달라진다. 샘플 예제 ↓ array.sort() 같은 경우에는 여러 가지 예제를 준비하였다, 1. 숫자 정렬 2. 문자열 정렬 [javascript : 숫자 정렬] //배열 [Number] 정렬 const arr = [1,10,2,9,3,8,4,7,5,6]; //오름차순 const upSorted = arr.sort((first,second)=>{ //x,y 비교 후 x가 큰 경우 자리 바꾸기 //why? 오름차순은 앞 숫자가 작아야함 const x = first; const y =.. 2021. 2. 15.
[Javascript] 배열 Array API - reverse() 자바스크립트 배열 Array API - reverse() array.reverse(); [개념 이해] array.reverse() : 배열의 순서를 반전하여 반환한다. 주의할 점은 원본 배열 또한 반전되어 저장된다. 샘플 예제 ↓ [javascript] const arr = [1,2,3,4,5]; const result = arr.reverse(); console.log('reverse 이후 복사배열 : ' + result); console.log('reverse 이후 원본배열 : ' + arr); [결과 출력] reverse 이후 복사배열 : 5,4,3,2,1 reverse 이후 원본배열 : 5,4,3,2,1 2021. 2. 14.
728x90