HTML5에 해당되는 글 3건

HTML5 Canvas API

언어로그/Html/Javascript/CSS 2012. 3. 11. 23:33 





// canvas template

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");


// draw line
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 15;
context.strokeStyle = "#ff0000"; // line color
context.stroke();


// draw arc

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 75;
var startingAngle = 1.1 * Math.PI;
var endingAngle = 1.9 * Math.PI;
var counterclockwise = false;

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
context.lineWidth = 15;
context.strokeStyle = "black"; // line color
context.stroke();


// draw curve

 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var controlX = 288;
 var controlY = 0;
 var endX = 388;
 var endY = 150;

 context.moveTo(188, 150);
 context.quadraticCurveTo(controlX, controlY, endX, endY);
 context.lineWidth = 10;
 context.strokeStyle = "black"; // line color
 context.stroke();



// draw bezier
var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var controlX1 = 140;
 var controlY1 = 10;
 var controlX2 = 388;
 var controlY2 = 10;
 var endX = 388;
 var endY = 170;

context.moveTo(188, 130);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.lineWidth = 10;
context.strokeStyle = "black"; // line color
context.stroke();


// draw path
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(100, 20);
context.lineTo(200, 160); // line 1
context.quadraticCurveTo(230, 200, 250, 120); // quadratic curve
context.bezierCurveTo(290, -40, 300, 200, 400, 150); // bezier curve
context.lineTo(500, 90); // line 2
context.lineWidth = 5;
context.strokeStyle = "#0000ff";
context.stroke();


// draw rectangle

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var topLeftCornerX = 188;
var topLeftCornerY = 50;
var width = 200;
var height = 100;

context.beginPath();
context.rect(topLeftCornerX, topLeftCornerY, width, height);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();


// draw pattern

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var imageObj = new Image();
imageObj.onload = function(){
    var pattern = context.createPattern(imageObj, "repeat");

    context.rect(10, 10, canvas.width - 20, canvas.height - 20);     
    context.fillStyle = pattern;
    context.fill();
};
imageObj.src = "wood-pattern.png";



// draw image
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var destX = 69;
var destY = 50;
var imageObj = new Image();

imageObj.onload = function(){
    context.drawImage(imageObj, destX, destY);
};
imageObj.src = "darth-vader.jpg";



// draw text
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var x = 150;
 var y = 100;

 context.font = "40pt Calibri";
 context.fillStyle = "#0000ff"; // text color
 context.fillText("Hello World!", x, y);

// draw shadow

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.rect(188, 40, 200, 100);
context.fillStyle = "#8ED6FF";
context.shadowColor = "#bbbbbb";
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();


// clear canvas

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.rect(188, 40, 200, 100);
context.fillStyle = "#8ED6FF";
context.shadowColor = "#bbbbbb";
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();



// animation

window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();
 
function animate(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    // update
 
    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);
 
    // draw
 
    // request new frame
    requestAnimFrame(function(){
        animate();
    });
}
 
window.onload = function(){
    // initialize stage
 
    animate();
};


// linear motion
window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();
 
function animate(lastTime, myRectangle){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    // update
    var date = new Date();
    var time = date.getTime();
    var timeDiff = time - lastTime;
    var linearSpeed = 100; // pixels / second
    var linearDistEachFrame = linearSpeed * timeDiff / 1000;
    var currentX = myRectangle.x;
 
    if (currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
        var newX = currentX + linearDistEachFrame;
        myRectangle.x = newX;
    }
    lastTime = time;
 
    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);
 
    // draw
    context.beginPath();
    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
 
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = myRectangle.borderWidth;
    context.strokeStyle = "black";
    context.stroke();
 
    // request new frame
    requestAnimFrame(function(){
        animate(lastTime, myRectangle);
    });
}
 
window.onload = function(){
    var myRectangle = {
        x: 0,
        y: 50,
        width: 100,
        height: 50,
        borderWidth: 5
    };
 
    var date = new Date();
    var time = date.getTime();
    animate(time, myRectangle);
};


// animation start & stop

window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();
 
function drawRect(myRectangle){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
 
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = myRectangle.borderWidth;
    context.strokeStyle = "black";
    context.stroke();
}
 
function animate(lastTime, myRectangle, animProp){
    if (animProp.animate) {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
 
        // update
        var date = new Date();
        var time = date.getTime();
        var timeDiff = time - lastTime;
        var linearSpeed = 100;
        // pixels / second
        var linearDistEachFrame = linearSpeed * timeDiff / 1000;
        var currentX = myRectangle.x;
 
        if (currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
            var newX = currentX + linearDistEachFrame;
            myRectangle.x = newX;
        }
        lastTime = time;
 
        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);
 
        // draw
        drawRect(myRectangle);
 
        // request new frame
        requestAnimFrame(function(){
            animate(lastTime, myRectangle, animProp);
        });
    }
}
 
window.onload = function(){
    var myRectangle = {
        x: 0,
        y: 50,
        width: 100,
        height: 50,
        borderWidth: 5
    };
 
    /*
     * make the animation properties an object
     * so that it can be modified by reference
     * from an event
     */
    var animProp = {
        animate: false
    };
 
    // add click listener to canvas
    document.getElementById("myCanvas").addEventListener("click", function(){
        if (animProp.animate) {
            animProp.animate = false;
        }
        else {
            animProp.animate = true;
            var date = new Date();
            var time = date.getTime();
            animate(time, myRectangle, animProp);
        }
    });
 
    drawRect(myRectangle);
};


// mouse position
function writeMessage(canvas, message){
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
}
 
function getMousePos(canvas, evt){
    // get canvas position
    var obj = canvas;
    var top = 0;
    var left = 0;
    while (obj && obj.tagName != 'BODY') {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }
 
    // return relative mouse position
    var mouseX = evt.clientX - left + window.pageXOffset;
    var mouseY = evt.clientY - top + window.pageYOffset;
    return {
        x: mouseX,
        y: mouseY
    };
}
 
window.onload = function(){
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
 
    canvas.addEventListener('mousemove', function(evt){
        var mousePos = getMousePos(canvas, evt);
        var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
        writeMessage(canvas, message);
    }, false);
};

'언어로그 > Html/Javascript/CSS' 카테고리의 다른 글

HTML5 Canvas API  (0) 2012.03.11
jquery 간략한 사용법  (0) 2011.10.15
[HTML5] 데이터 스토리지  (0) 2011.06.26
HTML 소개  (0) 2011.06.13
Canvas, HTML5
트랙백 0개 , 댓글 0개

[HTML5] 데이터 스토리지

언어로그/Html/Javascript/CSS 2011. 6. 26. 16:55



HTML5 학습 참고 사이트
W3School :  http://www.w3schools.com


웹브라우저 클라이언트 단에 사용자에게 편리한 기능을 제공하기 위해 데이터를 저장해야 할 경우가 있다.
예를  들어  쇼핑몰 사이트에서 로그인을 하지 않아도, 쇼핑을 하고 상품을 담아둘 수 있는 장바구니 기능을 생각해보자. 
장바구니에 담긴 상품들은 웹브라우저를 종료하고 나중에 다시 쇼핑물을 다시 방문했을 때도 상품항목이 남아있어서 
사용자는 편리하게 이어서 쇼핑을 할 수 있다. 

만일 매번 방문할 때마다 사용자의 쇼핑상품이 삭제되어 버린다면 상당히 번거로울 것이다. 이처럼 사용자에 기호 등과 
관련된 정보를 웹브라우저 클라이언트에 저장을 하면 사용자에게 편리한 기능을 제공할 수 있다.  이러한 요구사항을 
만족하기 위한 데이터 스토리지 메커니즘을 이 포스트에서 소개하겠다. 

Cookie를 사용하는  방식이 오래전부터 사용되어 왔으며,  HTML5에서는 쿠키의 단점을 보완하기 위해 웹 스토리지 API 와
웹SQL 데이터베이스 API를 제공한다. 이에 대해서 알아보자. 



1. Cookie
Netscape 사에서 개발했으며, 단순히 key와 value의 데이터쌍을 저장하는 텍스트 파일이다.  
Cookie 를 구성하는 데이터에는 name-value, expiry date, Domain and Path 가 있다 그 의미는 다음과 같다. 
name-value 
모든 쿠키는 name-value 쌍을 구성되며, 쿠키의 이름(name)을 통해 정보(value)를 읽을 수 있다. 

expiry date
쿠키가 폐기되는 유효기간. 명시하지 않으면 브라우저를 닫을 때 폐기된다. 만료일은 UTC(표준시)로 설정되야 한다. 

Domain and Path
도메인은 브라우저가 쿠키를 보낼 도메인 주소를 의미하며, Path는 쿠키를 활성화되는 도메인의 디렉토리를 지정한다. 

 쿠키는 자바스크립트 상에서 document.cookie 속성을 통해 접근할 수 있다.  아래의 코드를 보자. 

document.cookie = 'ppkcookie1=testcookie; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/'

document.cookie = 'ppkcookie2=another test; expires=Fri, 3 Aug 2001 20:47:11 UTC; path=/'

쿠키값을 설정할 때는 위에서와 같이 정해직 포맷에 맞춰  설정해야 한다.  순서는 다음과 같다. 

1 먼저 name-value 쌍을 설정한다
2 다음 세미콜론; 과 공백이 온다
3 다음으로 적절한 형식으로 만료일이 온다. 
4 다시 세미콜론과 공백이 온다
5 다음 path가 온다 

위의 예제에서 ppkcookie2의 값은 이전 쿠키값을 덮어 씌우지 않고 추가된다는 것에 주목하자. 

쿠키를 삭제하기 위해서는 오늘 날짜 이전으로 만료일을 설정하면 브라우저가 만료됐음을 확인하고 삭제한다. 
document.cookie 값 설정시 만료일을 -1로 설정하면 쿠키값이 즉시 삭제되며,  0으로 설정하면 브라우저를 닫을 때
삭제된다. 




2. 웹 스토리지

엄청나게 발전한 쿠키라고 생각할 수 있으며,  쿠키와 비슷하게 name=value 쌍으로 데이터를 저장한다. 
도메인당 최대 5Mb 를 지원하며 sessionStorage, localStorage 를 제공한다. sessionStorage는 브라우저가  닫히기까지(세션)
동안 유효하며,  localStorage 는 명시적으로 데이터를 지우지 않는 한 계속 남아있게 된다. 


브라우저별 웹스토리지 지원현황은 아래와 같이 최신버전의 브라우저 모두에서 지원하는 기능이다. 




* 파이어폭스는 현재 스토리지에 대한 보안정책을 다른 브라우저와 다르게 구현하여서 쿠키를 반드시 지원해야만 
스토리지 API를 사용할 수 있다고 한다. 그래서 쿠키를 사용가능한지 사전에 검사해야 한다. 


쿠키가 가용한지 검사하는 코드는 아래와 같이 쿠키를 하나 생성하고 값 읽기를 시도해봐서 가용한지를 확인할 수 있다. 
var cookieEnabled = (function() {
	var id = new Date().getTime();
	
	document.cookie = 'cookieprobe=' + id + ' ;path=/';
	
	return (document.cookie.indexOf(id) != -1);
})();



웹 스토리지 API 형태는 다음과 같다. 

속성
unsigned int length

메소드 
DOMString  key(unsigned int index)
any getItem(DOMString  key)
void setItem(DOMString key, data)
void removeItem(DOMString  key)
void clear()


데이터 저장 및 조회
sessionStorage.setItem(‘twitter’, ‘@rem’);
sessionStorage.twitter = ‘@rem’;

sessionStorage.getItem(‘cost’);
sessionStorage.twitter


key 메소드 사용
for (var i = 0; i < sessionStorage.length; i++) {
	alert(sessionStorage.key(i) + ‘=’ + sessionStorage.getItem(sessionStorage.key(i)));
}


데이터 삭제
removeItem 과 clear 함수를 사용할 수 있다. removeItem 은 지정한 key에 해당하는 아이템을 삭제하며,   clear 함수는 모든 
아이템을 삭제한다. 



문자열 이외 저장
웹 스토리지는 문자열 형태로 데이터를 저장하기 때문에 객체를 저장할 수 없다.  JSON를 사용해서 객체를 텍스트화하여
저장하고 다시 텍스트를 객체로 복원하는 방식으로 우회하여 사용해야 한다.  

JSON를 사용하여 객체화하고 복원하는 코드는 다음과 같다. 
function stringify() {
	var videoDetails = {
		author: '감우성',
		description: '무법자',
		rating: '5.51'
 	};
 
		
 	sessionStorage.setItem('videoDetails', JSON.stringify(videoDetails));
}

function parse() {
	var videoDetails = JSON.parse(sessionStorage.getItem('videoDetails') || 'null');
	alert(videoDetails.author + "\n" + videoDetails.description + "\n" +  videoDetails.rating);
}




 
3. 웹 SQL 데이터베이스

웹SQL 데이터베이스는 웹브라우저에 내장된 데이터베이스이며, 대량의 데이터를 관리하기에 유용하다. 
SQL 처리 후 콜백형태로 다음 실행내용을 전달하며 비동기 방식으로 동작하며,   서버가 아닌 로컬 데이터베이스를
사용하기 때문에 커넥션을 맺고 닫는 부분이 없다.  한 도메인에는 동일한 이름을 갖는 DB 버전은 하나만 존재한다. 
(현재  1.0 버전을 사용하는데 같은 이름의 DB가 있을 수 없다는 의미 같다. )
 데이터베이스 작업 간에 트랜잭션을 시작하고 그 콜백으로 SQL문을 수행하는 처리를 한다. 데이터 베이스 크기의
제한은 없지만 일반적으저 브라우저들이 5Mb의 크기로 제한한다. 


브라우저별 웹 SQL 데이터베이스의 지원현황은 아래와 같다. 
아직은 브라우저에서의 지원이 미비하기 때문에, 사용시 반드시 지원유무를 확인하는 처리를 해야한다는 것에 주의하자. 





데이터베이스를 조작하는 코드는 아래와 같다. 


DB 생성 및 Open / API 지원유무 확인하기
var db; 
if (window.openDatabase) {
	db = openDatabase(‘mydb’, ‘1.0’, ‘My first database’, 2 * 1024 * 1024);
}
openDatabase의 인자는 DB이름, 버전, DB에 대한 설명, DB 의 크기이다.
위 코드에서는 mydb 라는 이름의  2MB(2 * 1024 * 1024) 데이터베이스를 생성하였고,
window.openDatabase 속성을 확인하여  웹SQL 데이터베이스  API를 지원하는지 확인했다. 





SQL 실행
db.transaction(
    function(tx) {
  tx.executeSql(sql, [], function () {
  // 실행코드
  }); 
  },
  function(tx, error) { 
      alert(‘에러: ‘ + error.message);   
  }
});

function(tx,error) 함수는 transaction 실패시 실행되는 에러처리 함수로 옵션사항이다. 별도의 에러처리를 하지 않아도
된다면 명시하지 않아도 된다. 
또 executeSql(sql, [], function () {}) 함수는 실제로 SQL을 수행하는 함수로 필수 인자는 실행할 질의문 sql 인자 뿐이다. 
[] 는 SQL 의 와일드 카드 문자에 삽입할 파라미터를 담은 배열이며, function()은  SQL 을 수행후 후속 작업을 처리할 
함수이다. 





테이블 생성하기 
var db; 
if (window.openDatabase) {
	db = openDatabase(‘tweetdb’, ‘1.0’, ‘All my tweets’, 2 * 1024 * 1024); 
	db.transaction(function (tx) {
	tx.executeSql(‘CREATE TABLE tweets (id, date, tweet)’); });
}






데이터 삽입하기
function saveTweets(tweets) { 
	tweets.results.forEach(function (tweet) {
		db.transaction(function (tx) { 
			var time = (new Date(Date.parse(tweet.created_at))).getTime(); 
			tx.executeSql(‘INSERT INTO tweets (id, screen_name, ¬date, text) VALUES (?, ?, ?, ?)’, 
			[tweet.id, ¬tweet.from_user, time / 1000, tweet.text]);
			 					
		}); 
	});
}





데이터 조회하기 
var tweetEl = document.getElementById(‘tweets’); 

function show(amount) {
	db.transaction(function (tx) { 
		tx.executeSql(‘SELECT * FROM tweets’ + (amount != ‘all’ ? ‘ WHERE date > strftime(“%s”, “now”, “-’ + amount + ‘ minutes”)’ : ‘’), [], 
			function (tx, results) {
				var html = [], len = results.rows.length;
				for (var i = 0; i < len; i++) { 
					html.push(‘<li>’ + results.rows.item(i).text + ‘</li>’);
				}
				tweetEl.innerHTML = html.join(‘’); 
			}
		});
	});
}


위 SQL문에서 strftime(string format time) 함수는 sqlite 의 함수로 포맷팅 문자열에 맞게 날짜를 출려하는 함수이다. 
위 코드에서는 amount가 all 아니면 현재시간(now)에서 amount 분만큼을 뺀 값을 1970-01-01 이후 경과한 초(%s)로 나타내고있다.

다음 링크에서 함수에 대한 설명을 참고하자 :  SQLite

 


데이터 조회시에는 다음과 같은 속성을 사용할 수 있다.

insertId :  삽입시에만 사용
rowAffected : select 조회시에는 이 값은 0임
rows : 컬렉션. rows 객체를 사용해
results.rows.item(i).screen_name 형태로 필드값을 가져올 수 있음. 
results.rows.length 로 컬렉션의 길이를 알수 있음. 




 
 

'언어로그 > Html/Javascript/CSS' 카테고리의 다른 글

HTML5 Canvas API  (0) 2012.03.11
jquery 간략한 사용법  (0) 2011.10.15
[HTML5] 데이터 스토리지  (0) 2011.06.26
HTML 소개  (0) 2011.06.13
HTML5, webSQL, 웹sql, 웹스토리지
트랙백 0개 , 댓글 0개

HTML 소개

언어로그/Html/Javascript/CSS 2011. 6. 13. 23:22



1. HTML (Hyper Text Markup Language)
문서가 서로 다른 OS에서 동일한 형식으로 보여지게 하기위한 필요성에 의해 등장했으면, SGML 이란 마크업 언어를
원류로 하고 있다.


2. HTML의 구성
<head> 와 같은 눈에 보이지 않는 요소 와 <table>. <div>와 같은 눈에 보이는 요소 로 나뉜다
눈에 보이는 요소는 다시 block-level 과 inline-level 로 구분된다.
 block-level 은 <div>와 같이 한라인에 하나만 위치할 수 있는 요소이고,
inline-level 은  <span>과 같이 한라인에 복수로 위치할 수 있는 요소이다.

<div style="border:1px gray solid;">block-level element </div>
<div style="border:1px gray solid;">block-level element </div>
   
<span style="border:1px gray solid;">inline-level element </span>
<span style="border:1px gray solid;">inline-level element </span>

 block-level 요소는 inline-level 요소를 포함할 수 있지만, 그 반대는 불가능하다 .



2.1 block-level elements
p               - 문단태그
h1~h6        - 글씨 태그
ul              - 도형목록 태그
ol              - 순서목록 태그
pre            - 공백까지 그대로 출력
dl                
div             - 영역을 지정해줌
noscript       
blockquote 
form           
hr                - 수평선을 그려줌
table
fieldset
address


2.2 inline-level elements
samp
kbd
var
cite
abbr
acronym
a                  - 링크
img               - 이미지
object
br
script
map
q
sub
sup
span
bdo
input
select
textarea
label
button



 2.3 table 태그
사이트에 레이아웃을 잡는데 활용되며, 중첩해서 사용할 수 있다.
 
<table border=1 width="700" height="400">
 <tr>
     <td height="10%">상단</td>
 </tr>

 <tr>
     <td height="80%" width="100%">
     <table border=1 height="100%" width="100%" >
             <tr>
               <td> 테스트 1</td>
               <td> 테스트 2</td>
            </tr>
        </table>
        </td>
    </tr>

<tr>
   <td height="10%">하단</td>
</tr>
</table>


2.4 table 선을 단선으로 표현하기 : border-collapse
table에 border 속성을 주면 2중 선으로 테투리가 그려지는데, style 속성으로 border-collapse:collapse 를 줘서 단선으로 그릴수 있다.
 
  <table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse;border:1px gray solid;">
  <tr>
   <td style="border:1px gray solid;">Css </td>
   <td style="border:1px gray solid;">Cascading Style Sheet</td>
  </tr>
 </table>


2.5 table 셀 크기 고정하기 : table-layout 속성
 table 태그에 한글을 쓰면 중간중간 공백이 들아가기 때문에 테이블의 width에 맞춰 자동 줄바꿈이 된다.
그러나 공백이 없는 영문 주소와 같은경우,  width 를 지정해줘도 밀리는 경우가 생긴다.
이때 table 태그 style 속성에 style="table-layout:fixed" 를 지정해서 밀리는 것을 방지할 수 있다. 
그러나 이럴경우, width 를 넘어서는 부분은 내용이 잘리는데, word-break:break-all 속성으로  width에 맞춰
줄바꿈하게 해줄 수 있다.
 
 
<!--  한글은 공백으로 인해 자동 줄바꿈 -->
  <table width="200" cellpadding="5" cellspacing="2" border="1" align="center">
  <tr>
   <td> 셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.</td>  
  </tr>
  </table>
  
  <!-- 공백이 없는 영문주소는 width를 지정해도 셀이 측면으로 밀림 -->
  <table width="200" cellpadding="5" cellspacing="2" border="1" align="center">
  <tr>
   <td>http://www.homejjang.com/09/border-callapse.php</td>  
  </tr>
  </table>
  <!-- table-layout:fixed 를 설정해서 셀 크기 고정 : 하지만 내용이  잘린다. -->
  <table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout: fixed;">
  <tr>
   <td>http://www.homejjang.com/09/border_collapse.php</td>
  </tr>
  </table>
  <!-- word-break:break-all; 지정해서 width에 맞춰  줄바꿈이 일어나게 함   -->
  <table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed; word-break:break-all;">
  <tr>
   <td>http://www.homejjang.com/09/border_collapse.php</td>
  </tr>
  </table>

'언어로그 > Html/Javascript/CSS' 카테고리의 다른 글

HTML5 Canvas API  (0) 2012.03.11
jquery 간략한 사용법  (0) 2011.10.15
[HTML5] 데이터 스토리지  (0) 2011.06.26
HTML 소개  (0) 2011.06.13
block-level, html, HTML5, inline-level, table
트랙백 0개 , 댓글 0개
1

티스토리툴바