profile
디자인하는 Frontend Developer.
태그 목록
전체보기 (28)CSS(13)JavaScript(11)자바스크립트(9)cascading style sheets(8)html(7)js(4)HyperText Markup Language(3)web(3)html TAGS(2)element(2)const(2)let(2)웹 접근성(2)Tags(2)tag(2)git(1)conditional operator(1)switch문(1)CSS 속성 선택자(1)animation(1)function(1)크로스브라우징(1)rest 파라미터(1)destructuring(1)배열(1)전역변수의 문제점(1)variable(1)보조기기 사용자(1)CSS em(1)논리연산자(1)default parameter(1)스코프(1)flex box(1)Box Model(1)for문(1)버전관리(1)접근성 개선(1)브라우저(1)rest parameter(1)(1)연산자(1)CSS Box-sizing(1)blur(1)일치연산자(1)CSS - position(1)프로토타입(1)backdrop-filter(1)CSS padding(1)vertical-align(1)css 상속(1)CSS 단위(1)while문(1)Prototype(1)CSS vw(1)Spread(1)CSS Declaration(1)Flex(1)css 선택자(1)img 공백(1)그룹연산자(1)블러처리(1)매개변수 기본값(1)Operators(1)semantic markup(1)동등연산자(1)var(1)클로저(1)제어문(1)filter(1)content-box(1)CSS background(1)css float(1)data type(1)CSS 박스모델(1)block box(1)ATS(1)함수(1)this(1)arrow function(1)DOM(1)블러효과(1)if문(1)background(1)semantic(1)markup(1)filter:blur(1)렌더링(1)font(1)Web 접근성 개선(1)CSS rem(1)CSS margin(1)생성자 함수(1)Web Summary(1)CSS vh(1)데이터타입(1)화살표 함수(1)CSS font(1)css selector(1)접근성(1)템플릿 리터럴(1)array(1)spread operator(1)렌더링 과정(1)github(1)if...else문(1)seo(1)semantic web(1)CSSOM(1)google 검색엔진 최적화(1)변수(1)CSS 복합 선택자(1)일급객체(1)search engine optimization(1)border-box(1)디스트럭처링 할당(1)grid(1)삼항조건연산자(1)검색엔진 최적화(1)웹 표준(1)스프레드 문법(1)Transitions(1)CSS 선언방식(1)closure(1)디스트럭처링(1)시멘틱 마크업(1)CSS 가상 선택자(1)웹표준(1)scope(1)
post-thumbnail

브라우저의 렌더링 과정

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

2021년 6월 30일
·
0개의 댓글
post-thumbnail

배열

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

2021년 6월 25일
·
0개의 댓글
post-thumbnail

클로저

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

2021년 6월 2일
·
0개의 댓글
post-thumbnail

생성자 함수, 프로토타입

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

2021년 5월 28일
·
0개의 댓글
post-thumbnail

스코프

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

2021년 5월 26일
·
0개의 댓글
post-thumbnail

함수

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

2021년 5월 22일
·
0개의 댓글
post-thumbnail

제어문

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

2021년 4월 23일
·
0개의 댓글
post-thumbnail

연산자와 타입변환

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

2021년 4월 8일
·
0개의 댓글
post-thumbnail

데이터 타입

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

2021년 4월 7일
·
0개의 댓글
post-thumbnail

변수

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

2021년 2월 25일
·
0개의 댓글
post-thumbnail

Git은 왜 필요한가? (feat. git 사용법)

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

2021년 2월 15일
·
0개의 댓글
post-thumbnail

배경 이미지에 blur 처리를 하고 싶어요.

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

2021년 2월 8일
·
0개의 댓글
post-thumbnail

바깥 block box와 이미지 사이에 공백이 생겼어요. (feat. vertical-align)

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

2021년 2월 1일
·
0개의 댓글
post-thumbnail

보조기기 사용자들을 위해 접근성을 개선하고 싶어요.

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

2021년 1월 26일
·
0개의 댓글
post-thumbnail

웹 문서(HTML & CSS) 작성 사전준비

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

2021년 1월 18일
·
0개의 댓글
post-thumbnail

SEO (Search Engine Optimization : 검색엔진 최적화)

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

2021년 1월 11일
·
0개의 댓글
post-thumbnail

시맨틱 웹 (Semantic Web)과 웹 접근성

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

2020년 12월 31일
·
0개의 댓글
post-thumbnail

전환효과 및 애니메이션

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

2020년 12월 28일
·
0개의 댓글
post-thumbnail

CSS Grid

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

2020년 12월 24일
·
0개의 댓글
post-thumbnail

CSS flex

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. flex-box 수평, 수직 정렬과 관련된 속성 (container, item로 이루어짐) display: flex : container가 block (flex container로 정의함!) di

2020년 12월 21일
·
0개의 댓글