Mobile
-
모바일 모드에서 미디어 쿼리를 사용하여 이미지 중앙에 배치 CSS를 사용하여 웹 페이지에서 이미지를 세로 및 가로 중앙에 배치하려면 다음 CSS 코드를 사용할 수 있습니다. .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* Adjust this value as needed */ } .container img { max-width: 100%; max-height: 100%; } 이 예제에서는 이미지를 담을 클래스 이름이 "container"인 컨테이너 요소를 만듭니다. 컨테이너는 display: flex정렬을 위해 flexbox 속성을 사용할 수 있는 를 사용하여 플렉스 컨테이너로 스타일이 지..
모바일 모드에서 미디어 쿼리를 사용하여 이미지 중앙에 배치모바일 모드에서 미디어 쿼리를 사용하여 이미지 중앙에 배치 CSS를 사용하여 웹 페이지에서 이미지를 세로 및 가로 중앙에 배치하려면 다음 CSS 코드를 사용할 수 있습니다. .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* Adjust this value as needed */ } .container img { max-width: 100%; max-height: 100%; } 이 예제에서는 이미지를 담을 클래스 이름이 "container"인 컨테이너 요소를 만듭니다. 컨테이너는 display: flex정렬을 위해 flexbox 속성을 사용할 수 있는 를 사용하여 플렉스 컨테이너로 스타일이 지..
2023.06.29 -
모바일 테스트 웹이나 SPA 개발하기 위해서는 모바일로 테스트는 필수인데, 보통은 모바일 웹뷰를 테스트하기 위해서 크롬이나 파이어폭스로 모바일 웹뷰로 확인하는데 간혹 어떠한 문제들은 실제 모바일 환경에서만 발생하기도 한다. 이러한 문제들은 cross browser testing이나 Browserstack 툴들에도 확인되지 않기 때문에 실제 모바일 환경에서 확인해야하만 한다. 다음은 실질적인 모바일 환경에서 테스트하는 방법을 서술해보았다. 1. LAMBDATEST LT Browser 손쉽게 여러개의 디바이스(실제 환경과 조금 다를 수 있음)를 테스트할 수 있고, 캡쳐 및 동영상 녹화 기능도 자체적으로 탑재된 브라우저이다. 그리고 로그인하면 다른 툴(Github, Jira 등)에도 공유가능하다. LT 브라우..
모바일 기기로 테스트 및 디버깅하기모바일 테스트 웹이나 SPA 개발하기 위해서는 모바일로 테스트는 필수인데, 보통은 모바일 웹뷰를 테스트하기 위해서 크롬이나 파이어폭스로 모바일 웹뷰로 확인하는데 간혹 어떠한 문제들은 실제 모바일 환경에서만 발생하기도 한다. 이러한 문제들은 cross browser testing이나 Browserstack 툴들에도 확인되지 않기 때문에 실제 모바일 환경에서 확인해야하만 한다. 다음은 실질적인 모바일 환경에서 테스트하는 방법을 서술해보았다. 1. LAMBDATEST LT Browser 손쉽게 여러개의 디바이스(실제 환경과 조금 다를 수 있음)를 테스트할 수 있고, 캡쳐 및 동영상 녹화 기능도 자체적으로 탑재된 브라우저이다. 그리고 로그인하면 다른 툴(Github, Jira 등)에도 공유가능하다. LT 브라우..
2022.06.27