Position:abolute사용시 넓이 상속문제 / inset / 화면중앙위치
1.Position:abolute사용시 넓이와 높이 ( width & height ) 상속문제넓이를 width:100%로 만들고 abolute를 지정하니 넓이 100%가 적용이 안되었다이 문제의 원인은 position: absolute 속성이 적용된 엘리먼트의 widt
CSS의 height:100%와 height:100vh의 차이 (+width)
height: 100%부모의 높이 값에 의존한다. 부모에게 height가 설정되어있어야한다( 단위가 %일땐 부모의 값에서 높이를 상속받는다)(height와 width는 상속받지 않는다 %라는 단위가 상속을 받을뿐이다)height: 100vh사용기기의 높이에 의존한다.
Docker-compose에 대해서 (Nuxt Docker설정)
1.Docker-compse.yml에 대해서Docker Compose는 여러 개의 Docker 컨테이너를 하나의 그룹으로 묶어서 쉽게 관리할 수 있게 도와주는 도구Docker Compose를 사용하면 이러한 컨테이너들을 쉽게 설정하고 한 번에 여러 개를 실행하거나 중지
Promise에 대해서 / Promise.all과 Promise.allSettled의 차이
* Promise가 이해되면 위의 이미지가 이해가 된다Promise의 사용이유자바스크립트는 동기적 언어이다그러나 비동기적 함수(API요청)등을 처리하는 경우에는 동작 순서를 보장받지 못한다보장하기 위해서 Promise등을 사용한다Promise의 사용구조에 대해서Prom
Array<T> 및 타입스크립트를 사용하는 예제 연습
타입스크립트로 배열타입을 나타내는 두가지 방법아래의 예제에서 2번 방법 Array<타입명> 은 제너릭을 사용한 배열 타입의 선언방법이다즉 Array[타입명]으로 선언한다면 타입명으로 선언된 내용만이 들어가있는 배열타입을 선언하게 된다interface Bread{};
자바스크립트 객체내부에서 키를 생략 가능한 경우
자바스크립트의 객체 내부에서 키값이 생략되는 경우를 크게 4가지로 예를 들면 아래와같다 (ES6 , 2015부터적용)위의 예제에서 사용된건 아래의 1번과 3번이다1. Computed Property Names (계산된 속성 이름): 객체를 생성할 때, 대괄호 [] 안에
CSS의 미디어쿼리의 max-width와 min-width
자주 헷갈리기 때문에 적어둔다.max-width는 ~까지라는 의미로 해석하면 되고min-width는 ~부터라는 의미로 해석하면 쉽다max-width( to )~420px까지 배경이 파란색@media (min-width:420px){ div{ backgro
모바일 디바이스의 크기
iphone의 Zoom모드로 인한 넓이가 사양과 달라서 고생했다실제로 내가 사용하는 모델은 iphone13인데 현재 내 모바일 확인 사이트를 통해 크기를 확인하면320px이 나왔다. iphone13의 사양설명에는 390px로 나와있는데 이건 왜일까?→ 아이폰에서 zoo
메타태그의 width=device-width에 대해서
1. 기본적으로 웹브라우저의 default viewport크기는 800px~1024px이다(사파리나 크롬은 기본적인 default viewport크기가 980px이다 : 현재 예제에서는 964px)2. 위의 경우에서 만약 모바일 화면을 작성하는 경우 아래와 같이 표시된
Nuxt Icon / Iconify 사용법
1. 해당 링크(NuxtIcon)에서 nuxt3의 nuxtIcon 모듈을 설치한다2. 아래 처럼 사용 가능하다 ( npm의 패키지에 해당 아이콘셋이 설치되어있어야함 )사용 예 <Icon name="uil:github" />아이콘셋 설치 예 "@iconify-json
Vue 3 Composition API의 ref함수
Vue 3 Composition API의 ref함수의 정의(타입스크립트) 해석ref()함수의 정의는 아래와 같다function ref<T>(value: T): Ref<UnwrapRef<T>> interface Ref<T> { value: T }해석하자면 아
for.. in 과 for.. of의 차이
for...of 반복문 ( 배열 ):for...of 반복문은 주로 배열(Array) 또는 이터러블 객체(Iterable)를 순회하는데 사용됩니다 const colors = ["red", "green", "blue"]; for (const color of color