🍞 대외활동/길벗 블로깅 멘토

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 열여덟 번째 날로, 자바스크립트 공부 아홉 번째 날입니다! 이벤트를 다뤄볼 예정인데, 힘을 내서 같이 공부를 시작해 볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(487~522p) 5. 폼 조작하기 6. 이벤트 다루기 7. 이벤트 객체와 this 5. 폼 조작하기 5.1 form 태그 선택하기 HTML 폼 요소의 시작은 항상 form 태그입니다. 그래서 폼 요소를 조작하기 전에 form 태그를 선택하는 방법부터 알아볼게요! 크게 form 태그는 forms 속성과 name 속성으로 선택할 수 있습니다. 먼저 forms 속성을 실습해 보겠습니다. - forms 속성 사용하기 다음과 같이, form 태그가 있습니다! 코드를 실행해 개발자 ..

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 열일곱 번째 날로, 자바스크립트 공부 여덟 번째 날입니다! 이제 얼마 안 남았으니, 힘을 내서 공부 시작해 볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(456~486p) 1. 문서 객체 모델 이해하기 2. 노드 선택하기 3. 노드 조작하기 4. 노드 추가/삭제하기 1. 문서 객체 모델 이해하기 먼저, 문서 객체 모델에 대해서 이해해 볼 거예요. 웹 브라우저는 HTML 문서의 구성 요소를 모두 객체로 이해합니다. 1.1 문서 객체 모델이 생성되는 방식 문서 객체 모델은 웹 브라우저가 HTML 문서를 해석하고, 해석한 HTML 문서 구조를 객체로 변환하는 방식으로 생성돼요. 문서 객체 모델은 다음 그림처럼 나무를 뒤집어 놓은 형태의 자..

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 열여섯 번째 날로, 자바스크립트 공부 일곱 번째 날입니다! 별로 어렵지 않은 내용이니, 힘을 내서 같이 공부를 시작해 볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(433~453p) 3. 표준 내장 객체 사용하기 4. 브라우저 객체 모델 사용하기 3. 표준 내장 객체 사용하기 자바스크립트에선 개발 편의를 위해 수많은 객체가 미리 만들어져 있어요. 이러한 객체는 자바스크립트에 기본으로 내장되어 있기 때문에 스코프의 위치를 따지지 않고 모든 영역에서 사용 가능하답니다. 이렇게 내장된 객체를 표준 내장 객체라고 해요! 표준 내장 객체의 종류에 대해서 알아볼까요? 3.1 문자열을 다루는 String 객체 String 객체는 기본 자료형에서 ..

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 열다섯 번째 날로, 자바스크립트 공부 여섯 번째 날입니다! 조금 어려워져도 힘을 내서 같이 공부를 시작해볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(420~432p) 1. 객체란 2. 객체 속성 다루기 1. 객체란 객체란 키와 값으로 구성된 속성의 집합을 의미해요. 객체는 {}를 이용해 생성할 수 있는데, 이러한 방법을 리터럴 방식으로 객체를 생성했다하죠. 보통 객체를 생성할 땐 다음과 같이 빈 객체로 생성하지 않고 속성을 지정한 상태로 생성해요. 객체의 속성을 추가할 때, 줄 바꿈하지 않아도 되지만 가독성을 위해 줄 바꿈하는 것을 추천드려요! const person = { name: "Hone Gildong" }; 객체는 모든 자..

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 열네 번째 날로, 자바스크립트 공부 다섯 번째 날입니다! 어려운 용어들이 나오는데 같이 공부 시작해 볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(406~417p) 4. 함수의 특징 이해하기 5. 즉시 실행 함수 사용하기 4. 함수의 특징 이해하기 4.1 스코프 함수 내부의 변수를 함수 외부에서 참조할 수 없는 이유가 무엇일까요? 이를 이해하려면 스코프에 대해서 알아봐야 합니다! 스코프는 변수나 함수와 같은 참조 대상 식별자를 찾아내기 위한 규칙이에요. 자바스크립트의 스코프는 함수 스코프 방식, 블록 스코프 방식에 따라서 전역 스코프, 지역 스코프 참조 범위가 달라집니다. 먼저 함수 스코프와 블록 스코프에 대해서 알아볼까요? ✅ 함수..

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 열세 번째 날로, 자바스크립트 공부 네 번째 날입니다! 오늘부턴 함수를 다뤄볼 거예요! 공부 시작해 볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(392~405p) 1. 함수란 2. 함수를 정의하는 방법 3. 함수 기능 확장하기 1. 함수란 자바스크립트에서 함수는 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문입니다. 코드를 함수로 만들면 함수를 호출해 함수 내부에 모아 둔 여러 줄의 코드를 한 번에 실행할 수 있어요! 다음과 같이, 3단 구구단을 실행하는 반복문을 볼까요? 간단하죠? 그러나 3단이 아닌 다른 단도 출력하고 싶을 때는 어떻게 할까요? 같은 코드를 반복해서 적어야 할까요? 아닙니다. for (let i = 1; i {..

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 열두 번째 날로, 자바스크립트 공부 세 번째 날입니다! 어제에 이어서, 기초 문법에 대해서 더 자세히 알아볼 거예요. 그럼 공부 시작해 볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(366~389p) 4. 조건문 다루기 5. 반복문 다루기 4. 조건문 다루기 4.1 if, els, else if 문 if문은 조건식이 참으로 평가되면 코드를 실행하는 조건문이에요. 다음을 보시면, num이 짝수니까 console.log 짝수 코드가 실행되겠죠? let num = 10; if (num % 2 === 0) { console.log("짝수"); } 다음을 보시면, num이 홀수입니다. if 조건문이 거짓이니까 else인 홀수 코드가 실행될 거..

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 열한 번째 날로, 자바스크립트 공부 두 번째 날입니다! 오늘부터 조금 어려워져도 힘을 내서 공부 시작해 볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(332~365p) 1. 변수와 상수 2. 자료형 3. 연산자 1. 변수와 상수 1.1 변수 변수는 말 그대로 변하는 수를 뜻해요. 그래서 자바스크립트에서는 값이 변하는 데이터를 저장하고 관리하기 위한 공간으로 변수를 만듭니다. var num = 10 + 20 이런 형태 코딩하면서 많이 보셨을 텐데요 익숙하시죠? 여기서 num을 변수라고 해요! 1.2 새로운 변수 선언 키워드 let 변수를 선언하는 키워드는 var 말고도 let이 있어요. let 키워드는 ES6 버전에서 새로 추가된 키워..

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 열 번째 날로, 자바스크립트 공부 첫 번째 날입니다! 이제부터는 조금 어려워질 수 있는데, 다같이 힘을 내서 시작해볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(320~329p) 1. 자바스크립트 코드 작성 방법 2. 프로그래밍 시작 전 알아 두기 1. 자바스크립트 코드 작성 방법 1.1 HTML 파일과 자바스크립트 연결하기 HTML 문서와 자바스크립트 파일을 연결하는 방법은 내부 스크립트, 외부 스크립트 2가지입니다. - 내부 스크립트 방법 💡 멘토 TIP document.write() 메서드는 웹 브라우저 화면에 글자를 표시해 주는 자바스크립트 코드입니다! 12장에서 자세히 배우니 일단 넘어가셔도 괜찮아요! - 외부 스크립트 방법..

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 아홉 번째 날로, CSS 공부 마지막 날입니다! 마지막까지 힘을 내서 공부를 시작해볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(278~315p) 1. 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기 2. 그리드 레이아웃으로 2차원 레이아웃 설계하기 3. 반응형 웹을 위한 미디어 쿼리 사용하기 1. 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기 flex는 다음과 같이, display로 적용할 수 있습니다. display: flex; flex-direction, flex-wrap, flex-flow justify-content, align-items, align-content, align-self 등등... 정말 많은 속성들이 있..