전체 글143 2023-10-18 본 캠프 10일차 / 29일차 TIL (carousel 제작) 2023-10-18 본 캠프 10일차 / 29일차 TIL 내일배움캠프 : 개인과제 발제 - 영화 정보 사이트 어제부로 자바스크립트 종합반 강의를 완강 하였으며, 금일부터는 개인과제가 주어졌다. 과제를 하면서 사용한 주요 기능과 오류 위주로 TIL을 작성하려고 한다. 사용한 주요 기능 캐러쉘 (carousel) 최초에는 캐러쉘 API인 Swiper API를 사용하려고 하였지만, 원하는 데이터 처리를 하는데 어려움을 겪어서 직접 만들기로 하였다. 기본 캐러쉘 구조는 다음과 같다. Item1 Item2 Item3 크게 아이템과 버튼 영역으로 나뉜다. 각 아이템은 부모 div의 display:flex 속성으로 가로로 한줄 처리가 된다. 또한 부모 div에서는 position:relative 속성으로 현재 위치를.. 2023. 10. 20. 2023-10-17 본 캠프 9일차 / 28일차 TIL 2023-10-17 본 캠프 9일차 / 28일차 TIL 내일배움캠프 : JavaScript 문법 종합반 5주차 1. DOM (Document Object Model) 1-1. 자바스크립트가 생긴이유 현재는 활용 범위가 높아졌지만 본래는 브라우저에서 사용하기 위한 언어 웹페이지를 동적으로 만들기 위한 언어 HTML과 CSS는 구조화를 위한 것으로, 동적인 부분과는 거리가 멀다. 1-2. 웹페이지가 뜨는 과정 클라이언트가 서버에게 요청 (request) 서버로부터 응답을 받음 (response) 이 응답의 형태는 html 문서 형태 브라우저가 HTML 문서를 해석 (parsing) 브라우저에는 기본적으로 렌더링 엔진이 있다. 랜더링이라는 것은 서버에서 받아온 html 문서를 해석 한다는 것이다. 해석이 필요.. 2023. 10. 17. 2023-10-16 본 캠프 8일차 / 27일차 TIL 2023-10-13 본 캠프 8일차 / 27일차 TIL 내일배움캠프 : JavaScript 문법 종합반 4주차 1. 콜백함수 의미 : 다른 코드의 인자로 넘겨주는 함수. 인자로 넘겨준다는 말은 인자를 받는 주체가 있다는 말과 동일. 예시 : forEach(콜백함수), setTimeout(콜백함수, 시간) 1-1. 콜백함수를 인자로 받는 주체는 두가지 제어권을 갖는다. 호출 시점에 대한 제어권// setInterval() : 반복해서 매개변수를 매개변수로 받은 콜백함수의 로직을 수행 var count = 0; var cbFunc = function(){ console.log(count++); if (count>4) clearInterval(timer); } cbFunc(); // 제어권은 개발자에게 있다... 2023. 10. 17. 2023-10-14~15 주말 TIL 2023-10-14~15 주말 TIL 내일배움캠프 : JavaScript 문법 종합반 3주차 3주차 10강 : this 바인딩 this는 실행컨텍스트의 구성 중 하나로 실행컨텍스트가 생성될 때 생성된다. 전역 환경에서의 this 1. 노드 환경 => global객체 2. 브라우저 환경 => window 객체 함수 vs 메서드 함수 : 스스로 실행(수행)이 가능 / 함수명(); 메서드 : 실행의 주체(객체)가 있어야 실행(수행) 가능 / Object.메서드명(); 함수의 this 함수의 this는 전역객체를 가리킨다. 호출의 주체가 없기 때문이다. 함수로서 독립적으로 호출할 때는 this는 항상 전역객체를 가리킨다 메서드의 this 메서드의 this는 호출 주체(객체)를 가리킨다. 3주차 11강 : thi.. 2023. 10. 16. 2023-10-13 본 캠프 7일차 / 26일차 TIL 2023-10-13 본 캠프 7일차 / 26일차 TIL 유데미 강의 : CSS 완벽가이드 (Flex, Grid & Sass) / 섹션 8: 크기 & 단위 * 학습시간 07:30 ~ 09:30 (2시간) 학습내용 : 1. em & rem - em, rem은 font-size에 국한되어 사용되진 않지만, 그 기준은 font-size에 있다. - 브라우저의 폰트 크기 설정에 따라서 크기가 유동적으로 변경됨. * 크롬 기준 Small, Middle, Large - em은 이전 부모의 크기를 상속 * 누적이 되어 상속되는 점을 고려해야함. * 누적이 되는 문제는 rem으로 해결가능 * em은 자식 요소에만 사용하는 것을 권장. (누적사용 x) - rem은 root em으로 가장 상위의 html요소의 font-si.. 2023. 10. 14. 2023-10-12 본 캠프 6일차 / 25일차 TIL 2023-10-12 본 캠프 6일차 / 25일차 TIL 유데미 강의 : CSS완벽 가이드 (Flexbox, Grid & Sass 포함) / 섹션 8 : 크기 & 단위 학습내용 : 1. 크기 단위 * Absolute Lengths (절대 크기) px : 픽셀 * Viewport Lengths (viewport 크기에 따른 상대적크기) vh : viewport height vw : viewport width vmin vmax * Font-Relative Lengths (글씨 크기에 비려한 크기) rem : root em em : em * Special Case (특수한 단위) % : percent - position:fixed 일 경우 컨테이너 블록은 viewport - position :absoulte 일.. 2023. 10. 12. 이전 1 ··· 10 11 12 13 14 15 16 ··· 24 다음
