전체 글 (265) 썸네일형 리스트형 [CSS] background-position ▶ background-position - background-position을 통해 배경 이미지가 해당 요소의 어느 부분에 위치할 것인지에 대한 실질적인 위치 정보를 지정 가능. - right top은 우측 상단을 의미. - 배경 이미지의 위치를 설정하는 것. [속성 값] - %: 기본값은 0% 0%. - 앞의 값은 x축, 뒤의 값은 y축을 의미. - 왼쪽 상단 모서리는 0% 0%, 오른쪽 하단 모서리는 100% 100%. - 방향: 방향을 입력하여 위치 설정. - top, bottom, left, right, center. - 100% 100% = right bottom. - 단위: px, em 등의 단위로 지정. [사용 방법] - 속성 값이 방향일 경우. background-position: 방향1.. [CSS] background-repeat ▶ background-repeat - 배경 이미지의 반복을 설정 [속성 값] - repeat: 배경 이미지를 수직, 수평으로 모두 반복. 기본 값. - repeat-x: 배경 이미지를 수평으로 반복. - repeat-y: 배경 이미지를 수직으로 반복. - no-repeat: 반복 없음. [사용 예시] - background-repeat: repeat-x; - background-repeat: repeat-y; - background-repeat: no-repeat; [CSS] background-image ▶ background-image - 요소의 배경에 하나 이상의 이미지 삽입. - 하나의 이미지만 삽입하는 것이 보통이지만 하나 이상을 삽입할 수도 있음. [속성 값] - none: 이미지 없음. 기본값 - url("경로"): url() 함수의 인자 값으로 경로를 지정. [사용 방법] background-image: url("경로"); [사용 예시] .box{ background-image: url("../image.jpg"); width: 100px; height: 100px; } // 개별 속성 사용 예시 .box{ background-image: url("../image1.jpg"), url("../image2.jpg"), url("../image3.jpg"); } // 단축 속성 사용 예시 .bo.. [CSS] background-color ▶ background-color - 요소의 배경 색상을 지정. - 개별 속성. [속성 값] - 색상: 값을 입력해 요소의 배경으로 해당 색상 지정. - transparent: 투명하다는 의미. 기본 값. [CSS] background ▶ background - 요소의 배경을 설정. - background-color, background-image, background-repeat, background-position, background-attachment의 개별 속성들의 집합인 단축 속성. [background의 개별 속성] - background-color: 배경 색상 지정. 기본 값: transparent. - background-image: 하나 이상의 배경 이미지. 기본 값: none. - background-repeat: 배경 이미지의 반복. 기본 값: repeat. - background-position: 배경 이미지 위치. 기본값 0 0. - background-attachment: 배경 이미지의 스크롤 여부(특성). .. [CSS] position의 display 수정 ▶ position의 display 수정 - position: absolute, position: fixed이 적용된 요소는 display 속성의 값이 대부분 block으로 수정됨. - cf. float 속성과 유사. float의 display 수정: developing-move.tistory.com/124 [CSS] float의 display 수정 ▶ CSS float 참조: developing-move.tistory.com/123 - float 속성이 추가된 요소는 display 속성의 값이 대부분의 경우 block으로 수정됨. - 의 전형적인 inline 속성. - 에 display: block; 적용 시 결과 화.. developing-move.tistory.com - position: stati.. [Node] Promise.race 사용해보기 promise.all과 문법이 유사 다른 점은 promise.all은 모든 promise가 완료될 때까지 기다리는 반면 promise.race는 가장 먼저 완료된(resolve)가 리턴 됨 예시 소스 'use strict' const promise1 = new Promise((resolve, reject) => { setTimeout(() => resolve(2000),2000) }) const promise2 = new Promise((resolve, reject) => { setTimeout(() => resolve('즉시'),0) }) Promise.race([promise1, promise2]).then(value => console.log(value)); [Node] promise.all 사용해보기 promise.all 이란? promise를 통해 비동기 처리할 때 다수의 promise가 완료될 때까지 모든 promise를 대기시키고 완료가 될 때 해당하는 값을 리턴 받을 수 있도록 하는 함수 배열 안에 있는 모든 promise가 완료될 때까지 기다렸다가 모두가 실행됐을 경우 값을 리턴 한가지 이상 혹은 다수의 비동기 promise에 대해서 모든 작업의 완료를 보장받을 수 있음 다양한 API를 호출하고 여러가지 데이터를 조합할 경우에 자주 쓰임 예시 const promise1 = new Promise((resolve, reject) => resolve('즉시 호출')); const promise2 = new Promise((resolve, reject) => { setTimeout(() => res.. 이전 1 ··· 12 13 14 15 16 17 18 ··· 34 다음
