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. 위의 경우에서 만약 모바일 화면을 작성하는 경우 아래와 같이 표시된
CSS의 var()함수 / calc()함수 / vw,vh
var()var() 함수로 css를 변수화 할수있다1.글로벌 변수//선언:root{ --변수명 : css내용; }// 사용div{ background-color:var(--변수명); }2.로컬변수// 선언h2{ --변수명 : css내용
이미지 가운데 정렬 CSS (object-fit)
요약fill : 요소의 틀에 맞춰서 늘리거나 줄인다 (확대o/비율x)contain : 요소의 틀안에서 이미지 비율에 맞춰 표시한다(확대x/비율o)cover : 요소의 틀을 가득채울때 까지 확대한다. 가운데정렬됨 (확대o/비율o)이미지 가운데 정렬로 사용한 예제// 이미
clientX,offsetX,pageX,screenX의 차이 (+ offsetHeight)
5/20에 정리한 내용에 재정리함아래의 내용은 마우스 event의 객체로부터 얻는것이 가능하다 const element = document.getElementById('myElement'); element.addEventListener('mousemove',