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

티스토리 뷰

■ 프론트엔드 ■/HTML

박스모델의 위치계산

serpiko 2014. 1. 22. 12:03

   박스모델


다음과 같은 형태의 table 박스모델이 있다. 박스모델의 형태를 살펴보면 


a. 상단에는 이미지


b. 하단에는 설명


c. 이미지(a)위에는 장비에대한 아이콘(이미지)으로 구성되어있다.


박스모델은 대략 아래와 같이 상상하면 되고 주요한 css 속성은 


- container와 vendor의 position은 모두 absolute 


- a와b는 table의 text-align:center 라는 점이다.


<div id="container">
<table>
    <tr>
       <td> <img src = "a.이미지" </td>
       <td> b.텍스트</td>
    </tr>
</table>
</div>

<div id="vendor">
     <img src=" c.아이콘">
</div>


그런데 문제는 "a.이미지" 위치를 조정하는 x, y 좌표(html에서는 left와 top)를 전달 받았을 때 


그대로 적용하면 "b.텍스트"가 가변적으로 길어질 경우 테이블 안에서는 녹색과 같은 갭이 생기고 


결과적으로 x 좌표에 오차가 생긴다.




   공간계산


먼저 녹색의 갭(차이)를 구하면 테이블안의 TD에서 이미지 width를 빼고 2등분 해준다.


var gap = ( TD.width() - a이미지.width() ) / 2;


좌표계 값(x) 에서 gap을 빼서 left를 구하면


var left = x - gap;


이렇게 하므로써 ①번에 그려졌던 테이블이 ②번으로 이동되어 a의 이미지 위치가 제대로 표현되고 전달받은(x, y)값과 정확히 일치한다.



마지막으로 c.아이콘(vendor)는 그림과 같이 저런 형태로 항상 이미지 좌측하단에 위치해야 하는데


c아이콘 left = a이미지의 x에서 c이미지의 절반을 빼서 위치


c아이콘 left = a이미지.left -  ( c이미지.width()/2 );


c아이콘 top = a이미지의 y 에 a이미지의 height를 더해서 끝점을 알아낸 뒤 - c이미지 높이 값의 절반을 뺀다.


c아이콘 top = a이미지.top + a이미지.height() - ( c이미지.height() /2 );


참고로 하단의 텍스트의 공간 - 핑크색은 padding으로 조절한다.




   소스와 결과


소스다운로드 

tableDistance.zip


(* 참고로 serverSide - asp,php,jsp 에서 전달받은 정보를 가지고 엘리먼트를 생성해야 하는 목적을 테스트한 코드이므로 


  append로 추가 하며 사용되었으며, 만약 갯수가 추가되면 다음과 같이 동적으로 추가해서 그려내야 함.)


  for ( var i = 0; i<SQL; ++i ){

    var code = "<div id='dataDis'" + i +">";

     ..... 


<!DOCTYPE HTML>
<HTML>
<HEAD>
	<title></title>
	<meta charset="utf-8" />
	<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
	<script>
		var path = "sample.jpg";
		var desc = "길고긴텍스트인데자동으로중앙정렬이잘될것인가";
		var vendor = "linux.png";
		var percent = 100;
		var color = "#00ccff";
	</script>
</HEAD>

<body>

	<script>
		$(document).ready(function(){
			
			//append
			var body = $('body');
			var code = "";
			code = "<div id='dataDis'>"
				code+= "<a id='' href='#'>"
					code+= "<table border='1'>";
						code+= "<tr><td id='upTD'>";
							code+= "<img id='imgID' src='"+ path +"' />";
						code+= "</td></tr>";
						code+= "<tr><td id='downTD' style='padding:10px 0 0 0'>";
							code+= desc;
						code+= "</td></tr>";
					code+= "</table>";
				code+= "</a>";
			code+= "</div>";

			code+= "<img id='venID' src='"+ vendor +"' />";
			body.append(code);
			
			//css
			$('#dataDis').css({ 'position':'absolute', 'left':100, 'top':100 });
			$('td').css('text-align','center');
			$('#venID').css('position','absolute');
			
			//callBack
			$('#venID').load(function(){
				calculate();
			});
		});
		
		function calculate(){
			
			//sel
			var con = $('#dataDis');
			var upTD = $('#upTD');
			var downTD = $('#downTD');
			var img = $('#imgID');
			var vendor = $('#venID');

			//percent of size
			var IMG_W = Math.floor( img.width() * percent /100 );
			var IMG_H = Math.floor( img.height() * percent /100 );
			var VEN_W = Math.floor( vendor.width()  * percent / 100 );
			var VEN_H = Math.floor( vendor.height() * percent / 100 );
			
			//size of css
			img.css({'width':IMG_W, 'height':IMG_H});
			vendor.css({'width':VEN_W, 'height':VEN_H});
			downTD.css('color', color);

			//abs
			var DIV_X = $('#dataDis').offset().left;
			var DIV_Y = $('#dataDis').offset().top;
			var TD_W = upTD.width();
			var TD_H = upTD.height();
			
			//gap
			var leftGap = Math.floor((TD_W - IMG_W) /2);
			var topGap = (DIV_Y + TD_H);
			
			//vendor
			vendor.css({ 'left':DIV_X + leftGap - (vendor.width()/2), 'top':topGap - vendor.height()/1.5 });
		}
	</script>
</BODY>
</HTML>


결과)



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

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

박스모델의 생성 : HTML에서 js까지  (0) 2014.11.03
SVG, HTML5, jQuery UI 데모페이지  (0) 2014.03.12
테이블샘플  (0) 2014.01.16
기본엘리먼트 작성하기 - nonCss  (0) 2013.11.26
Table  (0) 2013.11.20
댓글