행뽁🐥

⚠ 이 후기는 게으른 사람의 챌린지 졸업 후기입니다. (한심하게 보지 말기😥) ⚠ 빡세지 않을까, 힘들지 않을까 걱정하시는 분들은 제 후기를 읽고 도전해보세요! 📚 배경지식 저는 이번 챌린지를 통해 자바 스크립트를 처음 접했고, 바닐라 JS 강의도 처음 들었습니다. (원래 챌린지는 강의를 다 듣고 복습용으로 참여하는 것을 권장한다고 합니다!) 거두절미하고, 저처럼 챌린지를 통해 처음 자바 스크립트를 접하시는 분들은 2주 동안.. 빡셀 것입니다. 하지만... 할만합니다!!!!! (프로그래밍 언어를 1개라도 할 줄 아는 분들, HTML, CSS에 대한 지식이 희미하게라도 있는 분들 기준입니다. 이걸로 프로그래밍 언어를 처음 접한다면 많이 어려울 거예요.😭) 🏃‍♀️ 챌린지 시작 챌린지는 2주 동안 단 1회의..

~잠깐 사담~ 아직 공부한 지 얼마 안 됐지만, 자바스크립트는 너무 어렵다.ㅠㅠ 파이썬, 자바를 처음 배울때 보다 훨씬 어려움....ㅠㅠㅠㅠ 게다가 지금 챌린지 중인데, 잘하시는 분들 너무 많아서 자괴감 든다. 진짜 리스펙......😭 if문을 사용할 경우 html JS is so hard!! css body { background-color: #fab1a0; } h1 { color: #2980b9; transition: color 0.5s ease-in-out; } .clicked { color: #6c5ce7; } JS const title = document.querySelector("#title"); const CLICKED_CLASS = "clicked"; function handleClick(..

함수 function sayHello(arg){ console.log('Hello!', arg); } sayHello("HJ"); 함수는 인자(argument)를 받는다. 인자는 없어도 됨. 백틱(``) function sayHello(name, age){ return `Hello ${name} you are ${age} years old.`; } const greetHJ = sayHello("HJ", 20); console.log(greetHJ); ""와 ''는 둘 다 String이다. 하지만 백틱(``)은 완전히 다른 기능을 가지고 있다. 객체 안의 함수 const calculator = { plus: function(a, b){ return a + b; }, sub: function(a, b){ r..

변수 let: 변수의 값을 바꿀 수 있다. (재선언 X, 재할당 O) const: 상수. 변수의 값을 바꿀 수 X. 웬만하면 이걸로 선언하기! (재선언 X, 재할당 X) var: 쓰지말기!!!!!! (재선언 O, 재할당 O) 변수명 - Camel case 자바스크립트의 변수명, 함수명은 Camel case를 많이 따른다. 변수명의 시작은 무조건 소문자. 중간에 공백이 필요하다면, 공백 대신 단어의 첫 글자를 대문자로. 공백, -, / 같은 특수문자들 사용 X. 배열 (Array) [] 부호 사용. index로 원하는 값을 찾을 수 있다. 모두 같은 데이터타입일 필요 X array속 array도 가능. array속 object도 가능. 객체 (Object) const HJInfo = { name: "HJ"..

바닐라 JS를 공부하다가 궁금한 점이 생겨서 찾아보았다. JavaScript 브라우저에서 동작할 수 있는 프로그래밍 언어. ES ECMAScript 브라우저에 따라 제각각인 스크립트 언어들을 위해 표준을 만든 것. 한마디로 메뉴얼이나 Specification 같은 것! 바닐라 JS JavaScript의 한 종류로 Library가 없는 것. SPA (Single Page Application) 하나의 페이지안에서 데이터를 받아와서 필요한 부분만 부분적으로 업데이트하는 것. React, Angular, Vue 등으로 쉽게 구현 가능.

링크 밑줄 없애기, 링크 색상 없애기 #login-form a { text-align: center; text-decoration: none; /* 링크의 밑줄 제거 */ color: inherit; /* 링크의 색상 제거 */ }

block, inline block: 옆에 아무것도 올 수 없다. 혼자 한 줄을 차지. , , 등. inline: 높이(height)와 너비(weight)가 없음. 옆에 다른 요소가 올 수 있다. , , 등. display 속성값 변경 display: block; display: inline; display: inline-block; inline-block: 박스 모양이지만 inline 등으로 속성값 변경 가능. block의 대표적인 특징 3가지 margin padding border margin box의 border(경계)의 바깥에 있는 공간. 주황색 부분이 margin. inline 은 위, 아래 margin을 가질 수 없다. 높이와 너비가 없기 때문. (padding은 사방으로 가질 수 O) ∴ m..

https://developer.mozilla.org/ko/ MDN Web Docs MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문 developer.mozilla.org MDN 문서 참고하기! 구글 검색 시에도 html tag mdn, css border style mdn 등 끝에 mdn을 붙여서 검색해주면 좋다. 한국어도 제공👍

확장 프로그램 1. Community Material Themes 다양한 테마를 제공한다. 2. Material Icon Themes 다양한 파일 아이콘을 제공한다. 3. Prettier - Code formatter 좌측 하단 톱니바퀴 - Settings - Editor 검색 - Format On Save 체크! 태그를 닫지 않거나, 정렬이 제대로 안되어있는 등 문법에 맞지 않는 경우 저장할 때 자동으로 수정해준다.👍