type 3-2

안녕하세요 :)배열과 객체에 대한 설명은 수업 배열 사용하기 (3-10) 객체 사용하기 (3-11) 에서 설명되고 있습니다. 참고하시면 될거 같아요 :)

배열, 객체 자료형의 관계

안녕하세요 :)먼저 객체 자료형은 배열의 한 인덱스가 아닙니다 ㅠㅠ 먼저 배열은 여러 값을 관리해주는 또 다른 값이라고 생각하시면 편하실 것 같습니다. 예를 들어 두 학생의 평균 점수를 관리한다고 해보겠습니다. 각 값은 studentAAverage와 studentBAverage에 담겠습니다. var studentAAverage = 88; var studentBAverageb = 93; 그런데 실수로 모든 학생의 평균값이 10점씩 높게 계산됐다고 해보겠습니다. 그래서 올바른 값으로 수정하기 위해선 다음과 같이 해야합니다. studentAAverage = studentAAverage - 10; studentBAverage = studentBAverage - 10; 지금은 크게 문제가 없는 것 같지만 학생 수가 20명, 30명 늘어나면 상당히 힘든 작업이 됩니다. 이 과정을 편하게 해주는 게 배열이라고 할 수 있습니다. 예를 들어 다음과 같이 숫자들을 관리할 수 있습니다. var studentsAverages = [88, 93]; 그리고 값을 더하는 작업은 for 문을 이용해 순회를 돕니다. for (let i = 0; i studentsAverages[i] = studentsAverages[i] - 10;} 이 방법은 위 방법대비 더 어려운 것 같지만 학생 수가 많아지면 아주 편리한 방법이 됩니다. 하지만 이렇게만 관리해서는 평균이 88점인 학생이 누구인지 알 수 없게 됩니다. 이럴 때 객체를 함께 사용하면 편리할 것 같습니다. 그 방법을 설명하기 전에 객체에 대해 다시 한 번 알아보겠습니다. 배열은 위에서 보시듯 데이터를 모아놓고 인덱스로 관리합니다. 즉, studentsAverages[0]과 같이 0번째 혹은 1번째 값에 접근하게 됩니다. 이와 다르게 객체는 key 값을 통해 값에 접근하게 됩니다. 예를 들어 알려주신 객체를 해석해보자면 var objects = { studentName: "kevin", id: 20201000 } 는 "kevin"과 20201000이라는 값(value)에 배열처럼 objects[0] 또는 objects[1]이라고 접근하는게 아니라 객체를 정의할 때 설정한 키(key)값을 통해 다음과 같이 접근합니다. objects.studentName 또는 objects['studentName'] 지금까지 예시들을 보시면 아시겠지만 배열은 주로 같은 성격의 데이터를 나열하여 관리할 때 주로 사용되고 객체는 성격이 서로 다른 데이터를 함께 관리하기 위해 사용됩니다. 위에 예시를 다시 설명드리면 studentsAverages는 평균 점수라는 같은 성격의 데이터를 나열하여 관리합니다. 하지만 평균이 88점인 학생이 누구인지 알 수 없는 문제가 있었죠. 그렇다면 평균 점수라는 성격의 데이터가 아닌 학생과 평균 점수라는 데이터를 나열하면 좋을 것 같습니다. 따라서 다음과 같이 데이터를 객체를 통해 정의를 합니다. var studentsAverages = [ { name: 'kevin', averageScore: 88 }, { name: 'james', averageScore: 93 }, ]; 종합해보자면 물어보신 것 처럼 { name: 'kevin', averageScore: 88 } 의 각 두 문장 (name: 'kevin'과 'averageScore: 88)은 인덱스 [0]이 아닙니다. 배열이 아니기 때문이죠. 만약 인덱스 [0]이라면 var obj = { name: 'kevin', averageScore: 88 }; console.log(obj[0]) 로 확인했을 때 값이 나와야하는데 undefined가 출력됩니다. 그리고 배열안에 있는 객체에 접근하기 위해선 인덱스와 키가 함께 사용됩니다. studentsAverages[0].name // kevin studentsAverages[0].averageScore // 88 studentsAverages[1].name // james studentsAverages[1].averageScore // 93

mac에서는 작동하지않습니다..(회원가입 폼 검증-1)

안녕하세요 :) 1. window.addEventListener('load', listener)는 OS나 브라우저와 상관없이 동작하는 함수입니다. 동작하지 않는다면 아마 다른 이유로 동작하지 않을 가능성이 큽니다. 다음을 참고해주세요. load 이벤트 문서 2. 구글 로고와 관련해서 알려주신 문제는 같은 질문에 대한 답변이 있어 붙여드리겠습니다 :) 강의에서는 img#hplogo 라고 적혀있어서 document.getElementById('hplogo') 와 같은 방법으로 가져올 수 있었습니다. 알려주신 정보는 img.InXdpd라고 되어있고 제 맥 pc에서 크롬으로 확인했을 땐 div#logo-default.show-logo로 보이네요. 먼저 적혀있는 문자열은 선택자라고 불리는 문자입니다. 선택자는 다음과 같이 사용됩니다. div -> 아무 특수문자 없이 요소이름 (body, div, img, span 등)으로만 적혀있다면 현제 페이지의 모든 div 요소를 선택합니다. #foo -> 앞에 # 를 붙이고 뒤에 문자를 붙이면 id="foo" 속성을 가진 요소를 선택합니다. (예, ) .bar -> 앞에 . 을 붙이고 뒤에 문자를 붙이면 class="bar" 속성을 가진 모든 요소를 선택합니다. (예, ) 위 선택자들은 조합하여 사용할 수 있습니다. 예를 들어 img#foo는 img 요소 중 id="foo" 라는 속성을 가진 요소를 의미합니다. (예, (사진)) 또한 span.bar는 span 요소 중 class="bar" 라는 속성을 가진 요소를 의미합니다. (예, ) 마지막으로 p.bar.abc는 p 요소 중 class="bar abc" 라는 속성을 가진 요소를 의미합니다. 여기에서 bar와 abc의 순서는 중요하지 않습니다. 즉, p.bar.abc는 , , 그리고 과 같은 요소를 모두 의미합니다. 선택자가 다르면 자바스크립트를 통해 요소를 가져오는 방법도 다릅니다. 위에있는 예시를 그대로 적용해 방법을 나누면 다음과 같습니다. div -> 태그 이름으로 선택하고자 하면 document.getElementsByTagName 을 사용합니다. #foo -> id 속성 값으로 선택하고자 하면 document.getElementById를 사용합니다. .bar -> class 속성 값으로 선택하고자 하면 document.getElementsByClassName을 사용합니다. 단, id는 하나의 요소에만 적용하기 때문에 결과가 없다면 null을 반환하고 있다면 찾은 요소를 반환합니다. 그리고 class와 tag는 여러 요소가 있을 수 있기 때문에 요소를 찾았는지 여부와 상관없이 요소 배열을 반환합니다. 단, 없다면 비어있습니다. 따라서 말씀하신 img.InXdpd라고 적힌 선택자는 다음과 같이 가져오면 됩니다. document.getElementsByClass('InXdpd') 이 함수의 의미는 "InXdpd라는 class 속성값을 가진 모든 요소를 가져와줘"라는 의미입니다. id 속성과 다르게 class는 많은 요소에 적용할 수 있기 때문에 결과값은 요소 배열입니다. 따라서 첫 번째 요소를 가져오고 싶다면 document.getElementsByClass('InXdpd')[0] 와 같이 사용하시면 됩니다. 단, 하나도 없을 수도 있으니 배열의 길이를 확인해보거나 결과 값이 undefined인지 확인해보는 것도 중요합니다. 또한 위 세가지 방법 외에 모든 선택자에 사용할 수 있는 함수가 있습니다. document.querySelector document.querySelectorAll 자세한 내용은 문서를 참고해보시면 좋을 것 같습니다 :)

14분47초 구글로고 관련하여 질문드립니다.

안녕하세요 :)강의에서는 img#hplogo 라고 적혀있어서 document.getElementById('hplogo') 와 같은 방법으로 가져올 수 있었습니다. 알려주신 정보는 img.InXdpd라고 되어있고 제 맥 pc에서 크롬으로 확인했을 땐 div#logo-default.show-logo로 보이네요. 먼저 적혀있는 문자열은 선택자라고 불리는 문자입니다. 선택자는 다음과 같이 사용됩니다. div -> 아무 특수문자 없이 요소이름 (body, div, img, span 등)으로만 적혀있다면 현제 페이지의 모든 div 요소를 선택합니다. #foo -> 앞에 # 를 붙이고 뒤에 문자를 붙이면 id="foo" 속성을 가진 요소를 선택합니다. (예, ) .bar -> 앞에 . 을 붙이고 뒤에 문자를 붙이면 class="bar" 속성을 가진 모든 요소를 선택합니다. (예, ) 위 선택자들은 조합하여 사용할 수 있습니다. 예를 들어 img#foo는 img 요소 중 id="foo" 라는 속성을 가진 요소를 의미합니다. (예, (사진)) 또한 span.bar는 span 요소 중 class="bar" 라는 속성을 가진 요소를 의미합니다. (예, ) 마지막으로 p.bar.abc는 p 요소 중 class="bar abc" 라는 속성을 가진 요소를 의미합니다. 여기에서 bar와 abc의 순서는 중요하지 않습니다. 즉, p.bar.abc는 , , 그리고 과 같은 요소를 모두 의미합니다. 선택자가 다르면 자바스크립트를 통해 요소를 가져오는 방법도 다릅니다. 위에있는 예시를 그대로 적용해 방법을 나누면 다음과 같습니다. div -> 태그 이름으로 선택하고자 하면 document.getElementsByTagName 을 사용합니다. #foo -> id 속성 값으로 선택하고자 하면 document.getElementById를 사용합니다. .bar -> class 속성 값으로 선택하고자 하면 document.getElementsByClassName을 사용합니다. 단, id는 하나의 요소에만 적용하기 때문에 결과가 없다면 null을 반환하고 있다면 찾은 요소를 반환합니다. 그리고 class와 tag는 여러 요소가 있을 수 있기 때문에 요소를 찾았는지 여부와 상관없이 요소 배열을 반환합니다. 단, 없다면 비어있습니다. 따라서 말씀하신 img.InXdpd라고 적힌 선택자는 다음과 같이 가져오면 됩니다. document.getElementsByClass('InXdpd') 이 함수의 의미는 "InXdpd라는 class 속성값을 가진 모든 요소를 가져와줘"라는 의미입니다. id 속성과 다르게 class는 많은 요소에 적용할 수 있기 때문에 결과값은 요소 배열입니다. 따라서 첫 번째 요소를 가져오고 싶다면 document.getElementsByClass('InXdpd')[0] 와 같이 사용하시면 됩니다. 단, 하나도 없을 수도 있으니 배열의 길이를 확인해보거나 결과 값이 undefined인지 확인해보는 것도 중요합니다. 또한 위 세가지 방법 외에 모든 선택자에 사용할 수 있는 함수가 있습니다. document.querySelector document.querySelectorAll 자세한 내용은 문서를 참고해보시면 좋을 것 같습니다 :)

이미지 정렬방식

안녕하세요 !먼저 flex를 지정하셔도 문제는 없지만 적용하는 위지가 달라질 수 있습니다. 먼저 flex를 사용하신다면 css코드는 다음과 같이 작성해야할 것 같습니다. .row { display: flex; } 대신 cell 클래스에 있는 display: inline-block 스타일은 제거해주시면 됩니다. display: inline-block; 이 스타일은 같은 수준에 있는 요소들 사이에서 해당 요소의 레이아웃을 설정합니다. 예를 들어서 와 같이 코드가 있을 때 inline-block이 적용된 두 div 요소는 같은 수준에 있고 서로 한 행에(inline) 위치하게 됩니다. 단, inline이기만 하면 크기나 여백을 설정하는 데 한계가 있기 때문에 inline-block으로 설정해줍니다. display: flex; 이 스타일은 주로 내부에 있는 요소들의 위치를 배치(layout)할 때 사용합니다. 예를 들어서 와 같이 코드가 있을 때 flex가 적용된 div 요소의 자식 요소인 두 div는 가로 정렬이 됩니다. 이유는 다음과 같이 기본 정렬 값이 row이기 때문입니다. flex-direction: row; display: flex; 스타일은 자식 요소들을 배치하는 여러가지 방법을 제공합니다. 이 방법들은 다음 문서를 참고해주세요 :) flexbox의 기본 개념 도움이 되셨으면 좋겠습니다 :)