[css]뷰포트 미디어쿼리 사용하기(ft. 반응형웹 만들기) 화면 크기에 반응하여 화면 요소들을 자동으로 바꿔 사이트를 구현하는 것이 반응형 웹입니다. PC 브라우저로 접속하든 모바일 브라우저로 접속하든 사용자의 접속 환경에 맞추어 사이트 레이아웃을 자연스럽게 바꾸어 보여주는 웹 디자인을 반응형 웹 디자인이라고 합니다. 반응형 웹을 제작하기 위해서 기본적으로 알아두어야 할 것이 뷰포트(viewport)와 미디어쿼리(mediaqueri) 입니다. 뷰포트 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역입니다. 뷰포트 지정 방법 아래는 가장 일반적으로 사용되는 설정 입니다. · width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정합니다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다. · initial-scale=1 : .. [js/jQuery] 반응형 캐러셀(carousel) 슬라이드 구현하기 반응형 캐러셀 슬라이드를 구현합니다. swiper, slick slide, owl slide와 같은 자바스크립트 라이브러리를 사용하면 매우 편하지만, 자바스크립트와 제이쿼리를 이용하여 슬라이드를 직접 구현 합니다. 슬라이드 작동 조건: 1. 반응형 슬라이드: 창 크기에 맞추어 슬라이드의 이미지 사이즈 자동 조정 2. 자동 플레이 슬라이드: 일정 시간마다 슬라이드 좌에서 우로 이동 3. 슬라이드 변경 시, 아래 페이지 버튼 색깔 변동 4. 페이지 버튼 클릭마다 각 해당 슬라이드로 바로 이동 이제 시작해 볼까요! 아래의 이미지 파일을 만들어 사용하였습니다. 슬라이드의 배열과 동작 순서는 아래와 같습니다. 캐러셀 슬라이드(carousel slide) 예제 html css * {margin: 0;padding:.. [js/jQuery] 자바스크립트 이용한 반응형웹 이미지 가운데 정렬 반응형 사이트에서 javascript/jQuery를 이용한 가운데 정렬입니다. 반응형 웹에서 이미지 또는 컨텐츠를 같은 크기의 비율로 수직 수평 가운데 위치하는 것은 보기에는 쉬워보이지만 의외로 html, css 만으로는 구현하기 쉽지 않습니다. 현재 구글링 정보를 통하여 그때그때 적용할 순 있어도, 사용자의 기기에 따라 다르게 반응하는 반응형 웹에서 자바스크립트 사용없이 쓰기에는 무리가 있습니다. 그래서 반응형 웹에서 사용할 수 있는 자바스크립트, 제이쿼리를 이용한 반응형 웹에서 이미지 수직 수평 가운데 정렬을 구현하겠습니다. 반응형 이미지 수직 수평 가운데 정렬 방법 반응형웹 적용을 위한 필수 요소 viewport 삽입 사이에 아래 메타태그를 추가하세요. html (css는 inline스타일로 적용).. 이전 1 다음 반응형
