본문 바로가기
728x90

프론트엔드111

[CSS] Transform 속성 span 태그에 적용하기 CSS Transform 속성을 Span 태그 등 inline태그에 적용시 반응이 없을때가 있다. css transform 속성은 display : inline 속성을 가진 태그에는 적용이 되지 않는다. 만약 원하는 태그가 transform 속성이 적용되지 않는다면, inline 태그가 아닌지 확인하고, 해당 속성을 inline -> inline-block 으로 변경해보자 [SPAN 태그 display : inline] [SPAN 태그 display : inline-block] 2021. 2. 22.
[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.
[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.
[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.
[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.
[Javascript] 배열 Array API - includes() 자바스크립트 배열 Array API - includes() array.includes(검색요소); [개념 이해] array.includes(검색요소) - 배열이 해당 검색 요소를 포함하고 있는지 여부 Boolean 반환 샘플 예제 ↓ [Javascript] const animals = ['dog','cat','horse','bird']; const isInclude1 = animals.includes('cat'); const isInclude2 = animals.includes('computer'); console.log(isInclude1); console.log(isInclude2); [결과 출력] true false 2021. 2. 13.
[Javascript] 배열 Array API - shift(), unshift() 자바스크립트 배열 Array API - shift, unshift array.shift(); array.unshift(추가할 요소); [개념 이해] array.shift() : 배열의 첫번째 요소를 제거, 제거된 요소를 반환 array.unshift(추가할 요소) : 배열의 첫번째에 새로운 요소 추가, 새로운 길이 반환 샘플 예제 ↓ [javascript] const arr = [1,2,3,4]; //shift를 통한 배열의 첫번째 요소 삭제 let firstRemove = arr.shift(); console.log('-----shift()-----') console.log('삭제된 요소 : '+ firstRemove); console.log('shift 후 배열 : ' + arr); //unshift.. 2021. 2. 12.
728x90