코딩자율학습

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

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

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 열네 번째 날로, 자바스크립트 공부 다섯 번째 날입니다! 어려운 용어들이 나오는데 같이 공부 시작해 볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(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 등등... 정말 많은 속성들이 있..

안녕하세요! 멘토를 당담하게 된 박브레드입니다. 오늘은 여덟 번째 날로, CSS 공부 네 번째 날입니다! CSS는 재밌으니까 조금만 더 힘내서 공부 시작해볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃공부할 내용(223~276p) 5. 위치 속성으로 HTML 요소 배치하기 6. 전환 효과 속성 적용하기 7. 애니메이션 속성으로 전환 효과 제어하기 8. 변형 효과 적용하기 9. 웹 폰트와 아이콘 폰트 사용하기 5. 위치 속성으로 HTML 요소 배치하기 5.1 position 속성 position 속성은 HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용합니다. position은 정말 무엇보다도 중요하고, 제대로 이해하는 게 중요해요! 글을 보면서 이해하는 것보다 직접 코드를 따라 치면서 ..

안녕하세요! 멘토를 담당하게 된 박브레드입니다. 오늘은 일곱 번째 날로, CSS 공부 세 번째 날입니다! 오늘부터 CSS에 대해 깊게 파고들 텐데 준비되셨나요? 그러면 CSS 공부 시작해볼까요? 오늘 공부할 내용은 다음과 같습니다. 🏃 공부할 내용(172~222p) 1. CSS의 특징 살펴보기 2 텍스트 속성으로 텍스트 꾸미기 3. 박스 모델들 구성하는 속성 다루기 4. 배경 속성으로 요소의 배경 설정하기 1. CSS의 특징 살펴보기 1.1 기본 스타일 시트 hr 태그를 배울 때, 단순히 태그만 사용했는데도 웹 브라우저에는 텍스트가 다양한 크기와 크기와 굵기로 표시됐어요. 그 이유는 웹 브라우저 자체에 기본 스타일 시트가 있기 때문입니다. 이 부분에 대해선 깊게 공부하시지 않고 넘어가도 괜찮습니다 ㅎㅎ ..