개발에 대한 두서 없는 이야기

키보드 자판이 열리면 화면이 작아지면서 밀리게 되는데 bottom으로 준 경우 해상도가 작아지는 효과(리사이즈 이벤트도 발생)하기 때문에 top으로 주지 않은 경우 의도하지 않은곳에 위치하게 되는경우가 있다. top으로 주거나. resize이벤트가 발생하니, 리사이즈 이벤트에서 그에 맞게 좌표를 수정하는 스크립트를 넣어야 한다

.img_wrapper {padding-top: calc(100% / 101 * 75);} .img_wrapper img{position: absolute;width:100%;height:100%;top:0;left:0;} padding-top의 100% 값은 부모창의 크기이므로 레이아웃에 따라 고정픽셀이나 위와 같이 퍼센트로 입력해도 된다. 101 * 75 (101 * 75비율) 16 * 9(16 * 9) 비율 등 해당 부분을수정해주면 된다.

이미지가 흘러가는 이미지가 아닌 해당 영역의 전체 배경을 채우는 이미지가 돌아가야 할때. 이미지가 양 끝이 이어지는 이미지로 하게 되는 이미지의 경우 높이를 지정해주고 keyframe으로 애니메이션을 주어야 한다 .test{ background:url('test.png'); width:100%; height:1200px; position:absolute; top:0; background-size : 100% 1200px; //좌우넓이는 100%로 높이는 이미지의 원래 높이를 주자 left:0; animation: displace 3s linear infinite; } @keyframes displace { from { background-position: center 0; } to { ..

@media screen and (hover: none) and (pointer: coarse) { //code } 기존의 반응형 웹에서는 해상도(가로)를 기준으로 반응하여 레이아웃을 짠다. 하지만 코딩을 하다보면 해상도와 별개로 PC와 모바일기기를 별개의 레이아웃을 보여줘야할 때가 있으며, 해당 부분은 css만으로 처리가 어렵기 때문에 자바스크립트, 또는 백엔드언어인 JSP, PHP, ASP 등에서 구분지어 별개의 페이지를 출력하거나 소스를 짜는 경우가 있다. 위에 보여진 미디어쿼리는 모바일기기와 PC에서 가장 큰 이벤트 차이인 호버와 포인터 이벤트가 해당 기기에 있는지 없는지를 구분하는 미디어쿼리이다. 해상도에 따라 반응하는것이 아닌 모바일기기이냐 PC이냐에 따라 반응하는 레이아웃을 만들고 싶다면 위..

webkit-appearance: none; 아이폰, IOS계열 운영체제에서 사용하는 옵션인데 그 외의 운영체제의 브라우저에서 사용될때도 반영되어 css가 오동작 일으키는 경우가 있다. 혹시라도 브라우저에서 체크박스나 라디오 버튼이 클릭이 되지 않거나 보이지 않는 경우 해당 부분이 적용되어있는가 확인해보는 것이 좋다