UX·UI - FrontEnd Dev. Story

제이쿼리 8

자바스크립트 parseInt() / parseFloat() - 해당값을 정수/실수로 반환 - JS

문자를 숫자로 변환할 수 있는 내장함수 1. parseInt (변환할 값) - 해당값을 정수로 반환 const num = "5"; const num1 = "5.7" console.log(parseInt(num)); // 5 console.log(parseInt(num1)); // 5 // 반올림 상관없이 정수로 무조건 반환. 2. parseFloat (변환할 값) -해당값을 실수로 반환 const num = "5.8"; const num1 = "5.3"; console.log(parseFloat(num)); // 5.8 console.log(parseFloat(num1)); // 5.3 // 소수점 살려서 실수로 무조건 반환

배열전용 내장함수 반복문 forEach() / map() 자바스크립트 JS 공부

자바스크립트에 미리 포함 된 함수를 내장함수라 한다. 배열에 사용하는 반복문 내장함수에는 forEach() / map() 이 있는데 알아보자. forEach() / map() 에는 파라미터(인자)값이 3가지가 들어간다. ex) forEach( el, idx, arr ) el : 반복 돌고있는 대상 idx : 순서값 arr : 배열자체 1. forEach() const colors = ["red", "green", "blue"]; colors.forEach((el, idx, arr) => { //파라미터에는 3가지가 default.(반복도는 대상, 순서값, 배열자체 ) console.log(el); //red green blue console.log(idx); // 0 1 2 console.log(arr)..

제이쿼리&CSS 말줄임 스크립트로 처리하는 방법 / Ellipsis Using Css & J-query

문장이 길어질 경우 '...' 표시가 되도록 설정하는 방법에 대해 정리한다. CSS를 이용해서 많이 사용하는데 간혹 스크립트를 써야할때 있어서 이왕 정리할때 다 정리하려고 한다. 1. CSS - 1줄 말줄임표 설정하기 p{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - 2줄 말줄임표 설정하기 p{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; word-wrap: break-word; } See the Pen make Ellipsis using CS..

[jQuery] 요소의 추가 .append/.prepend/.before/.after/.wrap/.wrapAll

1. 기존 요소의 내부에 추가하는 요소 - 다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 컨텐츠를 추가 가능. 메소드 설명 .append() 선택된 요소 마지막에 새로운 요소나 컨텐츠를 추가한다. .prepend() 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다. .appendTo() 선택된 요소를 해당 요소의 마지막에 추가한다. .prependTo() 선택된 요소를 해당 요소의 첫번째에 추가한다. 1) .append() 메소드 $(target).append(source) source 객체를 target 객체의 마지막에 추가. ex) 첫 번째 아이템 두 번째 아이템 $("#list").append("새로 추가된 아이템"); 2) .prepend() 메소드 $(target).prepen..

[Javascript] 간단한 탭메뉴 자바스크립트로 제작하기 <tab menu>

1. HTML 마크업 메뉴01 메뉴02 메뉴03 내용01 내용02 내용03 우선 HTML 코드로 탭 메뉴 리스트들과 그 메뉴를 선택했을 때 나타나는 탭 컨텐츠를 제작합니다. * 탭 메뉴 리스트 : ul.tabs > li.tab-list * 탭 컨텐츠 영역 : div.tab-content 2. Javascript $(document).ready(function(){ $('ul.tabs li').click(function(){ var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#"+tab..

[JS] 날짜를 문자열 / 숫자로 변환하는 자바스크립트 메서드

자바스크립트를 사용하다보면 시간/날짜를 이용해서 작업하는 경우가 많다. 날짜 객체는 문자열과 숫자 모두 반환할 수 있는 유일한 타입이며 어떤 메서드가 있는지 알아보자. 메서드 설명 getDate() 날짜 중에 '일'자를 숫자로 반환 ( 1 - 31 ) getDay() 날짜 중에 '요일'을 숫자로 반환 ( 일요일 : 0 ~ 토요일 : 6 ) getMonth() 날짜 중에 '월'을 숫자로 반환 ( 1월 : 0 - 12월: 11 ) getFullYear() 날짜 중에 '년도'를 4자리 숫자로 반환 ( ex : 2022 ) getTime() 1970년 1월 1일부터 현재까지 시간을 초 단위 숫자로 반환 getHours() 시간 중 '시'각을 숫자로 반환 ( 0 ~ 23 ) getMinutes() 시간 중 '분'..

프론트앤드가 알아야 할 용어들 :: 라이브러리 / 프레임워크 / API / UI / UX

핵심 용어 용어 설명 프레임 워크 (Framework) 프레임 제공, 사용자가 동시에 하나 이상의 프로그램 모듈을 사용 할 수 있도록 함. 필요한 기능이 이미 만들어져 있어 틀을 이용해서 컴퍼넌트를 만들어서 완성하는 것. 단점 틀에서 벗어나기 어렵다. 단 하나의 프레임 웍만 사용가능하고 다른거 / 라이브러리랑 충돌. 무겁게 느껴질 수 있다. 라이브러리 (Library) 자주 사용되는 필요한 부분을 프로그램으로 모아놓고 가져와서 사용할 수 있게 한 것. 충돌이 없다. API 미리 만들어놓은 라이브러리를 가져와서 쓰는 기능. UI (User Imterface) 사용자 위주의 인터페이스. UX (User Experience) 사용자 경험의 인터페이스. :: 자바스크립트랑 제이쿼리의 차이가 뭐냐고? 우연히 본 ..

[자바스크립트] Javascript 개념잡기 i++과 ++i의 차이점

++i (전위증가) : i의 값이 1 증가된 후 증가된 값을 리턴한다 i++ (후위증가) : 먼저 해당 연산을 수행하고 나서, i 의 값을 1 증가시킴. 1. 전위증가​ int main() { int i = 1; int j = ++i; printf("i:%d, j:%d", i, j); } // i:2, j:2 2. 후위증가 int main() { int i = 1; int j = i++; printf("i:%d, j:%d", i, j); } // i:2, j:1 => 전위증가에서는 i가 1 증가한 뒤, 증가한 값을 j가 리턴받아 2를 출력한다 후위증가에서는 i가 1 증가 하지만, j는 증가하기 전 값인 1을 리턴받아 출력한다

반응형