생활코딩

Coding Everybody

코스 전체목록

닫기

배열과 반복문의 활용

소스코드

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. eventme
    완료
  2. hyegineer
    완료!!
    queryselectorAll로 갖고오면 노드리스트 갖고오지만 배열과 비슷함 ㅎㅎㅎ
    재밌군...
    검색지향 프로그래밍이 인상깊었습니당
  3. Hyeon-Jun Ha
    완료
  4. 코돌이
    5/12 완료!
  5. 주워니
    완료!
  6. 이리스
    아래에 친절하게 설명해주신 분이 계신데요,
    조금 더 안내드리자면, F12를 누르셔서 console창에서
    document.querySelector('a') 를 입력해보시면 가장 위에있는 WEB를 표시해줄겁니다.
    결국 document.querySelector('a') 값만 본다면 가장 위에있는 WEB을 둘러싼 a태그만을 지정해주는 것이죠.
    반복문을 빼고 document.querySelector('a').style.color = 'powderblue'; 값을 넣어보면 WEB만 powderblue로 변하는 것을 볼 수 있습니다.

    그러면 이번에는 콘솔창에서 document.querySelector('body')를 입력해봅시다. 그럼 아마 모든 body태그 안의 모든 속성들이 잡혀있을겁니다. 그렇기에 document.querySelector('body').style.color = 'white'; 을 출력하면 body안의 모든 폰트색이 흰색으로 변하게 되는겁니다.

    추가로 document.querySelector('ol').style.color='powderblue' 을 하게되면 ol 태그안의 1,2,3번의 색상이 변경될겁니다. 고로 querySelector 함수가 지정해주는 위치의 차이인 것이죠.

    그렇다면 All을 붙이는 document.querySelectorAll('a').style.color = 'powderblue'; 은 왜 안되는지 콘솔창에
    document.querySelectorAll('a').style.color 을 입력해보시면 아실겁니다. 모든 태그들을 잡아주는 것이 아니라, 해당 태그들을 배열형태로 반환해주기 때문이죠. 고로 우리는 이 배열을 풀어서 적용시켜주어야하기에 반복문을 사용하는겁니다.
    대화보기
    • 윤혜인
      저도 같은 내용이 궁금하네요!
      대화보기
      • 위준우
        완료
      • 허공
        190509 감사합니다.
      • 최승윤
        완료!
      • 김한주
        완료
      • 끝가지간다
        완료~
      • Gimme_Gsuit
        querySelectorAll('a')은 html의 a태그를 js의 배열형태로 값을 가져옵니다. 그렇기 떄문에 js에서 가져온 배열형태의 a태그를 사용하려면 반복문을 주어서 []모든 배열에 속성을 적용해준다고 보면 될겁니다. ㅎㅎㅎ
        대화보기
        • Gimme_Gsuit
          js기준으로 학습하는 과정이기 떄문이지 않을까요?ㅎㅎ js로 html과 css를 활용할 수 있는? ㅎㅎ
          대화보기
          • 저도 이거 궁금했어요
            대화보기
            • 1억이란 숫자를 너무 좋아하는 스승님.....
            • 궁금한게 있는데 haed 부분에서 a 태그에 대한 css style 설정을 바꿔주지 않고 일일이 querySelectorAll()을 통해서 style을 지정해주는 이유가 무엇인가요??
            • 완료!
            • meanyMina
              저도 초보입니다만,,, document.querySelectorAll('a')는 4개의 a tag를 나열하고 있는 배열이라서 반복문을 사용해야 합니다. 전체 배열에 "powderblue"값을 지정하는 것이 아닌, 하나 하나의 a tag를 불러와서 색을 지정해야해서 그런 것 같아요. :)
              대화보기
              • 2019-02-19 완료
              • 우도순
                완료
              • 발헤
                감사합니다.완료
              • 호두
                감사합니다.
                제어문, 반복문의 개념은 알고있지만
                html에서 적용하는 방법에 대해 잘 몰랐는데

                강의를 보고 쉽게 이해할 수 있었습니다.
              • Juyeon Heo
                저도 같은 내용이 궁금했는데, 덕분에 해결됐습니다. 감사합니다 서주부님 :)
                대화보기
                • whynitz
                  감사합니다! 궁금한게 있는데

                  document.querySelector('a').style.color = 'powderblue';

                  이걸 추가하면 night 모드에서 자동으로 a tag 텍스트가 파우더블루로 바뀌지 않을까 했는데 안되네요.

                  document.querySelector('body').style.color = 'white';

                  이건 되고 a tag 는 안되는 이유가 뭔가요?
                • 지미츄
                  완료 감사합니다 ~!
                • 이수하
                  완료
                • gravity251
                  완료
                • Aimhee
                  완료
                • 한강
                  파우더 블루 색상이 이쁘네요. 감사합니다. ^^!
                • 돼지천재
                  감사합니다.
                • Pakupaku
                  겨우 다 실습을 해봤습니다;; 천천히 차근차근 생각하지 않으면 어지러워서 내가 지금 어디에 있는지 놓쳐버리네요. 그리고 세가지의 언어들이 뭉쳐서 ””요거와 ’’ 요거 구분하는거랑 자바의 대소문자 구분이 정말정말 어렵습니다; 익숙해지는건 끈기있게 하지 않으면 안되는군요;
                • 김상근
                  for loop version

                  for(i=0; i<alist.length; i++){
                  alist[i].style.color='powderblue';
                  }
                • Jung Ik
                  좋은 강의 고마워요 이고잉 님 ~
                • asdqwer123
                  감사합니다.
                • raiN.Shower
                  7:10쯤 console창에
                  var alist=document.querySelectorAll('a');
                  var i=0;
                  while(i<alist.length){
                  console.log(alist[i]);
                  alist[i].style.color='powderblue';
                  i=i+1;
                  }
                  말고
                  var alist=document.querySelectorAll('a');
                  var i=0;
                  while(i<alist.length){
                  alist[i].style.color='powderblue';
                  i=i+1;
                  }
                  넣어도 상관없지요?

                  아 조금뒤에 필요없다고 언급하고 지우셨네요 ^^;;확인했습니다~~
                • 풀등
                  평소에 문서로만 공부해서 개념이 확실하지 않았는데, egoing 선생님의 강의를 들으니 어려워서 싫어진 부분들이 쉽고, 가깝고, 힘있게 다가옵니다. 감사합니다.^^
                • 서주부
                  querySelectorAll ('a') 로 나오는 결과는 a 들의 리스트이기 때문이래요.. 그니까 옷(a)들이 들어있는 서랍(a 들의 리스트) 에 색깔을 입힌다고 옷들의 색깔이 변하는게 아닌것처럼요~~ 그래서 하나 하나 꺼내서 색을 바꿔줘야하는데 이때 하나 하나 다 쓸수 없으니까 반복문을 쓰고요
                  대화보기
                  • Tae Ha Ahn
                    ctrl + L 로 바뀐것 같아요~ 한번에 지우기~
                    대화보기
                    • NGiveup
                      너무 잘 듣고 있습니다. 감사합니다!!
                    • a태그에 꼭 반복문만 사용해야 하는건가요?

                      반복문을 사용하지 않고

                      if값
                      this.value = 'day'; 밑에

                      document.querySelectorAll('a').style.color='powderblue'; 를 넣는건 왜 안되는 건가요?
                    • 짜잔! 하실때마다 뭔가 기대가 잔뜩 되네요 ㅋㅋㅋㅋ
                      일억명이 찾는 사이트를 만드는 준비중입니다:D
                      감사합니다!!
                    • gotogoogle_webengineer
                      body태그(화면 상단의 큰 WEB)와 div 태그(ol 1~3까지의 a태그)로 묶인 a태그를 동시에 가져오려면 어떻게 해야하나요?
                      document.querySelectorAll('body #grid a'); 이런식으로 해봤는데 ol에만 적용되고 body태그에는 적용이 안되네요..
                    • metallsk
                      have a welly good time~!!
                    • 로버트한
                      감사합니다.ㅣ ^^
                    • xx-x
                      저는 크롬에서 console 창에서 코드를 쓰다가 알려주신 단축키 Ctrl + k를 누르면 구글 검색창이 활성화되네요!?


                      반복문을 활용한 부분 동영상을 보면서 하나하나 따라할 수도 있고 재미있기도 했는데요~
                      막상 저걸 혼자해 보라고 하면 못해요.. 다 잊어버리는 것 같아요ㅠ.ㅠ
                      저만 이러는걸까요ㅜㅜㅜ
                      대화보기
                      • 코알못
                        코드도 다썻고 왜 작동이 안될까요..ㅠㅠ 아톰쓰고있어요 ㅠㅠ
                      • NightFox
                        style.color=' '; 이렇게 공백을 넣어주시면 디폴트로 복구가 되네요
                        원래 지정된 css값으로는 그냥 style.css에 있는 값으로 넣어주시면 될 것 같습니다.
                        대화보기
                        • 오싹
                          소오오오름!!
                        • 스페이스몽키
                          이번 강의도 정말 감사합니다! 매번 똑같은 내용으로 글 남기는거 같지만 강의 들을 떄마다 너무 좋네요
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기