38강 jQuery이벤트1 을 듣고 있습니다.

안녕하세요. ayo님. 좋은 질문 주셔서 감사합니다. $(function() { ..... ..... }); 코드의 역할은 페이지내의 모든 html이 웹브라우저의 메모리에 로딩된 되어 DOM이 생성되었을때 해당 코드의 내용을 실행하라는 의미입니다. 예제로 주신 코드는 #btn1, #btn2, .box에 이벤트를 할당하는 코드인데요. 이것의 전제조건은 btn1, btn2, box가 이미 브라우저에 로딩되어있다는 전제를 하고 있어요. $(function() { }); 코드를 주석처리하고 이벤트를 할당하는 코드만 실행한다면 btn1, btn2, box가 브라우저의 메모리에 로딩이 안된상태에서 만들어지지않은 DOM에 이벤트를 할당하려고 하기 때문에 제대로 이벤트가 할당이 안됩니다. 관련한 문서링크입니다. https://learn.jquery.com/using-jquery-core/document-ready/ https://www.w3schools.com/jquery/event_ready.asp

main-image-container의 css에 관해 질문합니다.

main-image-container 는 메인 이미지를 넣을 수 있는 틀로서 만든 DIV라서요. 이미지가 표현될 어느정도의 공간을 만들기 위해서 최소 높이를 확보하기 위해 min-height를 500px로 지정했어요. 혹시나 더 height 가 큰 이미지가 있으면 자연스럽게 늘어나겠죠? 그런데 main-image-container img (메인이미지) 의 height를 500px로 고정해버렸으니 큰 의미는 없게 되었네요. 혹시라로 메인이미지의 height을 500px 이상으로 지정한다면 min-height로 설정한 것이 유용하겠네요.

each반복문 활용한 부분에서 질문 있습니다.

$.each(배열데이터, 콜백함수) 함수는 배열데이터를 받아서 반복문을 실행해줍니다. 반복을 실행할때는 두번째 매개변수로 받은 콜백함수를 실행시켜줍니다. 두번째 매개변수로 받은 함수를 콜백함수라고 부릅니다. 콜백함수는 두개의 데이터를 받는데요. 첫번째는 인덱스입니다. 전체 배열데이터에서 콜백함수로 전달된 데이터의 인덱스번호입니다. 두번째는 배열데이터의 인덱스번째에 해당하는 데이터 입니다. 위 코드에서 i 는 인덱스 field는 data 의 i 번째 데이터 입니다. 참고 설명 링크 입니다. https://webclub.tistory.com/455

반복문 each에서 잘 모르겠는 줄 질문합니다

$("td").each(함수) 명령은 웹브라우저화면에서 td태그들을 찾아서 한개씩 가져와서 함수를 실행해주는 명령입니다. each 안에서 $(this) 는 반복문안에서 가져온 컨텐츠를 의미합니다. 정적언어 를 가져왔다고 한다면 $(this)는 정적언어 태그 를 의미합니다. html() 명령은 가져온 태그의 내용을 의미합니다. 그래서 const original_content = $(this).html(); original_content 라는 변수를 만들고 그안에 $(this).html() 을 저장합니다. $(this) 는 반복문안에서 가져온 내용. 즉 각 td 들을 의미합니다. 따라서 $(this) 는 정적언어 와 같은 td 태그 들이 되고요. $(this).html() 은 그 태그 안의 내용을 의미합니다. 따라서 $(this).html() 은 '정적언어' 가 되겠죠. 정리하자면 const original_content = $(this).html(); 은 original_content 에 '정적언어' 라는 문자열을 저장하게 됩니다. 두번째 html("~~~~") 명령어는 선택된 태그의 내용을 변경하는 명령입니다. $(this).html("aaa") 라고 실행한다면 각 태그의 내용은 aaa 로 바뀌어서 aaa 가 됩니다. $(this).html("-" + original_content + "-"); 의 의미는 $(this)의 내용을 "-" + original_content + "-" 로 변경한다는 것입니다. $(this) 는 반복문안에서 선택된 태그 이고 original_content 는 이전에 저장된 '정적언어' 와 같은 td 의 내용이니 최종적으로 td태그의 내용이 -정적언어- 로 변경이 됩니다.

atom-live-server에 대해 궁금합니다.

크롬으로 HTML파일을 열게되면 file:// 프로토콜로 로컬파일시스템에 접근해서 파일을 열게되는데요. 크롬의 경우에는 ajax를 통한(XMLHttpRequest 요청) 로컬파일시스템으로의 접근을 막고 있어요. 크롬은 ajax접속은 http:// 또는 https:// 로 접근할수 있는 웹서버로의 접근만 허용하고 있어요. http:// 로 접근 하려면 웹서버가 필요합니다. 이 웹서버를 간단히 만들어주는 아톰의 플러그인이 atom-live-server 인거죠. atom-live-server를 이용하면 현재 작업폴더의 파일을 대상으로 웹서버를 실행시켜 줍니다.

강의랑 똑같이 쳤는데 item, btn들은 잘 나오는데, 클릭해도 애니메이션 효과가 적용되지 않습니다..ㅠㅠ 왜일까요....

안녕하세요. 유주현님! 강사 이범재입니다. 오타를 수정했더니 잘 되네요. 한번 확인해보세요. (사진) (사진) Document .item-container { margin: 20px; padding: 20px; display: flex; } .item-container .item { width: 100px; height: 100px; margin: 20px; padding: 20px; border: 1px solid black; } #item1 { background-color: #fbffb9; } #item2 { background-color: #ec7357; } $(function () { $("#btn1").on("click", function () { $("#item1").fadeOut(); }); $("#btn2").on("click", function () { $("#item1").fadeIn(); }); $("#btn3").on("click", function () { $("#item2").slideUp(); }); $("#btn4").on("click", function () { $("#item2").slideDown(); }); $("#btn5").on("click", function () { $("#item2").slideToggle(); }); }); Java python fade out fadein slideup slidedown slidetoggle