Land of Joe

함수명 작명은 구체적으로. 영문작명시 camelCase 방법을 따르는 것이 관습임. - 소문자로 시작 - 여러 단어를 합친 이름일 경우 띄어쓰기X 언더바(_)X - 단어의 첫 알파벳만 대문자 사용 - (ex) openModal, closeModal function openModal(){ document.getElementById('alert').style.display='block'; } function closeModal(){ document.getElementById('alert').style.display='none'; } parameter 파라미터 문법 function modal(구멍){ document.getElementById('alert').style.display=구멍; } modal('b..

1. HTML, CSS로 디자인을 모두 한다 (숨기는 것까지 포함) 2. JS로 필요할 때 보여달라고 코드 짠다

문자 중간에 변수를 넣고자 한다. 'Where is cat?' 의 사이에 'my'를 삽입하고자 한다 var a = 'my'; console.log('Where is ' + a + ' cat?'); // Where is my cat? 출력됨 위의 예시처럼 변수가 들어갈 자리 양옆으로 문자열을 나누고 + 덧셈기호를 통해 연결하면 된다. 하지만 덧셈기호가 너무 많아 지저분해 보인다. 이를 막기 위해 백틱 기호를 이용해 문자 중간에 변수를 삽입하는 방법이 있다. var a = 'my'; console.log(`Where is ${a} cat?`); // Where is my cat? 출력됨 백틱(``) 안에 ${ 변수명 } 을 넣어주는 것이다 백틱(``)을 이용하면 1. 문자 중간 enter키가 가능하다 2. ..

자바스크립트에서 문자 중간에 변수를 넣을 때 백틱기호(`)를 이용하는 방법이 있다. [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..