루체

night와 day의 버튼을 하나로 합치는 것에 대한 영상입니다. 우선 버튼을 이렇게 새로 만들어 줍니다. 아직 if안에는 value값을 어떻게 가져오는지 몰라서 임의대로 작성을 했습니다. 이제 value 값을 어떻게 가져와야 하는지 검색을 해봅시다 javascript element get value https://stackoverflow.com/questions/4173391/getting-dom-element-value-using-pure-javascript Getting DOM element value using pure JavaScript Is there any difference between these solutions? Solution 1: function doSomething(id, val..

grid-template-columns / grid-gap fr = fraction 이라는 뜻으로 4 : 6으로 나누겠다! 라는 말입니다. grid-gap은 grid로 나눠진 부분에 여백을 이렇게 두겠다는 말입니다. grid-template-columns에는 %도 들어갈 수 있지만 %보다는 fr단위를 많이 사용을 합니다. 왜냐하면 스크롤이 생길 수 있기 때문입니다. 그리고 이렇게도 나눌 수 있습니다. grid-template-columns : repeat(3,1fr) 1fr은 3번 쓰기는 귀찮으니까 repeat을 통해 1fr단위로 3단으로 나누겠다~ 라는 말이라고 생각하면 편할 것 같다. 그리고 이럴 수도 있다. 나는 2줄로 정렬을 하고 왼쪽열을 200px로 고정시키고 오른쪽열만 신축성이 있게 만들고 싶..

우선 설명을 드리기 전에 html과 css에 이렇게 작성을 해주세요. 물론 필수적인 것은 아닙니다.. 작성을 하고 코드의 결과인 웹페이지를 바로 캡쳐해서 코드 아래에 적겠습니다.. 이미지가 동일한 것은 양해 부탁드립니다. 이미지가 없네요ㅠㅠ 이 코드에서 아이템들을 정리하는데 flex를 우선적으로 사용을 해보겠습니다. container에 flex를 적용을 해줍니다. 적용을 하면 그 안에 자식들이 배치가 된다 이런 개념이다. 아이템의 개수만큼 알아서 이렇게 만들어지게 됩니다. 딱 봐도 column 레이어드 만들 때 편해보이네요. width는 자기 content만큼 가져가는 것을 확인하실 수 있습니다.display:inline과 비슷합니다! 이게 display : flex의 기본 동작입니다. flex-dire..

웹페이지의 버튼을 눌러서 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에 숫자를 대입하려고 했기 때문에 오류가 납니다. 그러면 상수를 쓰면 되지 변수는 왜 쓰는가? 라는게 궁금할 수 있습니다. ..