개발 잘하기

1)문제 This Month - Starter Kit 📌 현재 날짜를 기준으로, 이번 달의 일수가 1일부터 표시되어야 합니다. book.vanillacoding.co 2)결과 3)풀이 더보기 (1)HTML 일 월 화 수 목 금 토 (2)CSS table { //크기 설정 width:500px; height:500px; //본인 가로세로 가운데 정렬 position:absolute; top:0; right:0; left:0; bottom:0; margin:auto ; //자식요소 가로세로 가운데 정렬 display:flex; align-items:center; justify-content:center; } td { width:50px; height:50px; //글자 가운데정렬 text-align:cent..

1)FirstDay (1)문제 First Day - Starter Kit 📌 1일을 기준으로 하는 요일의, 이후 날짜가 보여져야 합니다. book.vanillacoding.co (2)풀이 오늘 자 요일 찾은 후 해당 요일을 시작으로 숫자 나열하였다. 특정 요일을 찾는 데 부모요소를 객체로 querySelector() 사용하였음. 숫자 나열시 데이터 type을 숫자로 하기 위해 innerHTML 속성을 사용하였음. //오늘 자 요일 찾기 const date = new Date('2023-03-01'); let firstDay = date.getDay(); console.log(firstDay); let tbodyEle = document.querySelector('tbody') let thEles = tb..

1)Background Changer (1)문제 Background Changer - Starter Kit 0~9까지의 숫자와 A~F까지의 알파벳이 랜덤하게 구성되어 이루는 6자리 코드를 의미합니다. 예를 들면 000000, 3474FF 등 모두 유효한 Hex Code입니다. CSS에서는 Hex Code앞에 #를 붙여 색상값으로 이용할 book.vanillacoding.co (2)풀이 ①내 풀이 임의의 요소를 추출해서 새 배열의 item으로 push하였으며 해당 배열 데이터 내 item들을 문자열로 합쳤다. //DOM 객체 설정 let NumString = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'] let buttonElement = document.querySel..

1)문제 - Quiz #3 Events Practice - Starter Kit 📌 Stop, Pause, Go 클릭 시 빨간색, 주황색, 초록색불이 들어와야 합니다. book.vanillacoding.co 2)풀이 spanElements는 여러 요소를 가진 유사 배열 객체이다. 이에 for문을 통해 해당 객체의 내부 item들을 모두 순회하며 배경색을 초기화하였음. const buttonElement = document.querySelector("button"); const spanElement1 = document.querySelectorAll('span')[0] const spanElement2 = document.querySelectorAll('span')[1] const spanElement3 ..

1)DOM Introduction (1)MDN 정의 The Document Object Model (DOM) is a programming interface for HTML. An application programming interface (API) is a computing interface which defines interactions between multiple software intermediaries. (2)Vanilla Coding 주어진 인터페이스를 이용하여 원하는대로 TV를 조종할 수 있습니다.마찬가지로 DOM이라는 인터페이스를 이용한다면, 자바스크립트를 이용하여 HTML 문서를 조종할 수 있습니다. 단, 자바스크립트의 DOM으로 HTML 문서에 접근하고 조종하게 되는 것이 HTML ..

1)켄을 찾아라 (1)문제 켄을 찾아라 - Starter Kit ["Jett", "Leo", "Ken", "Justin"] book.vanillacoding.co (2)풀이 function findKen(arr) { for(let i =0; i

1)Function(함수) 소개 여러 개의 코드 구문들을 하나의 단위로 묶어 실행할 수 있는 것을 의미함 2)함수 선언 방식 // Function Declaration (함수 선언식) function foo () { // function body.. } // Function Expression (함수 표현식) const foo = function () { // function body.. }; Function (함수)는 위와 같이 크게 두 가지 방법으로 선언하여 만들 수 있습니다. 각자 선호하는 방식으로 선언하여 사용해도 무관하지만, 단일 프로젝트 내에서 일관된 스타일을 유지하는 것은 중요하므로, 한 가지 방식을 선택하여 사용하셔야 합니다. 3)함수 선언과 실행의 구분 (1)함수 선언 function f..

1)onkeydown, textContent, value HTML 요소들의 클래스명을 이용하여 각 클래스에 해당하는 요소들을 선택하고, 각각 header, input이라고 부르는 변수에 저장합니다. const header = document.querySelector(".header"); const input = document.querySelector(".input"); 키보드의 키를 누르는 이벤트(keydown)에 대한 정보를 구독하고, 해당 이벤트가 발생했을때 changeHeader라는 함수를 호출한다. changeHeader 함수가 호출되면, .header 요소의 텍스트 내용을 사용자가 입력한 입력칸의 내용으로 대체한다. input.onkeydown = function changeHeader () ..

1)HTML 링크 a 태그는 글씨나 이미지를 감쌀 수 있습니다. a 태그에 포함된 모든 요소는 웹페이지에서 사용자가 클릭할 수 있도록 만들어집니다. 이메일 보내는 링크 전화를 거는 링크 href 값의 앞 부분에 특정 단어를 붙이게 되면 조금 더 특별한 기능들이 주어집니다. mailto:는 이메일을 보내는 프로그램으로 연결시켜 주고, tel:은 휴대폰 기기들이 전화를 걸도록 연결됩니다. 수업 목차 수업 목차로 이동하는 링크 또한 우리는 같은 페이지에서 다른 위치로 이동하는 링크를 만들 수도 있습니다. id라는 속성을 만들어서 목적지 장소에 위치한 요소에 추가하고, 그리고 다른 위치에 있는 a 태그에 href 속성값을 #id(id 값에 알맞게 변경)으로 설정해주면 됩니다. *참고 링크 HTML 링크 - St..