WEB2 – Node.js – 생활코딩 생활코딩 node.js 시작합니다. 1. node.js 소개 가. 탄생 최초로 성공한 상업용 웹 브라우저인 넷스케이프를 만든 커뮤니케이션 사에서는 브랜든 아이크(Brendan Eich)에게 자바스크립트의 제작을 의뢰했다. 이때까지만 해도 자바스크립트는 웹 브라우저에서 사용할 수 있는 유일한 컴퓨터 프로그래밍 언어였다. 이와 동시에 자바스크립트는 웹 브라우저에서만 동작하는 언어였다. 그러던 중 2008년 구글에서 크롬 웹 브라우저에서 동작하는 … 더 읽기
참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 JS 코드 설명 main.js 람다식으로 작성된 코드다. 동적으로 moreBtn과 title에 class 값으로 clicked과 clamp를 추가하고 삭제한다. style.css 수정 clamp라는 클래스를 지닌 title에 대하여 적용될 CSS 코드를 작성한다. clamp 되었을 경우에 텍스트는 2줄로 고정이 되고 초과한 글자는 생략된다. 버튼이 클릭된 경우 아이콘을 180도 회전한다. index.html 수정 clamp된 상태가 기본이기 때문에 class에 clamp를 추가한다. … 더 읽기
참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 각각의 flex의 item들이 컨테이너에서 차지하는 크기를 설정할 수 있다. 아래는 3개의 item들의 각기 다른 범위를 차치하는 상황이다. flex-grow flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정한다. 기본값은 0이다. 그래서 따로 값을 설정하기 전까지는 아이템이 늘어나지 않는다. 설정된 flex-grow의 값에 비례해서 여백 부분을 할당받는다. 해당 예시에서는 모두 동일한 1:1:1 비율이다. flex-shrink flex-shrink는 … 더 읽기
참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 CSS calc() CSS 코드에서 사칙 연산을 이용하는 방법. —padding은 이전에 :root에서 정의한 변수다. 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/calc 아이콘과 텍스트 중앙 정렬 아이콘과 텍스트가 좌측을 기준으로 정렬되어있다. 중앙을 기준으로 정렬시키고 싶을 경우 쉽게 하는 방법이 있다. margin: 0 auto;는 아이콘의 상하단의 마진은 0으로 설정하고 좌우는 컴퓨터가 자동으로 설정한다. 이렇게 작성할 경우… 알아서 아이콘의 중앙선과 … 더 읽기
참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 잘 정리해둔 글이 있어서 링크를 남긴다. 추가로 flex에 이어서 grid에 대한 설명도 있으니 필요하면 찾아서 사용하자. 지금 당장 알아야 할 것은… 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 | MDNMDN 나. 어울리는 레이아웃 색 조합 Color Tool – Material Design Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that … 더 읽기
객체예고 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 객체 자바스크립트의 객체에 대하여 알아본다. 객체의 예시로 자금까지 사용한 document도 객체에 속한다. 여타 언어와 크게 다르지 않다. 객체는 프로퍼티와 메서드를 포함하고 .(객체 접근 연산자)를 통해서 이것들에 접근할 수 있다. 객체 문법 가. 객체 선언 객체를 만드는 {}기호를 **객체 리터럴(object literal)**이라고 한다. 요소를 구분하기 위해서 … 더 읽기
배열 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 배열 배열 선언 배열에 값을 추가하는 법 Array – JavaScript | MDNMDN push() 외에도 pop() , shift() , unshifth() 등의 기능도 제공한다. 그 외에도 없는 기능이 없을 정도로 많은 기능을 제공하고 있으니 힘들게 직접 작성하기 전에 살펴보도록 하자. 배열에서 값을 가져오기 대부분의 다른 언어들과 … 더 읽기
수업의 목적 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. JavaScript CSS로 아름다운 웹 페이지에 대한 욕구가 충족되기 시작했다. 그러자 사용자들이 동적으로 상호작용할 수 있는 웹 페이지를 원하기 시작했다. 그래서 자바스크립트라는 기술이 태어났다. 기존의 웹 페이지는 화면에 출력되면 자기 자신을 변화시킬 수 없었다. 하지만 자바스크립트는 HTML을 제어하여 사용자와 상호작용할 수 있다. 그런 면에서 … 더 읽기
반응형 디자인 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 반응형 웹 PC든 스마트폰이든 태블릿이든 웹에 접속할 수 있는 하드웨어가 다양해졌다. 그렇기에 웹은 다양한 사이즈와 비율을 가진 하드웨어에 대응하는 웹 페이지를 만들어야 했다. 그런 맥락에서 탄생한 것이 바로 반응형 웹 디자인이다. 반응형 웹 디자인(responsive web)이란 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 … 더 읽기
