Front-end31 [CSS] 이미지 스프라이트 (Image Sprite) 이미지 스프라이트 (image sprite)란? 스프라이트(sprite)는 컴퓨터 그래픽스 용어로 비트맵 이미지나 애니메이션을 합성하는 기술을 뜻한다. 웹에서 이미지 스프라이트란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 것을 의미한다. 즉 여러 사진들을 붙여서 하나의 이미지를 만든다는 것이다. 아래 사진은 네이버에서 사용 중인 스프라이트 이미지 파일이다. 원리 이미지 스프라이트는 스프라이트 이미지에서 사용할 이미지의 정확한 width, height를 알아야하며, 스프라이트 이미지 상에서의 position 값도 알아야한다. 이후 적절한 background-position값과 width, height값을 적용하면 필요한 이미지만을 출력할 수 있다. 장점과 단점 장점 여러 이미지를 하나의 이미지로 .. 2022. 5. 13. [CSS] 반응형 웹 디자인 (Responsive Web Design) 반응형 웹 디자인 (Responsive Web Design)이란? 반응형 웹 디자인은 HTML과 CSS를 이용하여 구현할 수 있는 기술이다. 웹 페이지를 시청하는 사용자의 기기의 크기에 맞게 콘텐츠를 조정하는 것을 반응형 웹 디자인이라한다. Viewport (뷰포트) viewport (뷰포트)는 웹 페이지에서 사용자가 볼 수 있는 영역이다. 즉 데스크탑에서는 브라우저 창의 크기, 모바일 화면에서는 해당 기기 화면의 크기이다. HTML5에서는 meta태그를 통하여 viewport를 제어 할 수 있다. width=device-width : 기기의 화면 너비에 따르도록 웹 페이지의 width를 설정한다. initial-scale=1.0 : 페이지가 로드될 시 확대/축소 수준을 설정한다. 위 사진은 동일한 HT.. 2022. 5. 1. [MDN][CSS] MDN Web Docs CSS 링크 CSS: Cascading Style Sheets | MDN Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌 developer.mozilla.org 1. CSS first steps CSS first steps overview What_is_CSS? Getting_started with CSS How_CSS_is_structured How_CSS_works Using_your_new_knowledge 2. CSS building blocks CSS building_blocks overview Casca.. 2022. 4. 17. [JS] 자바스크립트 모듈 모듈 (Module) 모듈이란 개발하는 애플리케이션의 크기의 증가로 인해 파일을 여러 개로 분리할 때 분리된 파일을 뜻한다. 모듈은 파일 하나이며, 클래스 또는 여러 함수로 구성된 라이브러리로 구성된다. export & import export와 import를 사용하면 다른 모듈에 있는 변수나 함수에 접근하여 외부 모듈의 기능을 사용할 수 있다. html 파일에서 모듈을 import할 때에는 script에 type="module"을 설정하여야 한다. export (모듈 내보내기) 외부 모듈의 변수나 함수에 접근할 수 있다. import (모듈 가져오기) 외부 모듈의 기능을 가져올 수 있다. //module.js export function alertName(name) { alert(`${name}님 안녕.. 2022. 3. 17. [JS] 자바스크립트 scope 들어가기 전 스코프(scope)는 범위의 뜻을 가지며, 해당 변수가 접근할 수 있는 변수, 객체, 함수의 집합을 의미한다. 스코프를 이해하기 위해서는 먼저 전역 변수와 지역 변수를 이해해야한다. 전역 변수와 지역 변수 변수는 유효 범위(variable scope)에 따라 다음과 같이 구분된다. 지역 변수(local variable) 전역 변수(global variable) 지역 변수(local variable) 지역 변수란 함수 내에서 선언된 변수를 의미한다. 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라진다. 전역 변수(global variable) 전역 변수란 함수의 외부에서 선언된 변수를 의미하며, window 객체에 변수를 생성하는 것이다. 전역 변수는 어느 .. 2022. 3. 2. [JS] 자바스크립트 클래스 클래스 (Class) 클래스는 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 템플릿이라고 볼 수 있다.. 이러한 클래스는 객체가 아니며 객체를 생성하는 생성자 함수와 같이 함수의 한 종류이다. //클래스 class User { constructor(name) { this.name = name; } info() { alert(this.name); } } //클래스는 함수이다. console.log(typeof User); //function //클레스는 생성자 함수와 동일하다. console.log(User === User.prototype.constructor); //true //클래스 내부에서 정의한 메소드는 prototype에 저장된다. console.log(User.prototype.i.. 2022. 3. 2. [JS] 자바스크립트 객체 객체 (Object) 객체란 JS 데이터 유형 중 하나이며, 프로퍼티(속성)와 메서드(함수)의 집합이다. 따라서 JS에서 프로퍼티나 메서드를 지정할 수 없는 프리미티브를 제외한 거의 모든 것이 객체라 볼 수 있다. 프리미티브 (primitive) 사용되는 기초 요소를 프리미티브라고하며, JS의 프리미티브는 객체가 아니다. JS의 프리미티브는 5가지 기본 데이터 유형인 string, number, boolean, null, undefined 이다. 프로퍼티(property) 프로퍼티는 속성이라고도 불리며, 객체에서 값을 지정한 변수를 프로퍼티라 한다. 다음 예제는 person이라는 객체를 리터럴로 생성하는 것으로, 프로퍼티는 다음과 같다. const person = { firstName: "홍", //fi.. 2022. 2. 23. [JS] 자바스크립트 AJAX AJAX (Asynchronous JavaScript And XML) 란? AJAX란 서버와 통신하기 위해 XMLHttpRequset 객체를 사용하며, 이를 통해 동적인 웹 페이지를 개발하는 기법이다. 즉 AJAX를 사용하면 서버와 통신하여, 데이터를 받아와 새로고침 없이 일부분만 갱신할 수 있게 할 수 있다. AJAX로 서버와 전송가능한 데이터 형태는 다음과 같다. JSON XML HTML Text 파일 등 AJAX 장점 & 한계 장점 웹 페이지 전체를 새로고침하지 않고, 웹 페이지 일부분만 갱신 가능 웹 페이지가 로드된 후 서버로 데이터 요청 및 수신가능 백그라운드 영역에서 서버로 데이터 전송 가능 한계 AJAX는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스 구현 불가 바이너리.. 2022. 2. 15. [JS] 자바스크립트 DOM 이벤트 DOM 이벤트 DOM 이벤트는 HTML 요소를 클릭할 때와 같이 이벤트가 발생할 때 실행할 자바스크립트를 설정하는 것이다. 이 때 발생할 수 있는 대표적인 이벤트는 다음과 같다. 마우스 이벤트 - mouseenter, mouseover, onclick... 폼 이벤트 - reset, submit, focus... 키보드 이벤트 - keydown, keyup... 문서 이벤트 - DOMContentLoaded... CSS 이벤트 - transitionend... 드래그 앤 드롭 이벤트 - dragstart, drag, dragleave, drop... 더 많은 HTML DOM 이벤트 확인하기 이벤트 핸들러 핸들러(handler)란 이벤트가 발생하였을 때 실행되는 함수이다. 따라서 이벤트 핸들러는 이벤트 발.. 2022. 2. 10. 이전 1 2 3 4 다음
