Land of Joe

데이터바인딩 하기를 배웠다. 데이터바인딩 Data Binding : html에 데이터 꽂기 및 동기화 (client-side rendering, 반: server-side rendering) 위 모습을 만들기 위한 html은 다음과 같다 Card title 가격 : ?? 주문하기 Card title 가격 : ?? 주문하기 Card title 가격 : ?? 주문하기 다음의 자료를 데이터바인딩 하고자 한다. 위 products의 구조를 살펴보면 [ { }, { }, { } ] object자료형 { } 3개를 포함하고 있는 array자료형 [ ]임을 알 수 있다. array자료형 [ ]은 value만을 담고있는 반면, object자료형 { }은 key:value를 담고있다는 차이가 있다. 데이터바인딩을 할 각..

어제는 이벤트 버블링에 의해 모달창의 검은배경이 아닌 다른 어느 부분을 눌러도 모달창이 닫히는 문제를 해결하는 방법에 대해 공부하였다. for (let i=0; i < $('.tab-button').length; i++) { $('.tab-button').on('click',function(){ $('.tab-button').removeClass('orange') $('.tab-button').eq(i).addClass('show') $('.tab-content').removeClass('orange') $('.tab-content').eq(i).addClass('show') }) } [JavaScript] 이벤트버블링이벤트 버블링 : HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 모두 이벤트..

이벤트 버블링 : HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 모두 이벤트가 실행되는 현상 예시) 모달창의 검정배경(클래스명 black-bg)를 누르면 모달창이 닫히게 하고 싶다. 조건: 'show-modal' 클래스의 탈부착을 통해 모달창을 열고 닫음 html 로그인하세요 javascript document.querySelector('.black-bg').addEventListener('click',function(){ document.querySelector('.black-bg').classList.remove('show-modal') }); 이렇게 코드를 짤 경우, 검정배경 뿐만 아니라 화면의 그 어디를 눌러도 모달창은 닫히게 된다. 그 이유가 바로 '이벤트 버블링' 때문이다!!! 위 ..

html Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping css ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc; } ul.list::after { content: ''; display: block; clear: both; } .tab-button { display: block; padding: 10px 20px 10px 20px; float: left; margin-right: -1px; margin-bottom: -1px; color: grey; text-decoration: none; cur..

window.addEventListener('scroll', function(){동작}); window: 현재 html 페이지를 의미함 (document와 비슷하지만 스크롤 이벤트를 감지하고 싶을 때엔 관습적으로 window 사용, window>document) 스크롤 관련 동작으로는 window.scrollY : 위에서부터 얼마나 스크롤했는지 알려줌 (px단위) window.scrollX : 왼쪽에서부터 얼마나 스크롤했는지 알려줌 jQuery 버전: $(window).scrollTop() window.scrollTo(x,y) : 강제로 스크롤바를 움직여서 그 위치에 고정됨 jQuery 버전: $(window).scrollTop(숫자) window.scrollBy(x,y) : 현재 위치에서부터 스크롤 해..

개강일이라 정신 없던 하루~ 내일은 아침 5시에 일어나 인스부르크로 1박 2일 여행을 떠난다. 아직 짐도 못 쌌지만 조금이라도 공부하기! 오늘 배운 것 1. 함수 return 의 기능 - 반환(퉤 뱉어버리기) - 함수 종료 (function 내 return 뒤에 오는 명령은 작동하지 않는다) 2. 소수점 관련 반올림: .toFixed(숫자) //몇 째자리까지 ㄴ문자로 변경됨 주의!! ㄴ다시 숫자로 변환: parseFloat(문자열), parseInt(문자열) Q1. 함수에 분과 초를 차례로 파라미터로 입력하면 ms단위로 바꿔서 뱉어주는 함수 만들기 (1초 == 1000ms) Q2. 가격을 파라미터로 입력하면 10% 할인가를 뱉는 함수 만들기 (조건: 첫 구매여부도 true/false로 둘째 파라미터에 입..

1. setTimeout, setInterval 5초 이내 구매시 사은품 증정! 2. 정규식 만들기 /\S+@\S+\.\S+/.test(aaa@bbb.ccc) == true; 3. Carousel 캐러셀 만들기 ◀️ 1 2 3 ▶️ 사진 세 개를 가로로 나열하고 그에 따른 버튼 세 개도 만든다 .slide-container { width:300vw; transition: all 1s; } .slide-box { width:100vw; float:left; } .slide-box img { width:100% } 각 이미지를 감싸는 div인 .slide-box는 100vw, 전체 이미지를 감싸는 div인 .slide-container는 300vw로 설정함으로써 하나의 이미지가 보여지는 영역 전부를 차지하도..

Hello World:) 네이버 블로그에 글을 쓴 지도 벌써 4년째인데 낯선 곳에서 새로운 시작을 하려니 왜이렇게 어색하고 어려운지 모르겠다. 나는 본래 글 쓰는 것을 좋아하지만 감정을 뺀 객관적인 진술보단 아주 사소하고 개인적인 이야기가 위주였기에 그런 것 같다. 이 공간은 개발자로서의 나, 느리더라도 꾸준한 성장을 기록하기 위한 공간이다. 프론트엔드 개발자를 목표로 공부하고 있다. 이러한 목표를 갖기까지 참 멀리도 돌아왔다. 경영학을 전공하다가 VR/AR 산업에 관심이 생겨 소프트웨어를 공부하고 싶다는 생각에 소프트웨어융합공학 연계전공을 시작했다. 연계전공을 시작한 첫 학기엔 컴퓨터네트워크, 둘째 학기엔 파이썬 기초와 자료구조론을 동시에, 셋째 학기엔 데이터베이스와 알고리즘을 수강하였다. 넷째 학기엔..