루체

const dong = { name : '멍멍이', age : 2, cute : true, sample : { a: 1, b: 2, } }; console.log(dog.name); === 멍멍이 console.log(dong.age); === 2 name과 age는 키라고 한다. 공백이 있으면 안된다. 대신 ''이걸로 감싸주면 된다. 비구조화 할당 = 객체 구조분해 객체에서 특정 값들을 추출해내는 것 const ironMan = { name : '토니 스타크', actor : '로버트 다우니 주니어', alias : '아이언맨' }; const {name} = ironMan; console.log(name); function print(hero){ const { alias, name, actor } =..

현재 홈페이지에 이미지 slide가 몇 초뒤에 넘어가는 자동으로 넘어가는 것과 label을 선택했을 때 해당하는 이미지로 넘어가게 하는 것을 JavaScript로 혼자 이것저것 해보았다. 내 생각으론 label의 for값을 이용해서 이미지의 margin-left를 옮기는 것을 할 수 있을 것 이라고 생각했는데 그것이 아니였다.. 일단 Label의 for값을 가져오는 것에 대한 글이 별로 없어보여서 내가 알아낸 것이라도 써놓으려고 한다 인터넷 상에서는 htmlFor값을 쓰라고 하던데 VSCode를 이용해서 써보려고 했더니 내가 뭘 잘못했는지.. 아님 사라진건지.. 잘 되지않았다.. 그래서 이것저것 뒤적거리다 겨우 발견했다. document뒤에서 label을 가져오는 것은 각각의 코드마다 다르지만 내 코드에..

JavaScript코드를 옮기기 위해서 새파일을 만들어 줍니다 뒤에 확장자명은 .js입니다. 그리고 작성했던 코드들에서 태그를 제외하고 붙여넣어 주세요 그리고 JavaScript를 사용하려고 하는 곳 부분에 아래처럼 추가해주시면 사용을 할 수가 있습니다. 그러면 하나의 파일만 수정해도 이 파일을 공동으로 사용하는 웹페이지 전체에 적용되는 편리함을 얻을 수 있습니다.

웹페이지의 버튼을 눌러서 body태그의 style 속성을 동적으로, 프로그래밍적으로, 또 상호작용에 의해 넣으려고 한다. 그러려면 JavaScript의 문법에 따라서 웹브라우저에게 이 body 태그를 선택하라고 해야한다. 그걸 하기 전에 우선 검색부터 해봅시다. JavaScript Select Tag by CSS Selector https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector Element.querySelector() The querySelector() method of the Element interface returns the first element that is a descendant of the element on w..

변수라는 것은 바뀔 수 있는 어떤 값이라고 할 수 있습니다. 예를 들어서 x = 1이고 y=1일 때 x+y는 2입니다 여기서 x의 값을 1000으로 변경해서 더하기를 하면 1001이 됩니다 바로 이 맥락에서 여기서 x라는 것을 변수, 영어로는 variable이라고 합니다. 그리고 여기 있는 = 이것을 대입 연산자라고 합니다. 오른쪽 항에 있는 왼쪽에 있는 변수에 대입한다라는 대입연산자입니다. 이 대입 연산자는 하나의 특징이 더 있습니다. 좌항과 우항을 결합해서 우항의 값을 만들어 낸다라는 뜻입니다. 모르셔도 되는 내용입니다. 항상 변하지 않는다는 숫자인 상수 영어로는 constant에 숫자를 대입하려고 했기 때문에 오류가 납니다. 그러면 상수를 쓰면 되지 변수는 왜 쓰는가? 라는게 궁금할 수 있습니다. ..

문자열(String)과 숫자(Number)의 데이터 타입에 대해서 알아보기 위해서 아무 사이트에서 검사를 켜봅시다. 검사 안에서 Console을 찾아서 눌러줍시다. 여기서 이제 숫자를 표현해보겠습니다. 숫자를 표현하기 위해선 그냥 숫자를 입력해주시면 됩니다. 너무 당연해보이지만 이것이 당연하지 않을 수 있습니다. 이렇게 입력을 해봅시다. 입력을 하면 창이 뜨면서 숫자 1이 뜨게 될 것입니다. 그런데 이렇게 테스트를 할 때마다 alert를 계속 치는 것과 그 창을 끄는 것이 귀찮을 수 있습니다. 그럴 땐 아래 와 같이 해주세요. 1+1를 입력을 했더니 아무런 창도 뜨지 않고 결과가 보이는 것을 알 수가 있습니다. 그리고 이 숫자, number라는 데이터 타입에서 아주 중요한 것은 연산입니다. 이 더하기는 ..

왜 3가지로 나누어져 있을까?? 한가지로 만들면 편하지 않을까?? 이 3가지의 언어들은 각각의 역할이 다 있습니다 그 역할의 충실해서 사용을 해야 괜찮은 구조와 디자인, 기능을 가진 웹페이지를 만들 수 있습니다. HTM(Hyper Text Markup Language) HTML은 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의를 합니다. 이 부분에 이미지가 들어가고 이 부분엔 동영상이 들어간다 이런걸 정의를 하는 것입니다. HTML은 정적 언어로 웹의 구조를 담당을 합니다. 그래서 이 HTML로 화면을 예쁘게 만들려고 시도하지 않으셔도 됩니다. 일종의 뼈대, 즉 온전히 튼튼한 구조(Semantic)를 만드는 것입니다. CSS(Cascading Style Sheets) CSS는 마크업 언어(HTML..