목록분류 전체보기 (90)
Land of Joe
자바스크립트에서 문자 중간에 변수를 넣을 때 백틱기호(`)를 이용하는 방법이 있다. [JavaScript] 문자 중간에 변수 넣기(백틱) 문자 중간에 변수를 넣고자 한다. 'Where is cat?' 의 사이에 'my'를 삽입하고자 한다 var a = 'my'; console.log('Where is ' + a + ' cat?'); // Where is my cat? 출력됨 위의 예시처럼 변수가 들어갈 자리 양옆으로 문자 joeindeu22.tistory.com 이는 작은따옴표(')와는 다른 것으로, 서로 구분해야 한다! 윈도우에선 숫자키 (1) 옆에 물결키(~)에 함께 있는 반면 맥북에선 전혀 찾아볼 수 없다.. 맥북 키보드에선 (~)와 (₩)가 함께 있으며 이를 shift키와 함께 누르면 (~)가 입..
데이터바인딩 하기를 배웠다. 데이터바인딩 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로 설정함으로써 하나의 이미지가 보여지는 영역 전부를 차지하도..