공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/HTML

박스모델의 생성 : HTML에서 js까지

serpiko 2014. 11. 3. 19:58

   박스모델의 생성 step01. 


- 직접그려보기


완성될 박스모델을 머릿속으로만 생각하지 말고 종이에 그려본다.


내가 만들 박스는 아래와 같은 형태이다.


서버와 텍스트는 Table로, 종류와 상태는 같은 div를 사용하는 img 태그를 사용할 예정이다.



- 코드 생각해 보기


대략 아래와 같은 구분 영역을 가지게 될 것이다.


<div id='container_box'>

<table> ~ </table>

<div>

<img src='' />

<img src='' />

</div>

</div>


이렇게 container_box라는 wrap으로 만들어야 나중에 드래그나 클릭과 같은 기능이 추가되었을 때 가장 이상적으로 제어가 가능하다.


container_box는 position을 absolute로 지정해 주면되고, table은 그냥 일반적인 테이블 코딩


종류와 상태의 경우 같은 div에 들어있다.




- 코드짜보기


<!DOCTYPE HTML>
<html lang="ko">
<head>
<title> NewDocument </title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/common.css" />
</head>
<body>
	<script type="text/javascript">
	$(document).ready(function(){
		//

	});
	</script>
	
<div id='container_box' style='position:absolute;color:white;'>
	<table border=1 cellpadding=0 cellspacing=0>
		<tr>
			<td align='center' id='upTD'>
				<img id='imgID' src='images/server.png' />
			</td>
		</tr>
		<tr>
			<td align='center' id='downTD' style='padding:7px 0 0 0;color:green;'>
				<span style='white-space:nowrap;font-size:17px'>애플PC</span>
			</td>
		</tr>
	</table>
	<div>
		<img id='venID' src='images/logo.png' />
		<img id='statID' src='images/status_blue.gif' />
	</div>
</div>

</body>
</html>


- 결과보기



아직 우리는 장비와 상태 부분에 css를 적용해 주지 않았으므로 저렇게 block으로 인식되어 줄바꿈 처리된 후 


오른쪽으로 쌓인 결과가 뜰 것이다.



- 아이콘 사이즈의 조절


종류(사과 아이콘)이미지가 너무 크므로 퍼센테이지 수치를 대입하여 줄이기로 한다. 


줄일 때에는 백분율을 사용하여 간단하게 구하면 된다. 백분율에 대한 공식과 설명은 여기 http://serpiko.tistory.com/44 에서 확인.


<!DOCTYPE HTML>
<html lang="ko">
<head>
<title> NewDocument </title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/common.css" />
</head>
<body>
	<div id='container_box' style='position:absolute;color:white;'>
		<table border=1 cellpadding=0 cellspacing=0>
			<tr>
				<td align='center' id='upTD'>
					<img id='imgID' src='images/server.png' />
				</td>
			</tr>
			<tr>
				<td align='center' id='downTD' style='padding:7px 0 0 0;color:green;'>
					<span style='white-space:nowrap;font-size:17px'>애플PC</span>
				</td>
			</tr>
		</table>
		<div style='position:absolute;'>
			<img id='venID' style='position:absolute;' src='images/logo.png' />
			<img id='statID' style='position:absolute;' src='images/status_blue.gif' />
		</div>
	</div>

	<script type="text/javascript">
	$(document).ready(function(){
		//
		var _venSize = 128;
		var _statSize = 24;
		var _percent = 40;
		var ven = $('#venID');
		var stat = $('#statID');

		var VEN_W = Math.floor( _percent * _venSize / 100 );
		ven.css({'width': VEN_W, 'height':VEN_W});
	});
	</script>
</body>
</html>

- 결과보기





- 장비와 상태의 위치를 계산하여 움직여주기


<!DOCTYPE HTML>
<html lang="ko">
<head>
<title> NewDocument </title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
	<div id='container_box' style='position:absolute;color:white;left:50px;top:50px;'>
		<table border=1 cellpadding=0 cellspacing=0>
			<tr>
				<td align='center' id='upTD'>
					<img id='imgID' src='images/server.png' />
				</td>
			</tr>
			<tr>
				<td align='center' id='downTD' style='padding:7px 0 0 0;color:green;'>
					<span style='white-space:nowrap;font-size:15px'>최고급 사양의 애플PC 입니다.</span>
				</td>
			</tr>
		</table>
		<div style='position:absolute;left:0px;top:0px;'> <!-- 0,0 중요 -->
			<img id='venID' style='position:absolute;' src='images/logo.png' />
			<img id='statID' style='position:absolute;' src='images/status_blue.gif' />
		</div>
	</div>

	<script type="text/javascript">
	$(document).ready(function(){
		//
		var _imgSize = 128;
		var _venSize = 128;
		var _statSize = 24;
		var _percent = 40;
		var upTD = $('#upTD');
		var img = $('#imgID');
		var ven = $('#venID');
		var stat = $('#statID');

		var IMG_W = Math.floor( _imgSize );
		var IMG_H = Math.floor( _imgSize );
		var VEN_W = Math.floor( _percent * _venSize / 100 );
		var VEN_H = Math.floor( _percent * _venSize / 100 );
		var STAT_W = Math.floor( _statSize );
		var STAT_H = Math.floor( _statSize );

		ven.css({'width': VEN_W, 'height':VEN_W});
		img.css({'width': IMG_W, 'height':IMG_H});
		
		var img_w = img.width();
		var img_h = img.height();

		ven.css({ 'left': -Math.floor(VEN_W/2), 'top' : img_h - Math.floor(VEN_H/1.5) });
		stat.css({ 'left': Math.floor(upTD.width()/2 + img_w/2 - STAT_W/2 ), 'top':-Math.floor(STAT_H/2) });
	});
	</script>
</body>
</html>

- 결과보기



- js로 동적 생성하여 바인딩하기


<!DOCTYPE HTML>
<html lang="ko">
<head>
<title> NewDocument </title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
	#containerID{position:absolute;left:0px;top:0px;}
</style>
</head>
<body>
	<div id='containerID'></div>

	<script type="text/javascript">
	$(document).ready(function(){

		var color = '3366cc';
		var size = 100;
		var name = '최고급 사양의 애플PC 입니다.';

		var code = "";
		code += "<div id='container_box' style='position:absolute;left:50px;top:50px;'>";
		code +=		"<table border=1 cellpadding=0 cellspacing=0>";
		code +=			"<tr>";
		code +=				"<td align='center' id='upTD'> <img id='imgID' src='images/server.png' /> </td>";
		code +=			"</tr>";
		code +=			"<tr>";
		code +=				"<td id='downTD' style='text-align:center;padding:7px 0 0 0;color:#"+color+"'>";
		code +=					"<span style='white-space:nowrap;font-size:"+size+"%'>"+ name +"</span>";
		code +=				"</td>";
		code +=			"</tr>";
		code +=		"</table>";
		code +=		"<div style='position:absolute;left:0px;top:0px;'>";
		code +=			"<img id='venID' style='position:absolute;border:none;' src='images/logo.png' />";
		code +=			"<img id='statID' style='position:absolute;border:none;' src='images/status_blue.gif' />";
		code +=		"</div>";
		code += "</div>";
		$('#containerID').append( code );

		//
		var _imgSize = 128;
		var _venSize = 128;
		var _statSize = 24;
		var _percent = 40;
		var upTD = $('#upTD');
		var img = $('#imgID');
		var ven = $('#venID');
		var stat = $('#statID');

		var IMG_W = Math.floor( _imgSize );
		var IMG_H = Math.floor( _imgSize );
		var VEN_W = Math.floor( _percent * _venSize / 100 );
		var VEN_H = Math.floor( _percent * _venSize / 100 );
		var STAT_W = Math.floor( _statSize );
		var STAT_H = Math.floor( _statSize );

		ven.css({'width': VEN_W, 'height':VEN_W});
		img.css({'width': IMG_W, 'height':IMG_H});
		
		var img_w = img.width();
		var img_h = img.height();

		ven.css({ 'left': -Math.floor(VEN_W/2), 'top' : img_h - Math.floor(VEN_H/1.5) });
		stat.css({ 'left': Math.floor(upTD.width()/2 + img_w/2 - STAT_W/2 ), 'top':-Math.floor(STAT_H/2) });
	});
	</script>
</body>
</html>

- 결과보기













저작자표시 비영리 동일조건

'■ 프론트엔드 ■ > HTML' 카테고리의 다른 글

[ HTML5 VIDEO ] HLS 예제 테스트 스트림  (0) 2018.03.09
어떤 엘리먼트를 사용해서 웹을 만들어야 하나  (0) 2018.02.19
SVG, HTML5, jQuery UI 데모페이지  (0) 2014.03.12
박스모델의 위치계산  (0) 2014.01.22
테이블샘플  (0) 2014.01.16
댓글