강좌게시판

제목 Responsive-Grid-System Demo
글쓴이 darkninja 작성시각 2023/07/02 00:33:22
댓글 : 2 추천 : 0 스크랩 : 0 조회수 : 9270   RSS

Codeigniter 4 Responsive Grid System demo

https://github.com/darkninjaaa

html + javascript


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
	<title>grid</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<style type="text/css" media="screen">
		input, button, span, p,	textarea, div {
			font-size: 11pt;
		}
		input, div { 
			margin: 0px 0px 0px 0px; 
			padding: 0px;
		}
		button { 
			margin: 0px; 
			padding: 1px;
			border: 1px solid #777;
			background: #ccc;
		}
		button:hover { 
			background-color: #A9BCEF; 
			cursor:pointer;
		}
		p { 
			margin: 1px 1px 1px 1px; 
			padding: 2px;
		}
		textarea {
			border: 1px solid #999999;
			margin: 0px 0px 0px 0px;
			padding: 2px;
			overflow: auto; 
		}
		textarea {
			tab-size : 4;
			-o-tab-size : 4;
			-moz-tab-size : 4;
			-webkit-tab-size: 4; 
		}
	</style>
</head>

<body>

	<form action="" id="grids" name="grids" method="post">
		<p>
			<strong><span>source : </span></strong>
			<a target="_blank" href="http://www.responsivegridsystem.com">responsivegridsystem</a>
			<a target="_blank" href="https://github.com/johnpolacek/extra-strength-responsive-grids">extra-strength-responsive-grids</a>
		</p>
		<p>
			<strong><span>css grid name : </span></strong>
			<input type="text" id="grids_name" name="grids_name">
			<strong><span>grid columns : </span></strong>
			<input type="number" id="grids_columns" name="grids_columns" maxlength="3" oninput="checkMaxLength(this)">
		</p>
		<p>
			<strong><span>margin(%) top : </span></strong>
			<input type="text" id="margin_top" name="margin_top" size="10" maxlength="10">
			<strong><span> right </span></strong>
			<input type="text" id="margin_right" name="margin_right" size="10" maxlength="10">
			<strong><span> bottom </span></strong>
			<input type="text" id="margin_bottom" name="margin_bottom" size="10" maxlength="10">
			<strong><span> left </span></strong>
			<input type="text" id="margin_left" name="margin_left" size="10" maxlength="10">
		</p>
		<p>
			<strong><span>padding(px) top : </span></strong>
			<input type="text" id="padding_top" name="padding_top" size="10" maxlength="10">
			<strong><span> right </span></strong>
			<input type="text" id="padding_right" name="padding_right" size="10" maxlength="10">
			<strong><span> bottom </span></strong>
			<input type="text" id="padding_bottom" name="padding_bottom" size="10" maxlength="10">
			<strong><span> left </span></strong>
			<input type="text" id="padding_left" name="padding_left" size="10" maxlength="10">
		</p>
		<p>
			<strong><span>margin(px) innercol top : </span></strong>
			<input type="text" id="margin_innercol_top" name="margin_innercol_top" size="10" maxlength="10">
			<strong><span> right </span></strong>
			<input type="text" id="margin_innercol_right" name="margin_innercol_right" size="10" maxlength="10">
			<strong><span> bottom </span></strong>
			<input type="text" id="margin_innercol_bottom" name="margin_innercol_bottom" size="10" maxlength="10">
			<strong><span> left </span></strong>
			<input type="text" id="margin_innercol_left" name="margin_innercol_left" size="10" maxlength="10">
		</p>
		<p>
			<strong><span>padding(px) innercol top : </span></strong>
			<input type="text" id="padding_innercol_top" name="padding_innercol_top" size="10" maxlength="10">
			<strong><span> right </span></strong>
			<input type="text" id="padding_innercol_right" name="padding_innercol_right" size="10" maxlength="10">
			<strong><span> bottom </span></strong>
			<input type="text" id="padding_innercol_bottom" name="padding_innercol_bottom" size="10" maxlength="10">
			<strong><span> left </span></strong>
			<input type="text" id="padding_innercol_left" name="padding_innercol_left" size="10" maxlength="10">
		</p>
		<p>
			<strong><span>grid left width(%) : </span></strong>
			<input type="text" id="grid_left_width" name="grid_left_width" size="10" maxlength="10">
			<strong><span>grid right width(%) : </span></strong>
			<input type="text" id="grid_right_width" name="grid_right_width" size="10" maxlength="10">
		</p>
		<p>
			<strong><span>outer color : </span></strong>
			<input type="text" id="outer_color" name="outer_color">
			<strong><span>inner color : </span></strong>
			<input type="text" id="inner_color" name="inner_color">
		</p>
		<p><strong><span>The CSS</span></strong></p>
		<p><textarea id="grid_css" name="grid_css" rows="15" style="width: 99.6%" spellcheck="false"></textarea><p>
	
		<p><strong><span>The HTML</span></strong></p>
		<p><textarea id="grid_pre" name="grid_pre" rows="15" style="width: 99.6%" spellcheck="false"></textarea><p>
					
		<div id="grid_html" name="grid_html"></div>
		<div class="grid_group">
			<div class="grid_left" id="grid_left" style="float:left;"></div>
			<div class="grid_right" id="grid_right" style="float:right;"></div>
		</div>							

		<fieldset>
			<legend>Write css file:</legend>
			<div>
				<input type="checkbox" id="write_css" name="write_css">
				<label for="write_css">write</label>
			</div>
		</fieldset>

		<p><button type="button" id="reset_grid">reset, write</button></p>
	</form>

	<script type="text/javascript">
		var grids_name = "grid";
		var grids_columns = 20;

		var margin_top = 0;
		var margin_right = 0;
		var margin_bottom = 0.2;
		var margin_left = 0;

		var padding_top = 2;
		var padding_right = 0;
		var padding_bottom = 2;
		var padding_left = 2;

		var margin_innercol_top = 0;
		var margin_innercol_right = 0;
		var margin_innercol_bottom = 0;
		var margin_innercol_left = 0;

		var padding_innercol_top = 0;
		var padding_innercol_right = 0;
		var padding_innercol_bottom = 0;
		var padding_innercol_left = 3;

		var grid_left_width = 45;
		var grid_right_width = 55;

		var outer_color = "#aaa";
		var inner_color = "#eee";

		var el_grids_name = document.getElementById("grids_name");
		var el_grids_columns = document.getElementById("grids_columns");
		
		var el_margin_top = document.getElementById("margin_top");
		var el_margin_right = document.getElementById("margin_right");
		var el_margin_bottom = document.getElementById("margin_bottom");
		var el_margin_left = document.getElementById("margin_left");
		
		var el_padding_top = document.getElementById("padding_top");
		var el_padding_right = document.getElementById("padding_right");
		var el_padding_bottom = document.getElementById("padding_bottom");
		var el_padding_left = document.getElementById("padding_left");

		var el_margin_innercol_top = document.getElementById("margin_innercol_top");
		var el_margin_innercol_right = document.getElementById("margin_innercol_right");
		var el_margin_innercol_bottom = document.getElementById("margin_innercol_bottom");
		var el_margin_innercol_left = document.getElementById("margin_innercol_left");
		
		var el_padding_innercol_top = document.getElementById("padding_innercol_top");
		var el_padding_innercol_right = document.getElementById("padding_innercol_right");
		var el_padding_innercol_bottom = document.getElementById("padding_innercol_bottom");
		var el_padding_innercol_left = document.getElementById("padding_innercol_left");

		var el_grid_left_width = document.getElementById("grid_left_width");
		var el_grid_right_width = document.getElementById("grid_right_width");
		
		var el_outer_color = document.getElementById("outer_color");
		var el_inner_color = document.getElementById("inner_color");
		
		var el_grid_css = document.getElementById("grid_css");
		var el_grid_pre = document.getElementById("grid_pre");
		var el_grid_html = document.getElementById("grid_html");

		var el_grid_left = document.getElementById("grid_left");
		var el_grid_right = document.getElementById("grid_right");
		
		var el_reset_grid = document.getElementById("reset_grid");

		function setinput_fromvar() {
			el_grids_name.value = grids_name;
			el_grids_columns.value = grids_columns;

			el_margin_top.value = margin_top;
			el_margin_right.value = margin_right;
			el_margin_bottom.value = margin_bottom;
			el_margin_left.value = margin_left;

			el_padding_top.value = padding_top;
			el_padding_right.value = padding_right;
			el_padding_bottom.value = padding_bottom;
			el_padding_left.value = padding_left;

			el_margin_innercol_top.value = margin_innercol_top;
			el_margin_innercol_right.value = margin_innercol_right;
			el_margin_innercol_bottom.value = margin_innercol_bottom;
			el_margin_innercol_left.value = margin_innercol_left;

			el_padding_innercol_top.value = padding_innercol_top;
			el_padding_innercol_right.value = padding_innercol_right;
			el_padding_innercol_bottom.value = padding_innercol_bottom;
			el_padding_innercol_left.value = padding_innercol_left;

			el_grid_left_width.value = grid_left_width;
			el_grid_right_width.value = grid_right_width;

			el_outer_color.value = outer_color;
			el_inner_color.value = inner_color;
		}

		function setvar_frominput() {
			grids_name = el_grids_name.value;
			grids_columns = el_grids_columns.value;

			margin_top = el_margin_top.value;
			margin_right = el_margin_right.value;
			margin_bottom = el_margin_bottom.value;
			margin_left = el_margin_left.value;

			padding_top = el_padding_top.value;
			padding_right = el_padding_right.value;
			padding_bottom = el_padding_bottom.value;
			padding_left = el_padding_left.value;

			margin_innercol_top = el_margin_innercol_top.value;
			margin_innercol_right = el_margin_innercol_right.value;
			margin_innercol_bottom = el_margin_innercol_bottom.value;
			margin_innercol_left = el_margin_innercol_left.value;

			padding_innercol_top = el_padding_innercol_top.value;
			padding_innercol_right = el_padding_innercol_right.value;
			padding_innercol_bottom = el_padding_innercol_bottom.value;
			padding_innercol_left = el_padding_innercol_left.value;

			grid_left_width = el_grid_left_width.value;
			grid_right_width = el_grid_right_width.value;

			outer_color = el_outer_color.value;
			inner_color = el_inner_color.value;
		}	
	</script>

	<script type="text/javascript">
		function checkMaxLength(object){
			if(object.value.length > object.maxLength){
				object.value = object.value.slice(0, object.maxLength);
			}
		}

		function number_format(number, decimals, dec_point, thousands_sep) { //https://stackoverflow.com/questions/12820312/what-is-the-js-equivalent-to-the-php-function-number-format
			// Strip all characters but numerical ones.
			number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
			var n = !isFinite(+number) ? 0 : +number,
				prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
				sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
				dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
				s = '',
				toFixedFix = function (n, prec) {
					var k = Math.pow(10, prec);
					return '' + Math.round(n * k) / k;
				};
			// Fix for IE parseFloat(0.55).toFixed(0) = 0;
			s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
			if (s[0].length > 3) {
				s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
			}
			if ((s[1] || '').length < prec) {
				s[1] = s[1] || '';
				s[1] += new Array(prec - s[1].length + 1).join('0');
			}
			return s.join(dec);
		}
		
		function get_grid_css(name, columns, test_css = true) {
			var grids_width = 100 - (margin_left * (columns-1)); //% 칼럼사이의 마진을 제외한 칼럼넓이 합의 백분율

			var grids = "";

			grids += "/*  SECTIONS  */" + "\n";
			grids += "/*  splits up the page horizontally.  */" + "\n";
			grids += "/*  You'll need a few of these to break up the content, and you can use them in your main wrapper, or within other divs.  */" + "\n";
			grids += "." + name + "_section {" + "\n";
			grids += "\t" + "clear: both;" + "\n";
			grids += "\t" +"margin: 0px;" + "\n";
			grids += "\t" +"padding: 0px;" + "\n";
			grids += "}" +"\n";
			grids += "\n";

			grids += "/*  GROUPING  */" + "\n";
			grids += "/*  solves floating problems, by forcing the section to self clear its children (aka the clearfix hack).  */" + "\n";
			grids += "/*  This is good in Firefox 3.5+, Safari 4+, Chrome, Opera 9+ and IE 6+.  */" + "\n";
			grids += "." + name +"_group:before," + "\n";
			grids += "." + name +"_group:after { content:\"\"; display:table; }" + "\n";
			grids += "." + name +"_group:after { clear:both;}" + "\n";
			grids += "." + name +"_group { zoom:1; /* For IE 6/7 */ }" + "\n";
			grids += "\n";

			grids += "/*  COLUMN SETUP  */" + "\n";
			grids += "/*  divides the section into columns.  */" + "\n";
			grids += "/*  Each column has a left margin of 1.6% (around 20 pixels on a normal monitor),  */" + "\n";
			grids += "/*  except the first one. Using .col:first-child { margin-left: 0; } means you don't need to use class=\"last\" anywhere.  */" + "\n";
			grids += "/*  It works in all browsers since IE6.  */" + "\n";
			grids += "." + name + "_col {" +"\n";
			grids += "\t" + "clear: none;" + "\n";
			grids += "\t" +"display: block;" + "\n";
			grids += "\t" + "float: left;" + "\n";

			//test css...
			if (test_css) {
				grids += "\n";
				grids += "\t" + "/* test css... */" + "\n";
				grids += "\t" + "background-color: " + outer_color + ";" + "\n";
				grids += "\n";
			}	

			grids += "\t" + "margin: " + margin_top + "% " + margin_right + "% " + margin_bottom + "% " + margin_left + "% " + ";" + "\n";
			grids += "\t" + "padding: " + padding_top + "px " + padding_right + "px " + padding_bottom + "px " + padding_left + "px " + ";" + "\n";
			grids += "\t" + "-moz-box-sizing: border-box;" + "\n";
			grids += "\t" + "-webkit-box-sizing: border-box;" + "\n";
			grids += "\t" + "box-sizing: border-box;" + "\n";
			grids += "\t" + "*behavior: url(boxsizing.htc);" + "\n";
			grids += "}" + "\n";
			grids += "\n";

			grids += "/*  INNER COLUMN SETUP  */" + "\n";
			grids += "." + name + "_innercol {" +"\n";
			grids += "\t" +"display: block;" + "\n";

			//test css...
			if (test_css) {
				grids += "\n";
				grids += "\t" + "/* test css... */" + "\n";
				grids += "\t" + "background-color: " + inner_color + ";" + "\n";
				grids += "\n";
			}	

			grids += "\t" + "margin: " + margin_innercol_top + "px " + margin_innercol_right + "px " + margin_innercol_bottom + "px " + margin_innercol_left + "px " + ";" + "\n";
			grids += "\t" + "padding: " + padding_innercol_top + "px " + padding_innercol_right + "px " + padding_innercol_bottom + "px " + padding_innercol_left + "px " + ";" + "\n";
			grids += "\t" + "-moz-box-sizing: border-box;" + "\n";
			grids += "\t" + "-webkit-box-sizing: border-box;" + "\n";
			grids += "\t" + "box-sizing: border-box;" + "\n";
			grids += "\t" + "*behavior: url(boxsizing.htc);" + "\n";
			grids += "}" + "\n";
			grids += "\n";

			grids += "." + name + "_col:first-child { margin-left: 0; }" + "\n"; //margin-left - col:first - margin-left - col... : set margin-left only
			grids += "." + name + "_col:last-child { padding-right: " + padding_left + "px; }" + "\n"; //col - padding-left - col:last - padding-right : set padding-left only
			grids += "\n";

			//test css...
			if (test_css) {
				grids += "/* test css... */" + "\n";
				grids += "." + name + "_left " + "." + name + "_col:last-child { padding-right: 0; }" + "\n";
				if (margin_left == 0 && margin_bottom == 0) {
					grids += "." + name + "_left " + "." + name + "_col { padding-top: 0; }" + "\n";
					grids += "." + name + "_right " + "." + name + "_col { padding-top: 0; }" + "\n";
					grids += "." + name + "_col { padding-right: 0px; }" + "\n"; 
				}	
				else {
					grids += "." + name + "_left " + "." + name + "_col { padding-top: " + padding_top + "px; }" + "\n"; //remove top-padding
					grids += "." + name + "_right " + "." + name + "_col { padding-top: " + padding_top + "px; }" + "\n"; //remove top-padding
				}	
				grids += "\n";
			}

			grids += "/*  " + name.toUpperCase() + " OF " + columns + " */" + "\n";
	
			for (i = 1; i <= columns; i++) {
				g = number_format((i / columns) * grids_width, 5, '.', '');
				grids += "." + name + "_" + i + "_of_" + columns + " {width : " + g + "% }" +"\n";  
			}	
			grids += "\n";

			grids += "/*  GO FULL WIDTH BELOW 480 PIXELS */" + "\n";
			grids += "@media only screen and (max-width: 480px) {" +"\n";
			grids += "\t" + "." + name + "_col { " +"\n";
			grids += "\t\t" + "margin: "+ margin_top + "% " + margin_right + "% " + margin_bottom + "% " + margin_left + "% " + ";" + "\n";
			grids += "\t\t" + "padding: "+ padding_top + "px " + padding_right + "px " + padding_bottom + "px " + padding_left + "px " + ";" + "\n";
			grids += "\t" + "}" + "\n";

			for (i = 1; i <= columns; i++) {
				grids += "\t" + "." + name + "_" + i + "_of_" + columns;  
				if (i < columns) 
					grids += "," + "\n";  
			}	
 
			grids += "\t" +"{ width: " + grids_width + "%; }" + "\n";
			grids += "}";
	
			return grids;
		}
		
		function get_grid_pre(name, columns) {
			ex_pre = "<div class=\"" + name + "_section " + name + "_group\">" + "\n";
			for (i = 1; i <= columns; i++) {
				ex_pre += "\t" + "<div class=\"" + name + "_col " + name + "_" + "1_of_" + columns + "\">";  
				ex_pre += "<div class=\"" + name + "_innercol\">" + i + "</div>";  
				ex_pre += "</div>" + "\n";  
			}	
			ex_pre += "</div>"+ "\n";
		
			ex_pre += "<div class=\"" + name + "_section " + name + "_group\">" + "\n";

			ex_pre += "\t" + "<div class=\"grid_left\" id=\"grid_left\" style=\"width:" + grid_left_width + "%; float:left;\">"+ "\n";
			for (i = 1; i <= columns; i++) {
				ex_pre += "\t" + "\t" + "<div class=\"" + name + "_col " + name + "_" + "1_of_" + columns + "\">";  
				ex_pre += "<div class=\"" + name + "_innercol\">" + i + "</div>";  
				ex_pre += "</div>" + "\n";  
			}	
			ex_pre += "\t" + "</div>"+ "\n";
		
			ex_pre += "\t" + "<div class=\"grid_right\" id=\"grid_right\" style=\"width:" + grid_right_width + "%; float:right;\">"+ "\n";
			for (i = 1; i <= columns; i++) {
				ex_pre += "\t" + "\t" + "<div class=\"" + name + "_col " + name + "_" + "1_of_" + columns + "\">";  
				ex_pre += "<div class=\"" + name + "_innercol\">" + i + "</div>";  
				ex_pre += "</div>" + "\n";  
			}	
			ex_pre += "\t" + "</div>"+ "\n";

			ex_pre += "</div>";
	
			return ex_pre;
		}

		function get_grid_html(name, columns) {
			ex_grid = "<div class=\"" + name + "_section " + name + "_group\">";
			for (i = 1; i <= columns; i++) {
				ex_grid += "<div class=\"" + name + "_col " + name + "_" + "1_of_" + columns + "\">";  
				ex_grid += "<div class=\"" + name + "_innercol\">" + i + "</div>";  
				ex_grid += "</div>";  
			}	
			ex_grid += "</div>";

			return ex_grid;
		}

		function set_grid_css(css) {
			document.head.insertAdjacentHTML("beforeend", "<style>" + css + "</style>");
		}

		function set_insertAdjacentHTML(el, text) {
			el.innerHTML = "";
			el.insertAdjacentHTML("beforeend", text)
		}
		
		function reset_grid() {
			setvar_frominput();
			
			var css = get_grid_css(grids_name, grids_columns);
			set_grid_css(css);
			set_insertAdjacentHTML(el_grid_css, css);

			set_insertAdjacentHTML(el_grid_pre, get_grid_pre(grids_name, grids_columns));
			set_insertAdjacentHTML(el_grid_html, get_grid_html(grids_name, grids_columns));
			set_insertAdjacentHTML(el_grid_left, get_grid_html(grids_name, grids_columns));
			set_insertAdjacentHTML(el_grid_right, get_grid_html(grids_name, grids_columns));
			
			el_grid_left.style.width = grid_left_width+"%";
			el_grid_right.style.width = grid_right_width+"%";
		}	

		//https://blogpack.tistory.com/1116
		function downloadTemplate(filename, text) {
			var el_temp = document.createElement('a');
			el_temp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
			el_temp.setAttribute('download', filename);
			el_temp.style.display = 'none';
			document.body.appendChild(el_temp);
			el_temp.click();
			document.body.removeChild(el_temp);
		}
		
		function css_write() {
			setvar_frominput();
			downloadTemplate(grids_name+"_"+grids_columns+".css", get_grid_css(grids_name, grids_columns, false));
		}

		setinput_fromvar();
		reset_grid();

		el_reset_grid.addEventListener('click', function(event)	{
			reset_grid();
			var el_write_css = document.getElementById("write_css");
			if (el_write_css.checked===true) {
			    el_write_css.checked = false;
				//el_write_css.click(); //to Uncheck it
				css_write(); 
			}	
			return false;
		});
	</script>

</body>

</html>

html + php 

<?php
//source
//http://www.responsivegridsystem.com/calculator/
//https://github.com/johnpolacek/extra-strength-responsive-grids

    $grids_name = "grid";
	$grids_columns = 20;

	$margin_top = 0.0;
	$margin_right = 0;
	$margin_bottom = 0.2;
	$margin_left = 0.0;

	$padding_top = 2;
	$padding_right = 0;
	$padding_bottom = 2;
	$padding_left = 2;

	$margin_innercol_top = 0;
	$margin_innercol_right = 0;
	$margin_innercol_bottom = 0;
	$margin_innercol_left = 0;

	$padding_innercol_top = 0;
	$padding_innercol_right = 0;
	$padding_innercol_bottom = 0;
	$padding_innercol_left = 3;

	$grid_left_width = 45;
	$grid_right_width = 55;

	$outer_color = "#aaa";
	$inner_color = "#eee";

	//protected $background_color = "#1E90FF";
	//protected $background_color_left = "#FDFD96";
	//protected $background_color_right = "#028A0F";

	$write_css = 0;

	function grid_css($name, $columns, $test_css = true) 
	{
		global $grids_name;
		global $grids_columns;

		global $margin_top;
		global $margin_right;
		global $margin_bottom;
		global $margin_left;

		global $padding_top;
		global $padding_right;
		global $padding_bottom;
		global $padding_left;

		global $margin_innercol_top;
		global $margin_innercol_right;
		global $margin_innercol_bottom;
		global $margin_innercol_left;

		global $padding_innercol_top;
		global $padding_innercol_right;
		global $padding_innercol_bottom;
		global $padding_innercol_left;

		global $outer_color;
		global $inner_color;

		$grids_name = $name;
		$grids_columns = $columns;
		$grids_width = 100 - ($margin_left * ($columns-1)); //%

		$grids = "";

		$grids .= "/*  SECTIONS  */" . "\n";
		$grids .= "/*  splits up the page horizontally.  */" . "\n";
		$grids .= "/*  You'll need a few of these to break up the content, and you can use them in your main wrapper, or within other divs.  */" . "\n";
		$grids .= "." . $name . "_section {" . "\n";
		$grids .= "\t" . "clear: both;" . "\n";
		$grids .= "\t" . "margin: 0px;" . "\n";
		$grids .= "\t" . "padding: 0px;" . "\n";
		$grids .= "}" . "\n";
		$grids .= "\n";

		$grids .= "/*  GROUPING  */" . "\n";
		$grids .= "/*  solves floating problems, by forcing the section to self clear its children (aka the clearfix hack).  */" . "\n";
		$grids .= "/*  This is good in Firefox 3.5+, Safari 4+, Chrome, Opera 9+ and IE 6+.  */" . "\n";
		$grids .= "." . $name . "_group:before," . "\n";
		$grids .= "." . $name . "_group:after { content:\"\"; display:table; }" . "\n";
		$grids .= "." . $name . "_group:after { clear:both;}" . "\n";
		$grids .= "." . $name . "_group { zoom:1; /* For IE 6/7 */ }" . "\n";
		$grids .= "\n";

		$grids .= "/*  COLUMN SETUP  */" . "\n";
		$grids .= "/*  divides the section into columns.  */" . "\n";
		$grids .= "/*  Each column has a left margin of 1.6% (around 20 pixels on a normal monitor),  */" . "\n";
		$grids .= "/*  except the first one. Using .col:first-child { margin-left: 0; } means you don't need to use class=\"last\" anywhere.  */" . "\n";
		$grids .= "/*  It works in all browsers since IE6.  */" . "\n";
		$grids .= "." . $name . "_col {" . "\n";
		$grids .= "\t" . "clear:none;" . "\n";
		$grids .= "\t" . "display: block;" . "\n";
		$grids .= "\t" . "float:left;" . "\n";

        //test css...
		if ($test_css) {
			$grids .= "\n";
			$grids .= "\t" . "/* test css... */" . "\n";
			$grids .= "\t" . "background-color: " . $outer_color . ";" . "\n";
			$grids .= "\n";
		}	

		$grids .= "\t" . "margin: " . $margin_top . "% " . $margin_right . "% " . $margin_bottom . "% " . $margin_left . "% " . ";" . "\n";
		$grids .= "\t" . "padding: " . $padding_top . "px " . $padding_right . "px " . $padding_bottom . "px " . $padding_left . "px " . ";" . "\n";
		$grids .= "\t" . "-moz-box-sizing:border-box;" . "\n";
		$grids .= "\t" . "-webkit-box-sizing:border-box;" . "\n";
		$grids .= "\t" . "box-sizing:border-box;" . "\n";
		$grids .= "\t" . "*behavior:url(boxsizing.htc);" . "\n";
		$grids .= "}" . "\n";
		$grids .= "\n";

		$grids .= "/*  INNER COLUMN SETUP  */" . "\n";
		$grids .= "." . $name . "_innercol {" . "\n";
		$grids .= "\t" . "display: block;" . "\n";

        //test css...
		if ($test_css) {
			$grids .= "\n";
			$grids .= "\t" . "/* test css... */" . "\n";
			$grids .= "\t" . "background-color: " . $inner_color . ";" . "\n";
			$grids .= "\n";
		}	

		$grids .= "\t" . "margin: " . $margin_innercol_top . "px " . $margin_innercol_right . "px " . $margin_innercol_bottom . "px " . $margin_innercol_left . "px " . ";" . "\n";
		$grids .= "\t" . "padding: " . $padding_innercol_top . "px " . $padding_innercol_right . "px " . $padding_innercol_bottom . "px " . $padding_innercol_left . "px " . ";" . "\n";
		$grids .= "\t" . "-moz-box-sizing:border-box;" . "\n";
		$grids .= "\t" . "-webkit-box-sizing:border-box;" . "\n";
		$grids .= "\t" . "box-sizing:border-box;" . "\n";
		$grids .= "\t" . "*behavior:url(boxsizing.htc);" . "\n";
		$grids .= "}" . "\n";
		$grids .= "\n";

		$grids .= "." . $name . "_col:first-child { margin-left: 0; }" . "\n";
		$grids .= "." . $name . "_col:last-child { padding-right: ".$padding_left . "px; }" . "\n";
		$grids .= "\n";

        //test css...
		if ($test_css) {
			$grids .= "/* test css... */" . "\n";
			$grids .= "." . $name . "_left " . "." . $name . "_col:last-child { padding-right: 0; }" . "\n";
			if ($margin_left == 0 && $margin_bottom == 0) {
				$grids .= "." . $name . "_left " . "." . $name . "_col { padding-top: 0; }" . "\n";
				$grids .= "." . $name . "_right " . "." . $name . "_col { padding-top: 0; }" . "\n";
				$grids .= "." . $name . "_col { padding-right: 0px; }" . "\n"; 
			}	
			else {
				$grids .= "." . $name . "_left " . "." . $name . "_col { padding-top: " . $padding_top . "px; }" . "\n"; //remove top-padding
				$grids .= "." . $name . "_right " . "." . $name . "_col { padding-top: " . $padding_top . "px; }" . "\n"; //remove top-padding
			}	
			$grids .= "\n";
		}
		
		$grids .= "/*  " . strtoupper($name) . " OF " . $columns . " */" . "\n";
	
		for ($i = 1; $i <= $columns; $i++) {
			$g = number_format (($i / $columns) * $grids_width, 5, '.', '');
			$grids .= "." . $name . "_" . $i . "_of_" . $columns . " {width : " . $g . "% }" . "\n";  
		}	
		$grids .= "\n";

		$grids .= "/*  GO FULL WIDTH BELOW 480 PIXELS */" . "\n";
		$grids .= "@media only screen and (max-width: 480px) {" . "\n";
		$grids .= "\t" . "." . $name . "_col { " . "\n";
		$grids .= "\t\t" . "margin: ". $margin_top . "% " . $margin_right . "% " . $margin_bottom . "% " . $margin_left . "% " . ";" . "\n";
		$grids .= "\t\t" . "padding: ". $padding_top . "px " . $padding_right . "px " . $padding_bottom . "px " . $padding_left . "px " . ";" . "\n";
		$grids .= "\t" . "}" . "\n";

		for ($i = 1; $i <= $columns; $i++) {
			$grids .= "\t" . "." . $name . "_" . $i . "_of_" . $columns;  
			if ($i < $columns) 
				$grids .= "," . "\n";  
		}	
 
		$grids .= "\t" . "{ width: ". $grids_width ."%; }" . "\n";
		$grids .= "}";
	
		return $grids;
	}

	function grid_pre($name, $columns) 
	{
		global $grid_left_width;
		global $grid_right_width;

		$ex_pre = "<div class=\"" . $name . "_section " . $name . "_group\">" . "\n";
		for ($i = 1; $i <= $columns; $i++) {
			$ex_pre .= "\t" . "<div class=\"" . $name . "_col " . $name . "_" . "1_of_" . $columns ."\">";  
			$ex_pre .= "<div class=\"" . $name . "_innercol\">" . $i . "</div>";  
			$ex_pre .= "</div>" . "\n";  
		}	
		$ex_pre .= "</div>". "\n";
		
		$ex_pre .= "<div class=\"" . $name . "_section " . $name . "_group\">" . "\n";

		$ex_pre .= "\t" . "<div class=\"grid_left\" id=\"grid_left\" style=\"width:" . $grid_left_width . "%; float:left;\">". "\n";
		for ($i = 1; $i <= $columns; $i++) {
			$ex_pre .= "\t" . "\t" . "<div class=\"" . $name . "_col " . $name . "_" . "1_of_" . $columns ."\">";  
			$ex_pre .= "<div class=\"" . $name . "_innercol\">" . $i . "</div>";  
			$ex_pre .= "</div>" . "\n";  
		}	
		$ex_pre .= "\t" . "</div>". "\n";
		
		$ex_pre .= "\t" . "<div class=\"grid_right\" id=\"grid_right\" style=\"width:" . $grid_right_width . "%; float:right;\">". "\n";
		for ($i = 1; $i <= $columns; $i++) {
			$ex_pre .= "\t" . "\t" . "<div class=\"" . $name . "_col " . $name . "_" . "1_of_" . $columns ."\">";  
			$ex_pre .= "<div class=\"" . $name . "_innercol\">" . $i . "</div>";  
			$ex_pre .= "</div>" . "\n";  
		}	
		$ex_pre .= "\t" . "</div>". "\n";

		$ex_pre .= "</div>";

		return $ex_pre;
	}

	function grid_html($name, $columns) 
	{
		$ex_grid = "<div class=\"" . $name . "_section " . $name . "_group\">";
		for ($i = 1; $i <= $columns; $i++) {
			$ex_grid .= "<div class=\"" . $name . "_col " . $name . "_" . "1_of_" . $columns ."\">";  
			$ex_grid .= "<div class=\"" . $name . "_innercol\">" . $i . "</div>";  
			$ex_grid .= "</div>";  
		}	
		$ex_grid .= "</div>";

		return $ex_grid;
	}

	function css_write($name, $columns) 
	{
		$fp = fopen($name."_".$columns.".css", "w");
		fwrite($fp, grid_css($name, $columns, false));
		fclose($fp);
	}

	if ($_SERVER['REQUEST_METHOD'] == 'POST') {
		$grids_name = $_POST['grids_name'];
		$grids_columns = $_POST['grids_columns'];

		$margin_top = $_POST['margin_top'];
		$margin_right = $_POST['margin_right'];
		$margin_bottom = $_POST['margin_bottom'];
		$margin_left = $_POST['margin_left'];
				
		$padding_top = $_POST['padding_top'];
		$padding_right = $_POST['padding_right'];
		$padding_bottom = $_POST['padding_bottom'];
		$padding_left = $_POST['padding_left'];

		$margin_innercol_top = $_POST['margin_innercol_top'];
		$margin_innercol_right = $_POST['margin_innercol_right'];
		$margin_innercol_bottom = $_POST['margin_innercol_bottom'];
		$margin_innercol_left = $_POST['margin_innercol_left'];
				
		$padding_innercol_top = $_POST['padding_innercol_top'];
		$padding_innercol_right = $_POST['padding_innercol_right'];
		$padding_innercol_bottom = $_POST['padding_innercol_bottom'];
		$padding_innercol_left = $_POST['padding_innercol_left'];

		$grid_left_width = $_POST['grid_left_width'];
		$grid_right_width = $_POST['grid_right_width'];
	
		$outer_color = $_POST['outer_color'];
		$inner_color = $_POST['inner_color'];
		
		if (isset($_POST['write_css']) && $_POST['write_css'] == "write") {
			css_write($grids_name, $grids_columns); 
			$write_css = 0;
		}	
	}

	$grid_css = grid_css($grids_name, $grids_columns);
	$grid_pre = grid_pre($grids_name, $grids_columns);
	$grid_html = grid_html($grids_name, $grids_columns);
	$grid_left = grid_html($grids_name, $grids_columns);
	$grid_right = grid_html($grids_name, $grids_columns);
?>

<html>

<head>
	<title>grid</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<style type="text/css" media="screen">
		input, button, span, p,	textarea, div {
			font-size: 11pt;
		}
		input, div { 
			margin: 0px 0px 0px 0px; 
			padding: 0px;
		}
		button { 
			margin: 0px; 
			padding: 1px;
			border: 1px solid #777;
			background: #ccc;
		}
		button:hover { 
			background-color: #A9BCEF; 
			cursor:pointer;
		}
		p { 
			margin: 1px 1px 1px 1px; 
			padding: 2px;
		}
		textarea {
			border: 1px solid #999999;
			margin: 0px 0px 0px 0px;
			padding: 2px;
			overflow: auto; 
		}
		textarea {
			tab-size : 4;
			-o-tab-size : 4;
			-moz-tab-size : 4;
			-webkit-tab-size: 4; 
		}
	</style>

	<style type="text/css">
		<?php echo $grid_css; ?>
	</style>
</head>

<body>
	<form action="index.php" id="grids" name="grids" method="post">
		<p>
			<strong><span>source : </span></strong>
			<a target="_blank" href="http://www.responsivegridsystem.com">responsivegridsystem</a>
			<a target="_blank" href="https://github.com/johnpolacek/extra-strength-responsive-grids">extra-strength-responsive-grids</a>
		</p>
		<p>
			<strong><span>css grid name : </span></strong>
			<input type="text" id="grids_name" name="grids_name" value="<?php echo $grids_name; ?>">
			<strong><span>grid columns : </span></strong>
			<input type="number" id="grids_columns" name="grids_columns" maxlength="3" oninput="checkMaxLength(this)" value="<?php echo $grids_columns; ?>">
		</p>
		<p>
			<strong><span>margin(%) top : </span></strong>
			<input type="text" id="margin_top" name="margin_top" size="10" maxlength="10" value="<?php echo $margin_top; ?>">
			<strong><span> right </span></strong>
			<input type="text" id="margin_right" name="margin_right" size="10" maxlength="10" value="<?php echo $margin_right; ?>">
			<strong><span> bottom </span></strong>
			<input type="text" id="margin_bottom" name="margin_bottom" size="10" maxlength="10" value="<?php echo $margin_bottom; ?>">
			<strong><span> left </span></strong>
			<input type="text" id="margin_left" name="margin_left" size="10" maxlength="10" value="<?php echo $margin_left; ?>">
		</p>
		<p>
			<strong><span>padding(px) top : </span></strong>
			<input type="text" id="padding_top" name="padding_top" size="10" maxlength="10" value="<?php echo $padding_top; ?>">
			<strong><span> right </span></strong>
			<input type="text" id="padding_right" name="padding_right" size="10" maxlength="10" value="<?php echo $padding_right; ?>">
			<strong><span> bottom </span></strong>
			<input type="text" id="padding_bottom" name="padding_bottom" size="10" maxlength="10" value="<?php echo $padding_bottom; ?>">
			<strong><span> left </span></strong>
			<input type="text" id="padding_left" name="padding_left" size="10" maxlength="10" value="<?php echo $padding_left; ?>">
		</p>
		<p>
			<strong><span>margin(px) innercol top : </span></strong>
			<input type="text" id="margin_innercol_top" name="margin_innercol_top" size="10" maxlength="10" value="<?php echo $margin_innercol_top; ?>">
			<strong><span> right </span></strong>
			<input type="text" id="margin_innercol_right" name="margin_innercol_right" size="10" maxlength="10" value="<?php echo $margin_innercol_right; ?>">
			<strong><span> bottom </span></strong>
			<input type="text" id="margin_innercol_bottom" name="margin_innercol_bottom" size="10" maxlength="10" value="<?php echo $margin_innercol_bottom; ?>">
			<strong><span> left </span></strong>
			<input type="text" id="margin_innercol_left" name="margin_innercol_left" size="10" maxlength="10" value="<?php echo $margin_innercol_left; ?>">
		</p>
		<p>
			<strong><span>padding(px) innercol top : </span></strong>
			<input type="text" id="padding_innercol_top" name="padding_innercol_top" size="10" maxlength="10" value="<?php echo $padding_innercol_top; ?>">
			<strong><span> right </span></strong>
			<input type="text" id="padding_innercol_right" name="padding_innercol_right" size="10" maxlength="10" value="<?php echo $padding_innercol_right; ?>">
			<strong><span> bottom </span></strong>
			<input type="text" id="padding_innercol_bottom" name="padding_innercol_bottom" size="10" maxlength="10" value="<?php echo $padding_innercol_bottom; ?>">
			<strong><span> left </span></strong>
			<input type="text" id="padding_innercol_left" name="padding_innercol_left" size="10" maxlength="10" value="<?php echo $padding_innercol_left; ?>">
		</p>
		<p>
			<strong><span>grid left width(%) : </span></strong>
			<input type="text" id="grid_left_width" name="grid_left_width" size="10" maxlength="10" value="<?php echo $grid_left_width; ?>">
			<strong><span>grid right width(%) : </span></strong>
			<input type="text" id="grid_right_width" name="grid_right_width" size="10" maxlength="10" value="<?php echo $grid_right_width; ?>">
		</p>
		<p>
			<strong><span>outer color : </span></strong>
			<input type="text" id="outer_color" name="outer_color" value="<?php echo $outer_color; ?>">
			<strong><span>inner color : </span></strong>
			<input type="text" id="inner_color" name="inner_color" value="<?php echo $inner_color; ?>">
		</p>
		<p><strong><span>The CSS</span></strong></p>
		<p><textarea id="grid_css" name="grid_css" rows="15" style="width: 99.6%" spellcheck="false"><?php echo $grid_css; ?></textarea><p>
	
		<p><strong><span>The HTML</span></strong></p>
		<p><textarea id="grid_pre" name="grid_pre" rows="15" style="width: 99.6%" spellcheck="false"><?php echo $grid_pre; ?></textarea><p>
					
		<div id="grid_html" name="grid_html"><?php echo $grid_html; ?></div>
		<div class='<?php echo $grids_name . "_section " . $grids_name . "_group"; ?>'>
			<?php echo '<div class="' . $grids_name . '_left id="grid_left" style="width:' . $grid_left_width . '%; float:left;">'?><?php echo $grid_left; ?></div>
			<?php echo '<div class="' . $grids_name . '_right id="grid_right" style="width:' . $grid_right_width . '%; float:right;">'?><?php echo $grid_right; ?></div>
		</div>							

		<fieldset>
			<legend>Write css file:</legend>
			<div>
				<input type="checkbox" id="write_css" name="write_css" value="write" <?php echo ($write_css==1 ? 'checked="checked"' : '');?>>
				<label for="write_css">write</label>
			</div>
		</fieldset>

		<p><input type="submit" value="reset, write" /></p>
	</form>

	<script type="text/javascript">
		function checkMaxLength(object){
			if(object.value.length > object.maxLength){
				object.value = object.value.slice(0, object.maxLength);
			}
		}
	</script>
</body>

</html>

 

첨부파일은 html + php 확장판입니다.

이걸 올릴까 말까 고민한지 한달이 되어가는데.. 한분에게라도 도움이 될까 싶어 올립니다

설명을 좀 달아볼까 했는데 그런 재주는 없었습니다

네종류의 예제로 설명을 대신합니다.

혹시 궁금한 점이 계시면 댓글 달아주세요.
첨부파일 grids-2023-07-09.zip (18.3 KB)
 이전글 빠른시작 시즌2 php8.1 & CI4 (1)
목록

댓글

darkninja / 2023/07/08 21:21:33 / 추천 0

div inside ul https://www.google.co.kr/search?q=div+inside+ul

'ul' 태그안에 'li' 태그를 경유하지 않고 바로 'div' 태그를 넣으면 안된다는 사실을 오늘에서야 발견했습니다;

'div' 태그를 'li' 태그로 감싸면 당연히 정상 작동이 보장되지 않습니다.

메뉴의 서브메뉴에서 ul 태그아래의 div 태그를 li 태그로 수정하였습니다 (다행이 별문제없슴)

.nav ul li.menu_right {
	float: right;
	padding: 0px 3px 0px 0px;
}

menu_right 스타일이 추가되었습니다

Simple-Tab 의 ul-li 부분을 div 태그로 바꾸었습니다

css, js 파일도 일관성을 갖도록 변경되었습니다.
darkninja / 2023/07/14 01:20:02 / 추천 0

http://127.0.0.1:8080/Responsive-Grid-System/public/grids

설치 폴더이름에 대소문자가 있으면 반갑지 않은 화면이 나옵니다

404 Sorry! Cannot seem to find the page you were looking for. 

 

1.설치폴더이름을 소문자로 하면 문제가 발생하지 않습니다.

 

2.완전한 경로를 적어주면 나오기는 합니다

http://127.0.0.1:8080/responsive-grid-system/public/index.php/grids

 

3. .htaccess 파일에 기본경로를 추가하면 대소문자가 혼합되어도 되기는 합니다.

RewriteBase /Responsive-Grid-System/public
RewriteRule ^(.*)$ /Responsive-Grid-System/public/index.php/$1 [PT,L]