CODE_PLAN

컴파일이란 지금은 우리가 프로그래밍 언어로 작성한 "소스코드"를 컴퓨터가 알아 들을 수 있도록 번역해주는 일 이라고 생각하시면 좋습니다.

여기서 우리가 알고있던 "프로그래밍 언어로 작성된 코드"를 "0과 1로 표현된 기계어"로 변환하는 과정을 컴파일이라고 합니다. 그리고 이 컴파일을 하는 시점과 방법을 기준으로 컴파일 언어(C언어, Java, 등)와 인터프리터 언어(Python, Javascript)로 나뉘게 됩니다.

<picture> 태그는 <img> 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의할 때 사용합니다.

<picture> 요소는 뷰포트(viewport)의 너비에 따라 커지거나 작아지는 하나의 이미지를 사용하는 대신 서로 다른 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해줍니다. 이러한 <picture> 요소는 웹 개발자가 이미지의 리소스를 보다 유연하게 지정할 수 있도록 해주므로, 반응형 디자인(responsive design)에서 주로 사용합니다.

<picture> 요소는 0개 이상의 <source> 요소와 하나의 <img> 요소로 구성되며, 브라우저는 <source> 요소 중에서 해당 뷰포트와 가장 잘 어울리는 <source> 요소를 다음과 같은 방법을 사용하여 선택합니다.

브라우저는 <source> 요소들의 속성값을 각각 확인해 나가며 조건을 만족하는 첫 번째 <source> 요소를 사용하고, 나머지 <source> 요소들은 무시합니다. 이 때 <img> 요소는 <picture> 요소의 자식 요소 중에서 가장 마지막에 위치해야 합니다. 이러한 <img> 요소는 <picture> 요소를 지원하지 않는 브라우저를 위한 하위 호환성(backward compatibility)을 위해 사용되거나 명시된 <source> 요소가 모두 조건을 만족하지 못 할 경우 사용됩니다.

참고> 

http://www.tcpschool.com/html-tags/picture

https://www.freecodecamp.org/korean/news/javascript-foreach-how-to-loop-through-an-array/

참고>

- 또한 forEach((number, index, array)) 가 있는데 array는 배열수 여기서는([2,3,4,5,6])가  5개 풀력됩니다. 원소의 갯수가 3개일때는 3개씩 1세트로 3개 출력 

다음은, forEach의 array부분을 이해하기 쉬운 그림이다. 배열자체가 출력된다 

참고자료> 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functions

https://jieum.tistory.com/124

https://ko.javascript.info/map-set

https://velog.io/@cha-suyeon/Algorithm-%EC%8B%9C%EA%B0%84-%EB%B3%B5%EC%9E%A1%EB%8F%84-%EA%B3%B5%EA%B0%84-%EB%B3%B5%EC%9E%A1%EB%8F%84

이런식으로 폴더 및 파일 생성후

code Runner를 설치후 ctrl+alt+N 을 눌르면 실행이 됩니다.

참고한 블로그>

https://velog.io/@eundada064/%EB%B0%B1%EC%A4%80-JavaScript-VSCode-%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85