반응형웹 - 미디어쿼리

반응형 웹 디자인 다양해지는 사용자 브라우저 환경에 따라 웹사이트를 제작하는 데는 한계가 있다. 미디어쿼리를 사용하여 화면 크기에 맞게 화면 요소들을 재배치하고 각 요소의 표시 방법만 다르게 해서 사이트를 구현할 수 있다. 미디어쿼리 미디어쿼리란 웹을 접속하는 기기의 화면 해상도에 따라 각각 다른 CSS를 적용해주는 기능을 한다. media 속성에는 all, screen, print 등의 값을 지정하고 웹이 표시되는 대상별로 디자인을 달리 지정해 줄 수 있다. 미디어쿼리는 같은 screen이라도 기기의 해상도에 따라 CSS를 다르게 지정할 수 있다. ＊ 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 함 ＊ 뷰포트(View Port) 너비 같은 여러 장치들의 조건에 맞춰 특정한 CSS 스..

2022.01.05

스크롤바 숨기기

스크롤바 숨기기 ul { scrollbar-width: none; -ms-overflow-style: none; } ul::-webkit-scrollbar { display: none; }

2022.01.04

div 팝업 시 body scroll 비활성화

div 팝업 시 body scroll 비활성화 $("html, body").css({"overflow":"hidden"}); // body scroll 비활성화 $("html, body").css({"overflow":""}); // body scroll 활성화

2022.01.03

youtube iframe 동영상 반응형 비율

youtube 동영상 반응형 비율 CSS .video-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;} .video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

2021.12.24

mobile 코딩 시 초기 세팅

mobile 코딩 시 초기 세팅

2021.12.23

모바일 CSS 스타일링

모바일 CSS 스타일링 모바일의 화면은 좌우로 좁다. 따라서 길게 스크롤이 발생할 수 있다. 바로가기 메뉴처럼 썸네일 로 만들어진 메뉴를 아래로 배치하면 사용자들이 보지 못하고 넘어갈 가능성이 있 기때문에 적절한 메뉴갯수 와 함께 이미지를 사용해야 한다. 각 디바이스에 맞는 고정형 사이트가 있고 어떤 디바이 스에서 보던 잘 맞는 가변형 사이트가 있다. 서브페이지 에서는 반드시 뒤로가기 버튼과 첫화면으 로 돌아가는 버튼이 존재해 야 한다. 가로보기와 세로보기 테스트를 해도 화면벗어남이나 깨짐이 없어야 한다. 고정형 px값을 사용하지 않고 유동형 레이아웃(%)를 사용한다.

2021.12.22