웹솔루션개발 25년 노하우! 해피CGI의 모든것

위의 테이블은 css로 반응형 스타일을 주어 작은 화면에서 아래의 이미지와 같이 한줄의 내용이 모두 합쳐져 하나로 출력됩니다. 사이트 또는 첨부파일을 받아보시면 자세한 소스를 확인하실 수 있습니다. 아래의 미디어 쿼리 소스로 700px 이하의 너비에서 내용이 합쳐지도록 조절되며 html 소스는 크게 2부분으로 구성되어 있습니다. 1) 표 타이틀(table head) 2) 표 내용 부분 화면의 너비에 따라 출력되는 타이틀이 다르기 때문에 표 타이틀이 내용부분에서도 반복되는 것을 볼 수 있습니다. 해당 부분을 참고 하셔서 본 반응형 테이블 소스를 유용하게 사용해보세요.

반응형으로 디바이스 크기에따라 다르게 출력되는 그리드 디자인입니다.데모사이트에서 압축파일을 받으실 수 있으며 압축해제후 css/component.css파일과 index.html 파일에서 html코드 및 css를 확인하실 수 있습니다. @media screen and (max-width: 1190px) { .cbp-rfgrid li { width: 20%; /* Fallback */ width: -webkit-calc(100% / 5); width: calc(100% / 5); } } @media screen and (max-width: 945px) { .cbp-rfgrid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc..

반응형 디자인에 강한 템플릿형 디자인을 확인할 수 있는 사이트입니다. 실제적이고 기술적인 디자인이 필요할 때 확인하면 유용합니다. webdesign-inspiration 사이트는 반응형 디자인에 강한 템플릿형 디자인들을 확인하기에 좋은 사이트입니다. 상단의 desktop, tablet, mobile 버튼을 클릭하면 해당 기기에 맞는 디자인 스타일을 검색할 수 있으며 mix 버튼을 클릭할 경우, 위 이미지와 같이 모든 디자인 스타일을 한눈에 볼 수 있습니다. 최상단의 category 버튼을 클릭하면 유형별, 색상별, 산업별, 스타일별로 원하는 디자인을 선택하여 검색할 수 있어서 더욱 편리하게 디자인 검색이 가능한 사이트입니다. ^^

브라우저 창 크기를 조정하여 열 조정되는 반응형 레이아웃 css입니다. https://webdesignerwall.com/tutorials/responsive-column-layouts 미디어쿼리를 이용하여 뷰포트 너비에 따라 4열에서 3열 , 3열에서 2열로 자동 변경되는 반응형 열 레이아웃 CSS입니다. 복잡한 구조를 간단한 CSS를 이용하여 구성이 가능합니다. IE 11이하에서는 지원하지 않으나, 관련 자바스크립트 사용시 지원가능합니다.

* flexisel 소개 - 반응형 회전식 슬라이드 쇼 jquery plugin * License - MIT License * 이용방법 - 이용방법은 간단합니다 첨부된 압축파일을 다운받아 해제하여 필요한 jquery, js, css 파일을 작업해야될 페이지에 옮겨놓습니다 추가되는 코드는 jquery , js, css 파일 선언부와 슬라이드되어야될 영역별 코드 삽입 스크롤이 정상적으로 작동될 수 있도록 jquery window load 이벤트를 연결하여 flexisel 스크립트를 삽입할 수 있도록 합니다 flexisel 가 실행되고 설정할 수 있는 옵션은 무한스크롤, 자동스크롤, 간격설정, 이동속도, 보여져야될 이미지 개수 등이 있으며 좀 더 자세한 옵션내용의 확인은 첨부된 파일 README.md 문서를 ..

자신의 프로필 홈페이지를 반응형으로 손쉽게 만들수 있는 웹페이지 코딩 샘플입니다. 사이트내 데모 소스코드를 보시면 됩니다. 기본 레이아웃 소스코드 부터 탭메뉴 jQuery 동적 소스까지 구성을 위한 소스코드 샘플을 제공하고 있습니다. 샘플 소스로 간편하게 반응형 홈페이지를 제작할 수 있습니다. 해당 소스샘플로 다양한게 이용하면 좋은 자료네요.

유튜브를 예를들어 아래와같이 공유코드를 복사하여 타 게시판에 복사하여 붙여넣으면 유튜브에서 지정한 사이즈로 맞춰져 고정된 사이트가 입력되어 가로사이즈가 지정된 사이즈보다 작을경우 본문글이 깨져보이는 증상이 보신적이 있으실것입니다. 본 서비스는 공유코드를 입력하면 유튜브 및 다양한 컨텐츠의 사이즈를 반응형에 맞춰주는 소스를 만들어내어 어떤 해상도에서도 문제없이 확인되는 소스로 자동 변경해줍니다. 위 코드를 본 서비스의 웹페이지로 접속하여 위와같이 입력후 embed 버튼을 클릭하면 아래와 같은 embed 코드를 자동으로 생성해줍니다. 본 소스를 다른 게시판에 복사하여 붙여넣게되면 반응형으로 어떤 화면에서도 깨짐이 없도록 지원됩니다.

* License - MIT License * jQuery Responsive Tabs 설명 - javascript/jQuery 사용 - 데스크톱 / 태블릿 /모바일 에 css사용 - 탭이벤트에 대한 콜백이벤트 제공 - URL 해시로 탭을 열 수 있음 - 탭접기 기능 - 탭사용 중지 기능 - 크로스 브라우저 호환성(IE7+, Chrome, Firefox, Safari 및 Opera) * 사용방법 - jQuery 최소 1.7.0 버전 이상필요 - 첨부된 압축파일을 압축을 해제하여 js,css 폴더안에 jquery.responsiveTabs.js , jquery-2.1.0.min.js , responsive-tabs.css 파일을 호출 - HTML 마크업 사용 jquery 함수를 사용하여 선택한 요소에 대한..

반응형 디자인에 관한 패턴과 자료를 모아둔 사이트입니다. 메인페이지 접속을 해 Patterns이나 resources를 클릭하여 원하는 페이지로 이동할수 있습니다. ＊Patterns 메인페이지 LAYOUT, NAVIGATION, IMAGES, MEDIA/DATA,FORMS, TEXT, MODULES 등 다양한 자료를 확인하실 수 있으며 원하는 항목을 클릭하면 적용방법 또는 코드와함께 자세한 설명을 호 Grid block with section titles를 클릭한 화면이며 위 Change View를 클릭하여 다양한 형태로 데모를 확인하실 수 있습니다. ＊Resources 메인페이지 각각의 카테고리에 있는 타이틀을 클릭하여 포럼에 등록되어 있는 글들을 확인하실 수 있습니다.