WEB2 - Node.js - 생활코딩 수업소개 이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다. 수업대상 예를들어 1억개의 페이지로 이루어진 웹사 opentutorials.org 생활코딩 node.js 시작합니다. 1. node.js 소개 가. 탄생 최초로 성공한 상업용 웹 브라우저인 넷스케이프를 만든 커뮤니케이션 사에서는 브랜든 아이크(Brendan Eich)에게 자바스크립트의 제작을 의뢰했다. 이때까지만 해도 자바스크립트는 웹 브라우저에서 사용할 수 있는 유일한 컴퓨터 프로그래밍 언어였다. 이와 동시에 자바스크립트는 웹 브라우저에서만 동작하는 언어였다. 그러던 중 2008년 구글에서 크롬 웹 브라우저에서..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 JS 코드 설명 main.js const moreBtn = document.querySelector('.info .metadata .moreBtn'); const title = document.querySelector('.info .metadata .title'); moreBtn.addEventListener('click', ()=>{ moreBtn.classList.toggle('clicked'); title.classList.toggle('clamp'); }); 람다식으로 작성된 코드다. 동적으로 moreBtn과 title에 class 값으로 clicked과 clamp를 추가하고 삭제한다. style.css ..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 각각의 flex의 item들이 컨테이너에서 차지하는 크기를 설정할 수 있다. 아래는 3개의 item들의 각기 다른 범위를 차치하는 상황이다. flex-grow flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정한다. 기본값은 0이다. 그래서 따로 값을 설정하기 전까지는 아이템이 늘어나지 않는다. 설정된 flex-grow의 값에 비례해서 여백 부분을 할당받는다. .upNext .item .img { flex-grow: 1; } .upNext .item .info { flex-grow: 1; } .upNext .item .moreBtn { flex-grow: 1; } 해당 예시에..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 CSS calc() CSS 코드에서 사칙 연산을 이용하는 방법. .actions button i { margin-bottom: calc(var(--padding) / 2); } —padding은 이전에 :root에서 정의한 변수다. +와 `` 연산자는 좌우에 공백이 있어야 한다. calc(50% -8px)은 백분율 값과 음수 길로 해석하여 유효하지 않지만, calc(50% - 8px)은 백분율과 길이의 뺄셈으로 해석한다. 마찬가지로, calc(8px + -50%)는 길이와 음의 백분율 간의 덧셈으로 처리한다. *와 / 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋다. 출처 :..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 잘 정리해둔 글이 있어서 링크를 남긴다. 추가로 flex에 이어서 grid에 대한 설명도 있으니 필요하면 찾아서 사용하자. flex에 대한 설명 : https://studiomeal.com/archives/197 grid에 대한 설명 : https://studiomeal.com/archives/533 지금 당장 알아야 할 것은... flex-direction으로 배치의 방향(가로축 row, 세로축 column)을 선택한다는 사실. 선택한 축 방향으로 정렬하고 싶으면 프로퍼티로 justify-content:를 사용한다. 선택한 축의 수직 방향으로 정렬하고 싶으면 프로퍼티로 align-items:를 사용한다..

유용한 사이트 출처 : https://www.youtube.com/watch?v=67stn7Pu7s4 가. Html 태그 참고 HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. developer.mozilla.org 나. 어울리는 레이아웃 색 조합 Color Tool - Material Design Color Tool - Material Design Create and share color palettes for your UI, and measure the accessibility of a..

객체예고 - 생활코딩 소스코드 변경사항 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 객체 자바스크립트의 객체에 대하여 알아본다. 객체의 예시로 자금까지 사용한 document도 객체에 속한다. 여타 언어와 크게 다르지 않다. 객체는 프로퍼티와 메서드를 포함하고 .(객체 접근 연산자)를 통해서 이것들에 접근할 수 있다. 객체 문법 가. 객체 선언 객체를 만드는 {}기호를 객체 리터럴(object literal)이라고 한다. 요소를 구분하기 위해서 , 콤마를 사용한다. 나. 객체 프로퍼티 추가하기 coworkers.subject = "JavaScript"; 간혹 key에 공백을 포함한 경우가 있다. 이때 coworkers.prior knowledge = “..

배열 - 생활코딩 소스코드 변경사항 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 배열 배열 선언 ... ... 배열에 값을 추가하는 법 ... ... Array - JavaScript | MDN JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다. developer.mozilla.org push() 외에도 pop() , shift() , unshifth() 등의 기능도 제공한다. pop() : 가장 뒤에 값을 반환하고 삭제 그리고 전체 길이는 줄어듬. shift() : 가장 앞에 값을 반환하고 삭제 그리고 순서를 한 칸씩 앞으로 당김. unshift() : 가장 앞에 값을 추가하고 그리고 순서를..