디자이너에게서 디자인을 받아서 실제로 구동되는 화면으로 개발을 진행하다 보면 넓이와 높이, 여백, 폰트 사이즈 등 다양하게 단위를 지정하고 사용해야 하는 상황이 생긴다. 이 때 개발자는 고민에 빠지게 될 것이다. 어떤 단위를 사용하지? 단위를 어떻게 지정해야 할까?하지

아래 내용은 학원 수업과 "모던 자바스크립트 Deep Dive : 이웅모 저"를 읽고 정리한 내용입니다. 자바스크립트는 브라우저에서 실행되기 위해서 만들어졌으며 HTML, CSS와 함께 실행된다. 따라서 브라우저가 파일들을 어떻게 화면에 렌더링 하는지를 알아두는 것이

아래 내용은 학원 수업과 "모던 자바스크립트 Deep Dive : 이웅모 저"를 읽고 정리한 내용입니다. 배열 여러 개의 값을 순서대로 나열한 가장 기본적이며, 많이 사용하는 자료구조이다. 이 때 배열이 가지고 있는 값은 요소라고 하고, 요소의 갯수를 나타내는 프로

아래 내용은 학원 수업과 "모던자바스크립트 Deep Dive : 이웅모 저"를 읽고 정리한 내용입니다. 클로저 클로저가 왜 필요한가? 함수가 어떤 값(상태)을 변경해야 하는 경우에 값이 전역 코드에 있다면 해당 값은 모든 사람, 모든 코드가 접근할 수 있기 때문에

아래 내용은 학원 수업과 "모던자바스크립트 Deep Dive : 이웅모 저"를 읽고 정리한 내용입니다. 1. 생성자 함수에 의한 객체 생성 객체를 생성하기 위해서 가장 많이 사용하는 방법은 객체 리터럴을 사용하는 것이다. 하지만 이 방법은 치명적인 단점이 존재하는데

아래 내용은 학원 수업과 "모던자바스크립트 Deep Dive : 이웅모 저"를 읽고 정리한 내용이다. 1. 스코프 스코프(scope)는 범위라는 뜻을 가지고 있다. 그렇다면 어떤 범위일까? 코드를 작성하면 변수 혹은 함수의 식별자들을 많이 작성하게 된다. 스코프는

아래 내용은 학원 수업과 "모던자바스크립트 Deep Dive : 이웅모 저"를 읽고 정리한 내용입니다. 1. 함수 1-1. 함수란? 프로그래밍 언어에서 얘기하는 함수는 작성된 프로그래밍의 과정을 코드블록{}으로 감싼 실행단위이며, 이렇게 코드블록으로 묶인 실행단위는

아래 내용은 학원 수업과 "모던자바스크립트 Deep Dive : 이웅모 저"를 읽고 정리한 내용입니다. 1. 제어문이란? 제어문이란 정해진 조건의 결과에 따라서 코드블록의 흐름을 선택해야하거나 해당되는 코드블록을 반복해야할 때 사용한다. 이 제어문은 크게 조건문과

아래 내용은 학원 수업과 "모던자바스크립트 Deep Dive : 이웅모 저"를 읽고 정리한 내용입니다. 프로그래밍에서는 수학에서 사용하는 산술연산자 외에도 여러가지 연산자들이 존재하고, 연산자가 연산을 수행하는 대상을 피연산자라고 한다. 이 때 피연산자는 값으로 평가

아래 내용은 학원 수업과 "모던자바스크립트 Deep Dive : 이웅모 저"를 읽고 정리한 내용입니다. 자바스크립트의 데이터 타입 : 자바스크립트에는 7가지 데이터 타입이 있다. 데이터 타입은 크게 원시타입과 객체 타입으로 나눌 수 있으며, 이 타입에 따라서도 다른

아래 내용은 학원 수업 및 온라인 강좌와 모던 자바스크립트 Deep Dive(이웅모 저)를 정리한 내용입니다. 변수 처음 자바스크립트를 공부하기 위해서 책을 펼쳤을 때 가장 먼저 나온 그것!! 바로 변수였다. 시중에 나와있는 책, 그리고 변수를 검색했을 때 가장 많

Git? git이 왜 필요한지 알기 위해서는 먼저 git이 뭔지 알아야 한다. 하지만 자세한 설명은 정보의 바다인 인터넷에 조금만 찾아보면 워낙 잘 나와있을테니까 생략하고 간단하게만 알아보고자 한다. git은 분산 버전 관리 시스템을 말하는 것으로 소스코드를 쉽게 관

blur 효과 모바일이나 웹사이트를 이용하다 보면, 기존의 화면 위에 팝업창과 같은 보조 창이 뜨게 될 경우 뒷 화면이 블러 처리가 되는 경우나, 배경 이미지가 블러처리 되어 있는 경우가 있다. 이 부분은 어떻게 처리하는 것이 좋을까? 배경이미지의 경우 포토샵에서 블

img 공백 발생 block 박스 안의 inline 요소는 line-height로 인해서 gap이 발생한다. 이 것은 inline 요소가 해당 요소를 텍스트처럼 인식하기 때문이다. 기본적으로 컴퓨터 그리고 html은 서구 문화권에서 시작되었다. 때문에 자연스럽게 서

접근성 HTML 문서를 작성하다보면 우리는 음성 보조기기 등을 사용하는 사용자들을 배려하기가 쉽지 않다. 내가 직접 겪은 문제가 아니기 때문에 필요성을 잘 느낄 수 없기 때문이다. 하지만 이런 문제는 반드시 해결되어야 하는 문제이다. 일반 사용자와 완전히 같은 페이지를

아래 내용은 학원 수업을 듣고 정리한 내용입니다. HTML 작성을 하려고 하면, 무엇부터 해야 할까? 어디서부터 시작해야할까? 시안 분석 디자인 된 파일을 HTML 파일로 만들기 위해서 제일 먼저 해야할 일은 무엇일까? 바로 시안을 분석하는 것이다. 시안을 분석하

웹 사이트(혹은 웹 어플리케이션)을 만드는 이유는 뭘까? 일반적으로 내 제품을 홍보하거나 웹 사이트의 서비스 자체가 비즈니스이기 때문이다. 그렇다면 내 제품, 웹 사이트의 서비스를 효과적으로 홍보하기 위해서는 어떻게 해야할까? 요즘에는 검색이 워낙 활성화되어 있기 때문

웹 표준 웹 표준은 W3C에서 제정하고 있는 공식 표준기술을 얘기하는 것으로 점차 중요도가 높아지고 있다. 웹 접근성 최근 우리의 일상생활을 들여다보면 IT 기술이 사용되지 않는 곳이 없다고 봐도 무방할 정도로 많은 곳에서 다양한 IT기술들이 활용되고 있다. 하지만

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. Transitions (전환효과) (단축)속성의 시작과 끝을 지정하여 중간값을 애니메이션 위 코드는 순서대로 transition이 적용될 속성, 전환효과의 지속시간, 전환효과 타이밍 함수 이다.

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. CSS Grid 2차원 행과 열의 레이아웃 시스템을 제공한다. (flex와 마찬가지로 container와 item으로 구성된다.) 배치와 정렬의 개념을 가질 수 있다. container |값|의