코딩하는 복서 🥊

1. 슬라이드 원리1) 일정한 크기의 이미지들을 float:left로 '가로'로 정렬 2) overflow: hidden 으로 딱 한장씩만 보이게 함 3) 버튼을 누르면 transform: translateX(±한장크기)로 한장씩 다음/이전 슬라이드 이동 2. HTML 작성1) 슬라이드는 4개 준비 2) 이전 버튼, 다음 버튼도 빠지면 섭함 3) 아이콘은 폰트어썸(fontawesome)에서 연결 DOCTYPE html> new_slide 3. CSS 작성1) float: left 로 이미지를 가로열로 정렬 .slide_item { float: left; } 2) 슬라이드에 한장 크기로 width를 정하고 넘치는건 숨기는 overflow: hidden 시전 (이쁘게 센터도 잡음) - 여기서 배너 수가 많아..

0. 들어가며 - 브라우저는 출력까지 기본적으로 4ms 정도의 대기시간이 있다. 1. setTimeout : 일정시간이 지난 후 함수 실행 - setTimeout(콜백함수, 시간, 인수) // 매개변수 기본은 두개 (콜백함수, 시간) - 함수에 '인수'가 필요하다면 시간 뒤에 작성해준다. - 시간은 ms 단위 // 3000은 3초를 의미한다. - 시간은 0으로 적어도 바로 실행 안됨. // 현재 실행중인 스크립트가 종료된 이후 스케줄링 함수를 실행 함. // setTimeout : 일정시간이 지난 후 함수 실행 function hello(){ console.log("hello") } setTimeout(hello, 3000); // 3초후 hello 출력 (처리 속도에 따라 차이있음) // 이렇게 써도 ..

변수는 어떤 정보에 이름을 붙여서 저장하고 싶을때 사용 예약어 (reserved words) -이미 js에서 사용하고있는 '단어'를 예약어라하며 '변수'명으로 사용할 수 없음. -javascript reserved words 검색하면 리스트 나옴. eg) class = 'nike' //오류남. 관련링크 let 변수는 값이 변경될 수 있음 // 변하는 값은 let으로 선언 (재선언 불가, 재할당 가능) const는 값이 안바뀜 // 바뀌지 않는 '상수'를 선언할 때 쓰는 변수 (재선언 불가, 재할당 불가) 팁 // 모든 변수를 const로 선언해놓고 추후 변경될 변수들은 let으로 변경 변수는 '문자'와 '숫자', '$','_' 만 사용 가능 e.g) const MY_HOME = ',,,'; let _ =..

1. 들어가며 : rest, spread는 왜 필요한가? - '...'을 함수에 매개변수로 쓰면 rest, 객체나 배열에 쓰면 전개구문 spread - 코드를 줄일 수 있다. (하나하나 다쓰거나, 반복문 쓰지 않아도 됨) 2. 함수의 대량 인수를 처리하는 방법은 2가지 1) arguments (이제 안씀) 함수로 넘어온 모든 인수에 접근 과거에는 arguments만 쓸 수 있었음 (화살표 함수 못씀) es6 환경이면 rest 쓰자 2) 나머지 매개변수 (...rest) 함수에 사용 보통 매개변수가 1개면 인수 1개만 가져오는데 ... 붙이면 인수 다가져옴 또는 인수가 몇개이든 상관 없음 나머지 인수를 다 가져와 배열로 반환 rest 사용시 주의 점 ...은 마지막 매개변수에만 붙을 수 있음 e.g) fu..

1. 들어가며 - 서비스를 개발하다보면 동일하거나 비슷한 동작들이 생기기 마련이다. 이럴땐 하나의 동작 만들어 여러곳에서 재활용하는 것이 효율적이다. 중복되는 코드도 줄어들고 하나로 관리하니 유지 보수도 편해진다. e.g) figma에서 component처럼 함수는 이것을 가능하게 해준다. - 함수는 어떤 기능을 수행만하는 함수와 어떤 값을 리턴하는 함수가 있다 2. 함수 구조 - 매개변수는 없어도 되고 2개 이상인 경우, 쉼표(,)를 이용해서 작성 - 함수명( ), 함수명(name, age, location) - 함수 표현 방식에 따른 구조 //함수 구조 //함수 선언문 function sayHello(){ console.log("안녕하세요") } sayHello(); // 함수 표현식 const sa..