기초공사 (html,css,javascript)

//자바스트립트 ES6 부터는 백틱 기호를 사용한 문자열을 템플릿 리터럴이라고 부릅니다console.log(language + "처음이죠?" + "Hello World" + language + "참 쉽죠?"); 문자열을 연결하고 출력하려면 따옴표와 더하기(+) 기호를 사용해 위와 같이 사용해야 했습니다. 템플릿 문자열에서는 ${}(플레이스 홀더place holder라고 부릅니다)를 사용해 변수를 넣고, 아래와 같이 따옴표와 더하기 기호를 빼고 쓸 수 있습니다.onsole.log(`${language} 처음이죠? Hello World ${language} 참 쉽죠?`);익숙해진다면, 같은 문자열이어도 더 간단하게 표현하는 것이 가능해지는 것이죠. 좀 더 어렵게 표현하자면, 내장된 표현식을 사용하는 것을 허..

// /*실습 : 웹문서를 열었을때,시간이 12시 이전이면 images/morning.jpg시간이 12시 이후이면 images/afternoon.jpg을 표시하려고 한다. 현재시간을 알아내려면 알아내는 방법은 아래 제공 : const today = new Date(); // 현재 날짜와 시간 정보를 담은 today 객체const hrs = today.getHours() // 현재 시간중 시 정보를 가져온다.1. 현재 시간에 따른 이미지를 다르게 하려면 어떻게 해야할까? -- if(hrs > 12) images/afternoon.jpg images/morning.jpg2. img 요소를 만들고 이미지 파일 경로를 지정하려면 어떻게 해야할까? --let imgE = document.c..

//   위의 코드를 보면 htmlcollection은 '6'으로 바로 반영이 되는데 --> live 실시간으로 반영nodelist는 한번 찍힌 '5'는  div가 추가 되어도 바뀌지 않는다.(상단에 있었자만) --> nolive--> live와 nolive가 이말 이었음.  nodelist를 6으로 바뀌고 하고싶으면    NodeList와 HTMLCollection의 업데이트 방식이다. 1. Live Collection  vs  Static Collection : -  HTMLCollection은 "live" 컬렉션이다. 즉 DOM 변경사항이 실시간으로 반영된다. 따라서 새로운  가 추가되면 그 변경사항이 즉시 HTML..

// 고차함수 1. map ( ) 메서드 - map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. - 배열의 각 요소에 대해 콜백 함수를 실행하고, 이 때 콜백 함수에는 현재 요소(aaa)와 그 요소의 인덱스(i)가 인자로 전달됩니다. const posts = [ { id: 1, title: "안녕하세요-1", }, { id: 2, title: "안녕하세요-2", }, ]; [("안녕하세요-1", "안녕하세요-2>")]; const hello = posts.map((aaa, i) => { //console.log(aaa); //console.log(i); if (i % 2 === 0) return; // 0번째는 참이므로 undefined return ..

DeepDive_27  map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다.그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. 이때 원본 배열은 변경되지 않는다. forEach와 다른점 :forEach 메서드와  map메서드의 공통점은 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출한다.  forEach메서드는 언제나 undefined를 반환하고, map메서드는 콜백 함수의 반환값들로 구성된 새로운 배열을 반환하는 차이가 있다. 즉, forEach메서드는 단순히 반복문을 대체하기 위한 고차함수이고, map메서드는 요소값을 다른값으로 매핑한 새로운 배열을 생성하기 위한 고차함수이다.  https://codinge..

// https://inasie.github.io/it%EC%9D%BC%EB%B0%98/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4-%ED%91%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0/ 마크다운 - 표(테이블) 만들기 마크다운을 이용해서 표를 그리는 방법을 알아보겠습니다. inasie.github.io

// 문제1. 4개의 회원 목록이 존재한다. 회원목록에는 "김사과", "이멜로", "오렌지", "박하나" 각 회원 상세에는 나이, 키, 이름이 정의 되어 있다. 나이와 키는 임의로. 회원목록 중 특정한 회원 사용자의 정보를 출력할 것 prev()라는 사용하면 이 전의 사용자 next()라는 사용하면 이 다음의 사용자 단, pvev 함수는 0 밑으로 내려갈 수 없습니다. next함수는 회원목록 수 이상을 내려갈 수 없습니다. 기본값은 가장 첫번째 회원 목록에 등록된 사용자입니다. 1. 입력 // 내가. const userLists = [ { name : "heejung", age : 20, height:180 }, { name : "nana", age : 20, height:180 },....... ] 2..

// 이제 조금은 이해가 간다. 1. return은 코드블럭에서 실행을 할수 있게끔 해주는것이다. // 5, 5, undefined가 콘솔에 찍힌다. 실행부에서 addNumber(2,3)에서 코드블럭 실행하기 위해 위에 올라가는데 내부의 console.log(num1 + num2); 에 의해서 5가 찍히고, ----------1. console.log(addNumberPrint(3, 4)); 에서 addNumberPrint(3,4)가 있네?...코드블럭으로 올라가서 역시 내부의 console.log(num1 + num2);에 의해서 7이 찍히고, ----------2. 자바스크립트에서는 명시적으로 아무것도 반환하지 않으므로 반환값은 undefined가 됩니다. 그리고 return이 없으므로 자바스크립트에..

// display:flex때문에 감싸는게 아니다. row에서 display: flex;를 삭제하면, 태그는 더 이상 flex 항목이 아니게 되어 그 크기와 위치가 flexbox 모델에 의해 결정되지 않습니다. 대신, 기본적인 인라인 요소로서의 동작을 따르게 되어, 내용의 길이만큼만 공간을 차지하게 됩니다. 이로 인해 .row 내부의 태그가 이전과 달리 내용물만큼만 크기를 갖게 되는 것입니다.