속도는 느려지고, 쓰기 위해서 이것 저것 해야해서 불편한 동기화를 대체 왜 해야하는 걸까?


동기화의 이유는 순서 또는 공유 자원 때문이다.

순서는 말 그대로.. A가 처리 된 이후에 B가 처리되어야하는 상황(입금이 되면 상품을 발송할 게 같은.)일 때 두 작업을 처리하는 작업자가 서로 다르다면 순서가 안 맞는 (입금이 안됬어도 상품을 줄게) 상황이 일어날 수 있으므로.. 순서를 맞출 때 쓰는 것이다.


두 작업자가 하나의 자원에 동시 접근(Write / Read)하는 것인데...

그림은 그냥 동시에 접근하는 것 처럼 보이지만 실제로는 한 대가 다닐 수 있는 병목 구간에 두 자동차가 같이 들어가려는 것 같은 상황이다.


사실 컴퓨터가 작업을 동시에 처리하는 능력이 없고, 하나 씩 처리한다는 것에 비춰볼 때.. 순서가 있다면 그렇다면 사실상 '동시 접근' 은 없는 게 아닌가? 하는 생각이 들었다.


동시 접근이 없다? 그런데 왜 문제가?..



OS가 행하는 스케쥴링은 각 작업자에게 시간을 잘게 잘라서(time slice) 분배하는데.. 위 같은 경우 작업자 A가 공유자원을 미처 다 쓰지 못했을 때, B가 바로 들어오게 된다. 그러니까 상황이 이렇게 된다.

빨간 선 간의 간격이 작업을 하게 지급된 퀀텀(quantum)이라고 가정했을 때,

위와 같이 작업을 하러 들어와서 A를 처리하고 B를 처리한다면 공유자원 문제는 절대로 발생하지도 않을 것이고, 모든 동기화 기법들은 장사를 접어야한다.


그런데 현실은 녹록치 않아서 (단위가 무려 천분의 1초인 millisecond를 10 ~ 20초 지급 받는다) 간격은 더럽게 짧고, 해당 간격이 끝났다면 다음 작업자 (B)에게 넘어가는 식이다.

즉 A - B - A - B - A - B 로 작업이 끝나게 된다.


물론 이 상황은 스케쥴러의 정책에 따라 다르다. 라운드 로빈 같은 경우는 다 똑같이 공평한 시간이 분배되고, HRN 같은 경우 긴 작업과 짧은 작업에 차등성을 부여하는 등 차이가 있을 수 있다.



아무튼 문제가 되는 것은

ABAB.. 로 시작되었을 때 이다. 공유자원이 문제라고 했는데..

A -> B -> B 로 돌아오는 이 과정의 사이 사이에는 문맥[상황] 교환(context switching)이 일어나게 된다. 



이처럼 시간이 지날 때마다 CPU는 A - B - A - B로 작업자가 전환되게 된다. 

문제는 작업이 전부 끝나지 않았을 때, 쓰레드에게 모든 했던 처리를 버리라고하면?

인셉션이 된다. A(10%) - [A버림] > B(10%) - [B버림] -> A(다시 10%) ...


당연히 처리해놓았던 것을 저장해두어야하고, 그것을 메모리 내에 저장해두게 된다. 그리고서는 다시 레지스터에 올려 작업을 시작하게 되는 데...


우리가 두 스레드 A , B 를 통해 공유 자원(주로 데이터 영역)을 변경한다면

A B가 작업하고 난 뒤에 우리가 원하는 형태는


A와 B의 작업이 완료된 공유자원. 의 상태일 것이다.



[ 공유자원 ]

[ A의 작업이 반영된 공유자원 ] <- A 작업 끝

[ A의 작업이 반영된 B의 작업이 반영된 공유자원] < - B 작업 끝



하지만 현실은..


[ 공유자원 ]

 < --- 공유 자원을 가져온 A의 작업 중...

    ㄴ 인터럽트 / 스레드 B 실행

       ㄴ A의 상태 저장 (context switching)

[ 공유자원 ]

 < --- 공유 자원을 가져온 B의 작업 중...

    ㄴ 인터럽트 / 스레드 A 실행

      ㄴ B의 상태 저장 (context switching)

 < --- A의 작업을 반영

[ A의 작업이 반영된 공유자원 ]

 < --- B의 작업을 반영

[ B의 작업이 반영된 공유자원 ]



...?!


최종적으로 B의 작업이 반영된 공유자원이 남았다.


이는 B가 [A의 작업이 반영된 공유자원]을 가져간 게 아니기 때문이다.


[ 공유자원 ]

- > 공유자원을 가져온 A의 작업 시작

[ A의 작업이 반영된 공유자원 ] <- A 작업 끝

- > A의 작업이 반영된 공유자원을 가져온 B의 작업 시작

[ A의 작업이 반영된 B의 작업이 반영된 공유자원] < - B 작업 끝


의 구조로 이루어져야하는 절차가


[공유자원 ]

- > 공유자원을 가져온 A의 작업 시작

  ㄴ interrupt / context switching

- > 공유자원을 가져온 B의 작업 시작

[ A의 작업이 반영된 공유자원 ] <- A 작업 끝

[ B의 작업이 반영된 공유자원 ] <- B 작업 끝


와 같이 되기 때문이다.


물론 스레드 예제를 실행시켜보면 알겠지만.
ABABABABABAB 가 아니라.
AAAABBBABABBBAB 라던가 ABAABBAABBBBAA처럼
균일하지 않게 스레드가 실행되므로 위처럼 순서가 지켜지지 않고
B나 A가 연속적으로 처리되는 일도 있을 수 있다.

이런 것을 비 결정론적 성질(버그)이라고 하는데.. 간단히 말해서 할 때마다 다르다는 얘기다.

우리가 원하는 

[ A의 작업이 반영된 B의 작업이 반영된 공유자원 ] 이라는 상태는

AAA BBB 해서 작업이 끝나버린다면 완벽하게 반영될 것이고... 

이는 오류 없음 의 결과를 도출하게 된다.


그렇지만 스케쥴링이 ABABAB 라던가 AABBBA 같이 된다면 결과는 예측할 수 없게 된다.


비단 멀티 스레드만이 아니라 멀티 프로세스 환경 등에서도 일어날 수 있다. 공유자원을 두고 둘 이상의 작업자가 진입하면 일어날 수 있는 현상인 것이다. 이를 경쟁 상태(race condition)이라고 한덴다...


아무튼 그래서 둘 이상의 작업자가 공유자원에 접근하게 되는 환경에서는 연산이 섞이는 일이 없도록 원자적 연산(atomic operation)을 보장해주거나 [이 경우 값 넣고 있는 동안은 세트로 묶여서 섞이지 않는 범위 까지 연산을 보장해준다]


동기화 기법을 쓰게 되는 것이다.







Posted by GENESIS8

댓글을 달아 주세요

  1. juicyjerry 2020.12.16 00:42 신고  댓글주소  수정/삭제  댓글쓰기

    정리를 잘 해주셔서 잘 읽었습니다.
    유익한 정보 잘 보고갑니다~ :)

원본 출처 : http://www.kim-taesuk.com/11



MySQL 저장 프로시져 ( Stored Procedure ) 내에서, 쿼리 에러 발생시,

그 에러에 대한 HANDLER 가 정의되어 있지 않으면, 에러 발생 위치에서 Stored Procedure 가 종료됨.

이 때, 


1) 에러 처리 구문 실행 후, Stored Procedure 종료 하는 방법

2) 에러 처리 구문 실행 후, 다음 쿼리를 계속 실행 하는 방법

3) DECLARE ... HANDLER 구문 분석

4) DECLARE ... HANDLER 구문 특이사항



- 아 래 - 


1) 에러 처리 구문 실행 후, Stored Procedure 종료 하는 방법


DECLARE EXIT HANDLER FOR SQLEXCEPTION

  BEGIN

    -- 여기에 에러 처리 구문 추가!

  END;



2) 에러 처리 구문 실행 후, 다음 쿼리를 계속 실행 하는 방법


DECLARE CONTINUE HANDLER FOR SQLEXCEPTION

  BEGIN

    -- 여기에 에러 처리 구문 추가!

  END;



3) DECLARE ... HANDLER 구문 분석


구문 : DECLARE [handler_action] HANDLER [condition_value] [statement]


[handler_action]

CONTINUE : 계속 진행

EXIT : 중지, 종료


[condition_value]


mysql_error_code : MySQL 에러 코드 ( number 값 )  [참조Server Error Codes and Messages]


SQLSTATE [VALUE] : 

5 자리의 문자로 정의된, SQL 상태값. 

'00' 으로 시작하는 경우 정상. 

SQLSTATE 는 ODBC 에서 정의된 상태값이므로, mysql의 에러 코드와 100% 매칭되지는 않음.

[참조Server Error Codes and Messages]


condition_name : 미리 정의한 조건의 상수값 [참조DECLARE ... CONDITION Syntax]


예) mysql 에러 코드 1051 발생시의 에러 처리

DECLARE CONTINUE HANDLER FOR 1051

  BEGIN

    -- body of handler

  END;


또는 

DECLARE no_such_table CONDITION FOR 1051;

DECLARE CONTINUE HANDLER FOR no_such_table

  BEGIN

    -- body of handler

  END;



SQLWARNING : SQLSTATE 값이 '01' 로 시작하는 경우


NOT FOUND : SQLSTATE 값이 '02' 로 시작하는 경우


SQLEXCEPTION : SQLSTATE 값이 '00', '01', '02' 로 시작하지 않는 경우.


[statement] : 조건 만족시 실행할 구문



4) DECLARE ... HANDLER 구문 특이사항


[statement] 위치에  ITERATE 또는 LEAVE 구문을 사용할 수 없음.



'프로그래밍 > MySQL' 카테고리의 다른 글

이벤트 스케줄러(Event Scheduler)  (1) 2016.06.21
MySql DB 작성해보기  (1) 2016.03.13
MySQL 저장 프로시져 내에서 발생한 에러 처리 (Error Handling)  (0) 2016.02.23
MySql 설치하기  (0) 2016.02.21
Auto Increment란  (0) 2016.02.05
MySql 주석을 달자  (0) 2016.02.01
Posted by GENESIS8

댓글을 달아 주세요

출처 원본 : http://www.homejjang.com/05/layout.php


테이블을 이용한 레이아웃(Layout)

홈페이지를 제작할때 가장 많이 사용되는 태그는 <table>태그입니다.(<tr>,<td>와 함께)

이유는 레이아웃을 잡을때 <table>태그만큼 효율적인 것이 없기 때문입니다.

대부분의 홈페이지는 top 부분과 left 부분에 네비게이션(메뉴)이 위치합니다.

이를 최대한 간단하게 만들어 보겠습니다.

<table width="800" cellpadding="0" cellspacing="0" border="0" align="center">
<tr bgcolor="#8080FF" align="center">
 <td width="100">홈페이지 로고</td>
 <td width="100">메뉴1</td>
 <td width="100">메뉴2</td>
 <td width="100">메뉴3</td>
 <td width="100">메뉴4</td>
 <td width="100">메뉴5</td>
 <td width="200"><!-- 여백 --></td>
</tr>
<tr height="5">
 <td colspan="7"><!-- 여백 --></td>
</tr>
</table>

<table width="800" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
 <td width="150" valign="top" bgcolor="#8080FF">
  <table width="130" cellpadding="5" cellspacing="0" border="0" align="center">
  <tr>
   <td>하위메뉴1</td>
  </tr>
  <tr>
   <td>하위메뉴2</td>
  </tr>
  <tr>
   <td>하위메뉴3</td>
  </tr>
  <tr>
   <td>하위메뉴4</td>
  </tr>
  <tr>
   <td>하위메뉴5</td>
  </tr>
  </table>
 </td>
 <td width="650" valign="top">
  <table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
   <td>여기에 본문이 옵니다.</td>
  </tr>
  </table>
 </td>
</tr>
</table>

다소 복잡한 테이블이지만 실제로 만들어 보면 크게 어렵지 않습니다.

홈페이지 로고메뉴1메뉴2메뉴3메뉴4메뉴5
하위메뉴1
하위메뉴2
하위메뉴3
하위메뉴4
하위메뉴5
여기에 본문이 옵니다.

너비의 단위는 %를 사용하였지만 100% 레이아웃을 차지하는 홈페이지가 아닌 이상 % 보다는 픽셀을 사용하는 것이 보다 일반적입니다.

그리고 테이블의 셀안에 다시 테이블이 들어가는 것을 볼 수 있습니다.

테이블을 이렇게 중첩시켜 나가면서 복잡한 레이아웃을 구현합니다.

예제에서는 이미지를 전혀 쓰지 않았지만 대부분의 홈페이지 작업은 전체적인 화면의 이미지를 먼저 만들고 이 이미지를 잘라서 테이블을 이용하여 배치를 하는 방식으로 진행됩니다.




아이프레임이란 내부 프레임(inline frame)이라는 의미로 하나의 HTML문서내에서 다른 HTML문서를 보여주고자 할때 사용합니다.

일반적인 프레임(frame)과 비교해보면 아이프레임은 <frameset> 태그 사이에 올 필요가 없으며, 독립적으로 마치 <img> 태그를 사용하듯 문서내의 원하는 위치에 삽입할 수 있습니다.

아이프레임에서 사용할 수 있는 속성도 <img> 태그과 유사합니다.

src 속성

inline frame 내에 불러올 문서의 주소를 적어주면 됩니다.

홈짱 홈페이지를 불러오는 예제를 만들어 보겠습니다.

<iframe src="http://www.homejjang.com">

width와 height 속성

inline frame의 너비와 높이를 지정할 수 있습니다.

<iframe src="http://www.homejjang.com" width="600" height="300">

frameborder 속성

inline frame의 경계선의 두께를 지정할 수 있습니다.

<iframe src="http://www.homejjang.com" frameborder="0" width="600" height="300">

marginwidth와 marginheight

inline frame의 여백을 지정할 수 있습니다.

<iframe src="http://www.homejjang.com" frameborder="0" width="600" height="300" marginwidth="0"marginheight="0">

scrolling

inline frame내에서 스크롤바 사용여부를 지정할 수 있습니다.

<iframe src="http://www.homejjang.com" frameborder="0" width="600" height="300" marginwidth="0" marginheight="0" scrolling="yes">

scrolling 값을 no로 지정하면 스크롤바가 생기지 않습니다.




배경음악 사용하기 Bgsound와 Embed

좀더 분위기 있는 홈페이지를 만들기 위해서 배경 음악을 사용하는 경우가 많습니다. 그러나 방문자가 배경음악을 원하지 않는 경우도 있으므로 배경음악을 사용할때 아래의 내용을 고려해 봐야 합니다.

  1. 꼭 필요한 곳에만 배경 음악이나 배경음을 넣습니다.
  2. 배경음악을 사용자가 직접 제어 할 수 있도록 합니다. 배경음악을 원치 않는 사용자들이 쉽게 소리를 줄이거나 끌 수 있어야 합니다.
  3. 용량이 많은 배경음악은 페이지 로딩을 방해하는 요소로 작용할 수 있기에 페이지 전체적인 용량을 고려해서 배경음악을 선택합니다.

배경음악 사용 방법

① bgsound

<bgsound src="[Abba] Happy New Year.wma" loop="0">


bgsound element는 인터넷 익스플로러에서만 작동합니다. 그리고 화면에 아무런 내용이 출력되지 않으므로 방문자가 음악을 끄기가 힘듭니다.

loop 속성은 배경음악의 반복 횟수를 지정합니다. -1 이나 INFINITE 값으로 지정하면 계속적으로 반복됩니다.

② embed

<embed src="[Abba] Happy New Year.wma">



embed는 익스플로러뿐 아니라 다른 웹브라우저에서도 작동을 합니다. 그리고 웹브라우저상에 미디어 플레이어가 표시됩니다.

embed 엘리먼트에서 사용할 수 있는 속성은 아래와 같습니다.

  • autostart="true/false" : true의 경우 페이지 로딩시 자동실행되고 false로 지정하면 플레이 버튼을 눌러야 음악이 재생됩니다.
  • hidden="true/false" : 미디어 플레이어가 화면에 출력되는지 여부를 지정합니다.
  • loop="true/false" : 음악의 반복여부를 지정합니다.
  • width="수치" height="수치" : 미디어 플레이어의 크기를 지정합니다. 음악 파일인 경우는 상관없지만 동영상 파일을 재생할때 이 값을 적절하게 조절해 주면 좋습니다.
  • Showcontrols="value" : 미디어 플레이어, value 값은 0 , 1
  • VOLUME = "수치값" : 플레이 되는 음악의 소리 크기를 임의로 설정하는 속성입니다.
  • hspace="value" vspace="value" : 미디어 플레이어의 수직/수평 여백값을 조절하는 옵션입니다. IMG element에서 사용되는거와 동일합니다.
  • mute=1 : 음소거



입력양식(form)은 홈페이지에서 사용자에게 정보를 받을때 사용됩니다.

회원가입을 하거나 혹은 쇼핑몰에서 주문을 하는 경우 사용자의 정보를 입력받을 필요가 있습니다. 이때 입력양식(form) 페이지를 제공하여 정보를 입력하게한 다음 이를 처리하는 페이지를 만들어서 DB에 저장을 합니다.

회원가입 입력폼을 member.html 이라고 한다면 member_confirm.php 와같은 페이지를 만들어서 회원가입 처리를 합니다. 이때 member.html 페이지는 <form> 태그를 이용하여 간단하게 만들수 있지만 member_confirm.php 페이지는 입력받은 정보를 DB에 저장하는 역할을 하기 때문에 프로그래밍 처리를 해야 합니다.

그래서 HTML 만으로는 입력양식만을 만들 수 있을뿐 이를 DB에 저장하는 기능은 만들 수가 없습니다.

대부분의 웹프로그램이 사용자의 정보를 받아서 처리하는 프로세스를 가지므로 <form> 태그는 웹프로그램에서 아주 중요한 위치를 차지합니다.

입력양식(form)의 구성

<form> 태그는 입력양식의 범위를 지정할뿐 화면상에는 아무런 내용이 표시되지 않습니다.

<form>과 </form> 사이에 사용자가 실제적으로 값을 넣을수 있는 텍스트 박스나 체크 박스 등이 위치합니다.

회원가입을 하는 경우 이름이나 주소 등을 텍스트로 입력하는 경우도 있지만 성별이나 생년월일 등은 라디오 버튼이나 셀렉트 박스에서 선택하는 경우도 있습니다.

그러므로 <form>과 </form> 사이에 위치하는 다양한 <form> 요소들을 모두 익혀야 상황에 맞는 입력양식을 만들수 있습니다.

<form> 태그의 속성

<form> 태그에서 사용할 수 있는 주요 속성은 method와 action이 있습니다.

<form method="get" action="member_confrim.php">

</form>

(1) method
웹서버와의 통신 방법을 지정합니다. post와 get 두가지 값 중 하나를 사용할 수 있습니다.

(2) action
입력양식에 입력된 값을 받아서 DB에 저장하는 페이지를 지정합니다. 이는 php나 asp와 같은 웹스크립트 언어를 이용하여 제작합니다.


Fieldset과 Legend element

fieldset element는 서로 연관성있는 컨트롤들을 하나로 묶을 수 있도록 해 주며, legend element는 제목을 붙이는 역할을 합니다. 어떻게 보면 legend element를 사용하기 위해서 fieldset element를 사용한다고 볼 수도 있습니다.

<fieldset>
    <legend><b>메일링 리스트</b></legend>
    <input type=checkbox>html
    <input type=checkbox>css
    <input type=checkbox>javascript
</fieldset>

간단한 예제이니 한번 만들어보면 쉽게 이해가 갈겁니다.

메일링 리스트html css javascript



마퀴 엘리먼트(Marquee element) 스크롤 되는 영역을 지정

 marquee element 는 스크롤 되는 영역을 지정합니다. 

<marquee>와 </marquee> 사이에 텍스트나 이미지 등이 위치하면 스크롤이 됩니다. 제한된 공간에서 보다 많은 정보를 보여주기 위한 용도로 사용됩니다.

direction

direction 속성은 움직이는 방향을 지정합니다.

<marquee direction="right">오른쪽 방향으로 흐르는 텍스트...</marquee>
<marquee direction="left">왼쪽 방향으로 흐르는 텍스트...</marquee>
오른쪽 방향으로 흐르는 텍스트...왼쪽 방향으로 흐르는 텍스트...


behavior

behavior 속성은 컨텐츠가 어떻게 스크롤 될것인지를 지정합니다.

  • scroll : 기본값으로 마퀴 영역의 경계에서부터 스크롤됩니다.
  • slide : scroll과 거의 동일하지만 마퀴 영역의 경계에서 더이상 스크롤 되지 않고 멈춥니다. 컨텐츠가 화면상으로 슬라이딩 되면서 출력되는 느낌입니다.
  • alternate : 마퀴 영역의 경계까지 갔다가 다시 돌아옵니다. 왔다 갔다하면서 화면상에 언제나 보이죠.
아래 예제를 보시면 쉽게 이해할 수 있습니다.

<marquee behavior="scroll">behavior="scroll"</marquee>
<marquee behavior="slide">behavior="slide"</marquee>
<marquee behavior="alternate">behavior="alternate"</marquee>
behavior="scroll"behavior="slide"behavior="alternate"



scrollamount

scrollamount 속성은 한번 스크롤될때마다 얼마만큼 스크롤되는지를 지정합니다. 기본값은 1픽셀입니다.

<marquee scrollamount="10">scrollamount 속성을 10픽셀로 지정</marquee>

위와 같이 scrollamount 속성을 10픽셀로 지정하면 한번 스크롤될때마다 10픽셀씩 움직이므로 좀더 빠르게 움직이는 느낌을 받습니다. 그러나 이 값을 지나치게 높이면 자연스럽지 못하므로 적당하게 올려야 합니다.

scrollamount 속성을 10픽셀로 지정



loop

loop 속성은 스크롤되는 횟수를 지정합니다. 기본값은 -1 이며 이는 계속적으로 반복해서 스크롤 된다는 의미입니다.

<marquee loop="1">loop 속성을 1로 지정</marquee>

위와 같이 loop 속성을 1로 지정하면 한번만 스크롤되고 더이상 스크롤되지 않습니다.

loop 속성을 1로 지정

width와 height

marquee element 는 스크롤 되는 영역을 지정하므로 그 영역의 width와 height를 지정할 수 있습니다.

<marquee width="300" height="100" bgcolor="#8080FF">loop 속성을 1로 지정</marquee>
loop 속성을 1로 지정


기타

align, hspace, vspace, transparency 등의 속성을 사용할 수 있습니다.



이미지맵(image map)

이미지맵은 하나의 이미지에 여러개의 링크를 걸때 사용합니다.

이미지맵을 사용하면 HTML 소스가 간단해 지는 장점이 있습니다.

<img src="imgmap.gif" alt="imgmap.gif" usemap="#001" border="0">
<map name="001">
 <area shape="rect" coords="42,41,154,66" href="/01/homepage.php" target="_blank">
 <area shape="rect" coords="42,76,152,100" href="/03/html.php" target="_blank">
 <area shape="rect" coords="40,113,150,138" href="/05/html2.php" target="_blank">
</map>
imgmap.gif 

먼저 이미지맵을 적용할 이미지에 usemap 속성을 사용하여 이미지맵의 이름을 지정해 주어야 합니다.

<img src="imgmap.gif" alt="imgmap.gif" usemap="#001" border="0">

001이라는 이름을 가진 이미지맵을 사용하겠다는 의미이니다. 이때 #을 사용함에 주의를 기울여야 합니다.

그리고 나서는 <map>태그를 사용하여 이미지맵을 만듭니다.

<map name="001">
...
</map>

이미지맵에서 하이퍼링크의 영역을 지정하기 위해서 <area>태그를 사용합니다.

<area>태그의 shape속성은 이미지맵의 형태를 지정합니다. rect(사각형), circle(원형), poly(다각형) 등의 속성값을 가질 수 있습니다.

coords속성은 좌표값을 지정합니다. 이미지의 왼쪽 모서리를 기준으로 하이퍼링크 영역의 시작과 끝 부분을 지정합니다.

이 coords속성값을 지정하기가 까다롭습니다. 그래서 이 부분은 텍스트 에디터에서 직접 코딩하지 않고 이미지맵을 생성하는 유틸리티를 사용하는 것이 좋습니다.

나모나 드림위버를 사용하면 이미지 상에서 영역을 지정하기에 아주 쉽게 이미지맵을 생성할 수 있습니다.

그러나 텍스트 에디터를 사용하는 경우 이 부분이 불편합니다.

이미지맵을 생성하는 프로그램을 이용하면 이미지상에서 바로 영역을 지정하고 이를 HTML 문서로 저장할 수 있어 텍스트 에디터의 단점을 보완해 줄 수 있습니다.


오브젝트 엘리먼트(Object element) HTML 문서에 멀티미디어 삽입

object element 는 문서내에 플래시나 동영상과 같은 개체(Object)를 삽입하는데 사용됩니다.

HTML 문서에 개체를 삽입하는 태그는 여러가지가 있습니다. 동영상과 음악과 같은 멀티미디어를 삽입하는 embed, 자바 애플릿을 삽입하는 applet 엘리먼트 등이 있습니다. 최근의 추세는 object 엘리먼트로 통합되는 방향입니다.

embed 와 object 의 차이점

embed 엘리먼트는 개채삽입으로 자신의 컴퓨터에 해당 미디어파일을 실행할수 있는 프로그램이 없다면 실행이 되지 않습니다. 그러나 object 엘리먼트는 웹에서 개채를 로드해서 재생되므로 프로그램이 없어도 실행이 가능합니다.

HTML 페이지에 멀티미디어를 추가하는데 embed 엘리먼트도 사용할 수 있지만 embed 엘리먼트를 사용하면 보다 다양한 미디어를 사용 가능합니다.

플래시 삽입

<object type="application/x-shockwave-flash" data="images/menu.swf" width="500" height="70">
    <param name="movie" value="menu.swf" />
</object>

슬라이더 삽입

<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50">
    <param name="BorderStyle" value="1" />
    <param name="MousePointer" value="0" />
    <param name="Enabled" value="1" />
    <param name="Min" value="0" />
    <param name="Max" value="10" />
</object>

퀵타임 무비 삽입

<object width="160" height="144" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab>">
    <param name="src" value="test.mov">
    <param name="autoplay" value="true">
    <param name="controller" value="false">
    <embed src="sample.mov" width="160" height="144" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"></embed>
</object>

리얼 비디오 삽입

<object width="320" height="240" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
    <param name="controls" value="ImageWindow" />
    <param name="autostart" value="true" />
    <param name="src" value="test.ram" />
</object>





HTML과 XHTML

XHTML은 HTML의 단점을 보안하기 위해서 만들어진 언어라 할 수 있습니다. 문법적으로 xml을 따랐다고는 하나 대부분 HTML과 큰차이를 보이지 않습니다. 그러므로 HTML을 기본적으로 아는 사람들은 HTML과 XHTML의 차이만 이해하면 XHTML을 어렵지 않게 사용할 수 있습니다.

다음은 HTML과 XHTML의 차이점입니다. 전체적으로 HTML에 비해 문법적으로 엄격해 졌습니다. 두리뭉실한 HTML, 까칠한 XHTML 입니다.^^

종료태그가 반드시 있어야 한다.

HTML 은 종료태그가 없는 것을 허용하였습니다.

<p>문단
<p>문단


이런식으로 종료태그(</p>)를 붙히지 않아도 문제가 생기지 않았습니다. XHTML 의 경우 반드시 종료태그를 사용하여 닫아주어야 합니다.

잘못된 중첩을 허용하지 않는다.

HTML 은 태그가 잘못 중첩되어도 화면표시(렌더링)에 별 영향을 미치지 않았지만 XHTML의 경우 잘못된 중첩은 화면표시(렌더링)에 직접적인 영향을 주기도 합니다.

요소(element)와 속성(Attribute)은 소문자로 표기되어야 한다.

HTML은 요소와 속성에 대소문자를 함께 사용하는 것을 허용하였으나 XHTML은 요소와 속성들을 반드시 소문자로 표기해야 합니다. xml이 대소문자를 구별하기 때문입니다. HTML에서는 대소문자의 구별이 없죠.

속성 ‘값’들은 항상 따옴표로 감싸주어야 합니다.

HTML 의 경우 속성 값들을 따옴표로 감싸지 않는 것을 허용하였지만 XHTML 에서는 반드시 속성값은 따옴표 안에 있어야 한다.

<p align=center>로 하면 안되고 <p align="center">와 같이 반드시 따옴표를 사용해야 합니다.

속성과 값의 단축표기를 허용하지 않는다.

HTML 에서는 속성과 속성 값의 단축표기를 허용하였으나 XHTML 에서는 단축표기 하는 것을 허용하지 않습니다.
<input checked> 는 <input checked="checked"> 와 같이 사용해야 합니다.

비어있는 태그(종료태그가 없는 태그)도 종료 되어야 한다.

HTML 에서 <br>, <hr> 과 같이 콘텐트를 담지 않는 빈 태그들은 <br />, <hr /> 과 같이 표기하여 시작태그에서 곧 종료됨을 표기해 주어야 한다.

XHTML의 필요성?

간단하게 나마 XHTML이 HTML에 비해서 어떤 점이 틀리다는 것을 짚어봤습니다. 서두에서도 말했듯이 문법적으로 좀더 엄격해 졌다고 할 수 있죠. 이런 엄격함으로 인해 보다 다양한 브라우저에서 정확하게 문서가 표시될 수는 있습니다. 예를 들어서 PDA에서 사용되는 웹브라우저에서도 PC의 웹브라우저와 거의 똑같은 화면을 표시할 수 있다는 겁니다. 아무래도 다소 느슨한 HTML로는 웹브라우저가 달라지면 다른 모양으로 보일 여지가 많거든요.

그래도 XHTML은 홈짱닷컴에서 자세하게 다루지 않을 예정입니다.

HTML 보다 분명 장점을 가지고 있지만 현실적으로 HTML을 대체하는 새로운 마크업이 된다는 보장은 없습니다. 아직도 대부분의 홈페이지에서는 아무런 문제없이 HTML을 잘 쓰고 있고 변화의 움직임도 크지 않기 때문이죠. 물론 분위기가 XHTML로 바뀌면 XHTML 강좌도 추가하겠지만요^^;

XHTML에 대한 좀더 자세한 내용은 related link를 참고하시면 됩니다.
































'프로그래밍 > 웹 프로그래밍' 카테고리의 다른 글

php 기초 실습  (0) 2016.03.13
php 입문 사전 지식  (0) 2016.03.13
html 중급?  (0) 2016.02.21
HTML 기초  (0) 2016.02.21
비즈니스 로직(Business logic)?  (0) 2016.02.14
웹서버(Web Server) / 웹 서버 어플리케이션(WSA)  (0) 2016.02.14
Posted by GENESIS8

댓글을 달아 주세요