Front End Develop Front End Develop

CSS Image Sprite CSS IMAGE Sprites?HTTP 요청 횟수와 트래픽을 절약하는 기법으로 실제로 적용하기도 매우 쉬워서 많이들 사용하는 것 같습니다.웹 애플리케이션을 최적화하는 것은 유저들을 위한 필수 요소이며, 포털사이트 같은 부분에서는 현재 널리 쓰이고 있습니다. 마젠타 배경(투명, 마스킹)에 여러 아이콘들을 넣어서 하나의 이미지로 쓰는 것이 일반적입니다.여러 이미지를 HTTP 요청 한번으로 로드한 뒤에 'background-position' 속성을 사용하여 더 빠른 웹 브라우징을 가능하게 해줍니다. 스프라이트라는 용어는 비디오 게임에서 가장 자주 사용되는 컴퓨터 그래픽 기술에서 유래했다고 합니다. 컴퓨터가 그래픽을 메모리로 불러 와서 한 번에 그 이미지의 일부만 표시할 수 있다..

함수 선언식 && 표현식 && 호이스팅함수 선언식12345678//Function Declaration(함수 선언식) function FunctionalDeclare(){ return 'My name is Function Declaration';}FunctionDeclare(); // Feed == > 'My name is Function Declaration' Colored by Color Scriptercs 함수 선언은 함수의 정의를 나타내는 문장으로 해석된다.따라서 코드해석에 따른 수행결과가 존재하지 않는다는 의미이기도 하다.Statement라는 개념을 잘 잡고 가야하는데, 함수 선언문이 Statement라고 하는 말은 곧 코드 블럭 자체는 실행가능한 코드가 아니라는 것이다. 콘솔에서 아무리 실행해..

Visual Studio Code 단축키 기본 편집 키 명령 명령 ID ctrl+X 행 삭제 (빈 선택) editor.action.clipboardCutAction ctrl+C 행 복사 (빈 선택) editor.action.clipboardCopyAction ctrl+shift+k 행 삭제 editor.action.deleteLines ctrl+Enter 아래에 행 삽입 editor.action.insertLineAfter ctrl+shift+Enter 위에 행 삽입 editor.action.insertLineBefore alt+Down 행을 아래로 이동 editor.action.moveLinesDownAction alt+Up 행을 위로 이동 editor.action.moveLinesUpAction sh..

user-sacale=no && shrink-to-fit?오늘은 Shirink-to-fit 속성에 대해서 알아보려고 합니다.보통 Meta Tag 중 viewport 속성은 다양하게 있습니다.과거에 필자가 주로 사용하던 user-scalable=no 또한 어느새 사라져있어 깜짝 놀랐습니다.심지어 https://validator.w3.org/ 해당 웹표준 validator에서 검색하면 어느새인가 오류로 표시되고 있었습니다. 왜 사라졌는가?필자도 시력이 그렇게 좋지 않아 그 당시에 iphone4 를 사용하고 있었는데 320px 배율의 작은 크기의 디바이스에서열심히 작은 텍스트를 읽기 힘들어 휴대폰을 확대하려 시도한 적이 있습니다.그렇게 생각하니 시각장애인들은 또 얼마나 힘들까? 하는 생각이 들었습니다.여러분이..

VS CODE와 함께하는 Spring Boot VS CODE 확장 설치1. Spring Boot Support2. Spring Initializr : dependencies를 찾고 설치하는 것을 도와줍니다. 위 두개의 확장을 설치합니다. 간단히 스프링 부트를 체크하기 위해서 vscode 내장된 git clone을 통하여 프로젝트를 복제해서 오겠습니다.Command Palette(Crtl + Shfit + P)를 실행하여 Git:Clone을 선택합니다.입력하라고 하는 URL에 https://github.com/spring-guides/gs-spring-boot.git 를 입력하여 테스트를 하기 위한 프로젝트를 받아옵니다. git이 아직 설치되어있지 않으시다면 https://git-scm.com 해당 링크에..

CSSOM CSS Object Model은 자바 스크립트에서 CSS를 조작 할 수있게 해주는 API 세트입니다. CSS의 경우 DOM과 HTML API의 펜던트이며, 이를 통해 CSS양식을 동적으로 읽고 수정할 수 있습니다. 웹 브라우저가 렌더링 하기 위해서는 이 구조를 거치게 됩니다.DOM과 마찬가지로 트리형태의 구조로 이루어져 있습니다. 웹 브라우저가 렌더링 하는 순서는 다음과 같습니다. The web browser examines your HTML and builds the DOM (Document Object Model). The web browser examines your CSS and builds the CSSOM (CSS Object Model).The web browser combines..

큐(Queue)란 무엇인가?큐는 먼저 들어간 데이터가 먼저 나오는 FIFO(First In First Out)구조이다.우선순위에 따라서 요소 순서가 정해지며, 요소는 중복 될 수 있다는 것이 특징이다.Queue는 줄(line)이라는 의미를 가지고 있다. 가장 오래된 먼저 입력된 데이터를 front라고 하고 가장 최근에 입력된 마지막에 있는 데이터를 rear라고 한다. 데이터 삽입은 rear에서 이루어지고 삭제는 front에서 이루어진다. front와 rear를 관리하는 배열을 이용해서 front 노드와 rear 노드를 관리하는 연결 리스트를 이용할 수 있다. 큐는 insert(삽입), remove(삭제), 읽기(peek)으로 사용할 수 있다. 배열을 통한 Queue 123456789101112131415..

REST의 기본구체적인 뜻은 검색하면 무수히 나오기 때문에 기본적인 핵심만 설명하려 합니다.리소스, 메서드, 메시지 3가지로 이루어져 있다.예를 들어 "이름이 노엘인 사람을 찾아간다" 라는 호출을 하면"사람"은 생성되는 리소스, "찾아간다" 라는 행위는 메서드, 그리고 "이름이 노엘인 사람"은 메시지가 된다. HTTP 메서드REST에서는 행위에 대한 메서드를 HTTP 메서드를 그대로 사용한다. 12345678ex) HTTP POST, http://web/person/{ "person":{ "name":"noel" }} Colored by Color Scriptercs HTTP에서는 여러가지 메서드가 있다.하지만, REST에서는 CRUD에 해당하는 4가지 메서드만 사용한다.여기서 중요한 개념이 Idemop..