자바스크립트 객체내부에서 키를 생략 가능한 경우
자바스크립트의 객체 내부에서 키값이 생략되는 경우를 크게 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
Slot에 대해서
Vue.js에서 슬롯(Slot)은 컴포넌트 간에 콘텐츠를 전달하고 재사용 가능한 컴포넌트를 만들 때 사용하는 중요한 개념입니다.슬롯은 컴포넌트 내에서 콘텐츠를 삽입하거나 덮어쓸 수 있게 해주며, 컴포넌트의 유연성을 높이는 데 도움을 줍니다.Vue.js에서는 기본 슬롯(
CSS의 var()함수 / calc()함수 / vw,vh
var()var() 함수로 css를 변수화 할수있다1.글로벌 변수//선언:root{ --변수명 : css내용; }// 사용div{ background-color:var(--변수명); }2.로컬변수// 선언h2{ --변수명 : css내용
미역국
날씨가 추워져서 고기를 잔뜩 넣은 국을 먹고 싶어서 준비!난이도가 높지않았고 물대신 다시를 준비해서 만드니까 정말 한국의 미역국 맛이 났다 :)재료참기름 2스푼국간장 3스푼소고기 양지 150g미역물 1.3L ( 다시를 사용해도 좋음)다진마늘 0.7 스푼멸치액젖 0.5
이미지 가운데 정렬 CSS (object-fit)
요약fill : 요소의 틀에 맞춰서 늘리거나 줄인다 (확대o/비율x)contain : 요소의 틀안에서 이미지 비율에 맞춰 표시한다(확대x/비율o)cover : 요소의 틀을 가득채울때 까지 확대한다. 가운데정렬됨 (확대o/비율o)이미지 가운데 정렬로 사용한 예제// 이미
TypeScript메모_2
1. : 뒤엔 주로 타입: 뒤에 오는건 대게는 타입이라고 인지, 그러나 경우에 따라 return도 있음:를 사용해서 타입을 지정하는 경우는 아래의 1번이고 반환형의 타입을 지정하는 경우는 ( )뒤에 :를 사용한 2번 예제이다1.변수or함수명:타입2.():반환형위의 2번