jejupeter

안녕하세요. ayo님.

좋은 질문 주셔서 감사합니다.

$(function() {
&nbsp; .....
&nbsp; .....
});

코드의 역할은&nbsp;
페이지내의 모든 html이 웹브라우저의 메모리에 로딩된 되어 DOM이 생성되었을때
해당 코드의 내용을 실행하라는 의미입니다.


예제로 주신 코드는 #btn1, #btn2, .box에 이벤트를 할당하는 코드인데요.
이것의 전제조건은 btn1, btn2, box가 이미 브라우저에 로딩되어있다는 전제를 하고 있어요.

$(function() {&nbsp;
});

코드를 주석처리하고 이벤트를 할당하는 코드만 실행한다면&nbsp;
btn1, btn2, box가 브라우저의 메모리에 로딩이 안된상태에서 만들어지지않은 DOM에 이벤트를 할당하려고 하기 때문에
제대로 이벤트가 할당이 안됩니다.

관련한 문서링크입니다.
https://learn.jquery.com/using-jquery-core/document-ready/
https://www.w3schools.com/jquery/event_ready.asp

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

<span style="color: #000a12; font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; background-color: #ffffff;">main-image-container 는 메인 이미지를 넣을 수 있는 틀로서 만든 DIV라서요.&nbsp;
<span style="color: #000a12; font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; background-color: #ffffff;">이미지가 표현될 어느정도의 공간을 만들기 위해서 최소 높이를 확보하기 위해 min-height를 500px로 지정했어요.
<span style="color: #000a12; font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; background-color: #ffffff;">혹시나 더 height 가 큰 이미지가 있으면 자연스럽게 늘어나겠죠?
<span style="color: #000a12; font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; background-color: #ffffff;">그런데 <span style="background-color: #ffffff; color: #000a12; font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px;">main-image-container img (메인이미지) 의 height를 500px로 고정해버렸으니 큰 의미는 없게 되었네요.
<span style="background-color: #ffffff; color: #000a12; font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px;">혹시라로 메인이미지의 height을 500px 이상으로 지정한다면 min-height로 설정한 것이 유용하겠네요.<span style="background-color: #ffffff; color: #000a12; font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px;">

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

$.each(배열데이터, 콜백함수)&nbsp; 함수는 배열데이터를 받아서 반복문을 실행해줍니다.
반복을 실행할때는 두번째 매개변수로 받은 콜백함수를 실행시켜줍니다.

두번째 매개변수로 받은 함수를 콜백함수라고 부릅니다.

콜백함수는 두개의 데이터를 받는데요.&nbsp;
첫번째는 인덱스입니다.
전체 배열데이터에서 콜백함수로 전달된 데이터의 인덱스번호입니다.

두번째는 배열데이터의 인덱스번째에 해당하는 데이터 입니다.

위 코드에서&nbsp; i 는 인덱스
field는 data 의 i 번째 데이터 입니다.


참고 설명 링크 입니다.
https://webclub.tistory.com/455

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

$("td").each(함수) 명령은 웹브라우저화면에서 td태그들을 찾아서 한개씩 가져와서 함수를 실행해주는 명령입니다.

each 안에서&nbsp; $(this) 는 반복문안에서 가져온 컨텐츠를 의미합니다.

<td>정적언어</td> 를 가져왔다고 한다면
$(this)는 <td>정적언어</td> 태그 를 의미합니다.

html() 명령은 가져온 태그의 내용을 의미합니다.

그래서&nbsp;
const original_content = $(this).html();
original_content 라는 변수를 만들고&nbsp;
그안에 $(this).html() 을 저장합니다.
$(this) 는 반복문안에서 가져온 내용. 즉 각 td 들을 의미합니다.
따라서 $(this) 는 <td>정적언어</td> 와 같은 td 태그 들이 되고요.
$(this).html() 은 그 태그 안의 내용을 의미합니다.
따라서&nbsp; $(this).html()&nbsp; 은 '정적언어' 가 되겠죠.

정리하자면
const original_content = $(this).html();
은&nbsp;
original_content&nbsp; 에 '정적언어' 라는 문자열을 저장하게 됩니다.

두번째
html("~~~~") 명령어는 선택된 태그의 내용을 변경하는 명령입니다.
$(this).html("aaa") 라고 실행한다면
각 태그의 내용은 aaa 로 바뀌어서 <td>aaa</td> 가 됩니다.

$(this).html("-" + original_content&nbsp; + "-");

의 의미는 $(this)의 내용을 "-" + original_content&nbsp; + "-" 로 변경한다는 것입니다.
$(this) 는 반복문안에서 선택된 태그 이고
original_content 는 이전에 저장된 '정적언어' 와 같은&nbsp; td 의 내용이니

최종적으로 td태그의 내용이&nbsp; -정적언어- 로 변경이 됩니다.

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

크롬으로 HTML파일을 열게되면 file:// 프로토콜로 로컬파일시스템에 접근해서 파일을 열게되는데요.
크롬의 경우에는 ajax를 통한(XMLHttpRequest 요청) 로컬파일시스템으로의 접근을 막고 있어요.
크롬은 ajax접속은 http:// 또는 https:// 로 접근할수 있는 웹서버로의 접근만 허용하고 있어요.
http://&nbsp; 로 접근 하려면 웹서버가 필요합니다.

이 웹서버를 간단히 만들어주는 아톰의 플러그인이 atom-live-server 인거죠.
atom-live-server를 이용하면 현재 작업폴더의 파일을 대상으로 웹서버를 실행시켜 줍니다.

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

안녕하세요. 유주현님!
강사 이범재입니다.
오타를 수정했더니 잘 되네요.
한번 확인해보세요.
<img src="https://cdn.inflearn.com/public/comments/59612e65-1dea-46a4-a948-5b09de6e1c11/스크린샷 2019-10-16 오전 11.42.59.png" title="스크린샷 2019-10-16 오전 11.42.59.png" width="1240" height="424" alt="" />
<img src="https://cdn.inflearn.com/public/comments/c4bb4fc7-ffff-4f4b-a131-740955379c41/스크린샷 2019-10-16 오전 11.51.54.png" title="스크린샷 2019-10-16 오전 11.51.54.png" width="348" height="462" alt="" />
<pre class="language-markup"><code><!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .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;
 }
 </style>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

 <script>
 $(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();
 });
 });
 </script>

</head>

<body>
 <div id="box1" class="item-container">
 <div class="item" id="item1">Java</div>
 <div class="item" id="item2">python</div>
 </div>

 <div>
 <button id="btn1">fade out</button>
 <button id="btn2">fadein</button>
 <button id="btn3">slideup</button>
 <button id="btn4">slidedown</button>
 <button id="btn5">slidetoggle</button>

 </div>
</body>

</html></code></pre>

jejupeter

Posts