'HTML'에 해당되는 글 10건

  1. 2016.06.02 on/off 버튼
  2. 2012.05.23 반응형 웹디자인 참고
  3. 2011.09.30 브라우저 창 늘림/줄임시 이미지/width값 밀림 현상 1
  4. 2011.07.08 dl, dt, dd 요소
  5. 2011.05.12 비디오
  6. 2011.03.09 펌] 폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론
  7. 2011.01.24 HTML5 표준 기술과 서비스 생태계 변화
  8. 2010.11.18 아이프레임 투명하게 만드는 방법
  9. 2010.05.14 파비콘
  10. 2010.04.01 올바른 Table 사용

on/off 버튼

HTML 2016. 6. 2. 15:23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <style>
  * {box-sizing:border-box}
  .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;   
  }

  
  
  input.cmn-toggle-round-flat + label {
    padding: 2px;
    width: 52px;
    height: 21px;
    background-color:#b3b3b3;
    border-radius:13px;
    transition: background 0.4s;
  }
  
  
  input.cmn-toggle-round-flat + label:after {
    display: block;
    position: absolute; 
    content: "";
  }
  input.cmn-toggle-round-flat + label:after {
    top: 2px;
    left: 2px;
    bottom: 4px;
    width: 17px;
    height:17px;
    background-color: #fff;
    border-radius:50%;
    transition: margin 0.4s, background 0.4s;
   
  }
  /*
  input.cmn-toggle-round-flat + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color:#b3b3b3;
    border-radius:50%;
    transition: background 0.4s;  
  }
  
  */
  input.cmn-toggle-round-flat:checked + label {
    background-color: #f52969;   
  }
  input.cmn-toggle-round-flat:checked + label:after {
    margin-left: 32px;
    background-color: #fff;
  }

  input.cmn-toggle + label span:after {font-size:13px; font-weight:500; color:#fff}

  input.cmn-toggle + label span:after {display:block; content:"OFF"; position:absolute; top:1px; right:7px }
  input.cmn-toggle:checked + label span:after {display:block; content:"ON"; position:absolute; top:1px; left:10px}
   
 </style>
</head>
<body>
 

 <div class="switch">
   <input id="toggle" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
   <label for="toggle"><span></span></label>
 </div>

 
</body>
</html>

 

:

반응형 웹디자인 참고

HTML 2012. 5. 23. 17:43

http://www.ttearth.com/

http://pr.hyundai.com/#/pages/main.aspx   크.....

http://www.hanb.co.kr/demo/1910/ex10/

 

 

 

책 참고

만들면서 배우는 HTML5 CSS3 jQuery 만들면 쉽다 만들면 재밌다 만들면 놀랍다

'HTML' 카테고리의 다른 글

on/off 버튼  (0) 2016.06.02
브라우저 창 늘림/줄임시 이미지/width값 밀림 현상  (1) 2011.09.30
dl, dt, dd 요소  (0) 2011.07.08
비디오  (0) 2011.05.12
펌] 폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론  (0) 2011.03.09
:

브라우저 창 늘림/줄임시 이미지/width값 밀림 현상

HTML 2011. 9. 30. 11:27
왜 이제까지 이걸 몰랐을까....

노트북에서 주로 작업하다보니 창을 축소시킬 일이 많았는데 footer 값이 100%로 잡혀 있는데도 불구하고 창을 줄이고 스크롤을 밀어보는 순간 줄어든 footer 발견.

이게 뭘까..??? 잘못 코딩한건 아무리 뒤져봐도 없는거 같고.....보아하니 100%로 잡혀있는곳에서만 문제가 일어나고 있었다.

찾아보니....브라우저에서 fix를 시키려면 px로 된 width or min-width가 필요했다.

보통은 wrap이 최상위에 자리잡거나 body부분에 이미지나 들어가기때문에 때문에 이런경우가 발생할 일이 거의 없지만....이번 같은 경우 백그라운드 이미지 때문에 헤더나 풋터는 감쌀수가 없었기에 발생한 문제.

네이버 최상위 gnb부분도 줄어드는걸 보고 호홍....

ie7이하 버전에선 min-width가 먹질 않기 때문에 해결 방법이 아직까진 없는듯하다.
자칫하면 놓치기 쉬운 부분인듯...


참고 : http://blog.sitecm.com/08/css-background-color-or-image-horizontal-scroll-fix/

'HTML' 카테고리의 다른 글

on/off 버튼  (0) 2016.06.02
반응형 웹디자인 참고  (0) 2012.05.23
dl, dt, dd 요소  (0) 2011.07.08
비디오  (0) 2011.05.12
펌] 폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론  (0) 2011.03.09
:

dl, dt, dd 요소

HTML 2011. 7. 8. 17:12

dl, dt, dd 요소

'용어'와 '그 설명' 으로 구성된 목록을 '정의형 목록 (definition list)' 이라고 합니다. 정의형 목록은 dl 요소로 정의하고

용어 (definition term)를 나타내는 dt 요소와 그 설명 (definition description)인 dd 요소를 포함 합니다.

많은 브라우저에서 dd 요소가 들여쓰기가 되어 표시 됩니다.

 

dl 요소는 블록 레벨 요소이지만 dt 요소와 dd 요소 이외의 요소를 포함 할 수 없습니다. 

dt 요소는 인라인 요소이며 인라인 요소와 텍스트를 포함할 수 있습니다.

dd 요소는 블록레벨 요소이며 인라인 요소와 텍스트를 포함할 수 있고, 또 블록 레벨 요소를 포함할 수 있습니다. 

 

 

  <dl>

     <dt>MIDI</dt>

     <dd>Musical Instrument Digital Interface의 약자. 음악 데이터의 세계공용규격이며 웹에서 일반적으로 사용되는 음성파일

       형식. 선율을 음표로 표현하는 데이터 타입이기 때문에 파일 사이즈가 작고 웹에서의 배급에 적합한 특징이 있다. 확장자는

       ".mid" 또는 ".midi". 

     </dd>

     <dt>MP3</dt>

     <dd>

      <p>MPEG Audio Layer-3의 약자. 영상데이터의 압축방식인 MPEG-1 안의 음성데이터 압축기술을 적용하여 작성된

         음성파일 형식. 확장자는 "mp3".</p>

       <p>CD 정도의 음질인 무압축의 WAVE 파일과 비교할 때 파일사이즈를 1/11정도까지 압축할 수 있다.</p>

     </dd>

  </dl>

 

 
 MIDI
  
Musical Instrument Digital Interface의 약자. 음악 데이터의 세계공용규격이며 웹에서 일반적으로 사용되는 음성파일
형식. 선율을 음표로 표현하는 데이터 타입이기 때문에 파일 사이즈가 작고 웹에서의 배급에 적합한 특징이 있다. 확장
자는 ".mid" 또는 ".midi".
  
 MP3
 

MPEG Audio Layer-3의 약자. 영상데이터의 압축방식인 MPEG-1 안의 음성데이터 압축기술을 적용하여 작성된 음성

파일 형식. 확장자는 "mp3".

CD 정도의 음질인 무압축의 WAVE 파일과 비교할 때 파일사이즈를 1/11정도까지 압축할 수 있다.

  

 

정의형 목록은 '용어'와 '그 설명' 이라는 사용법 외에도 '참고문서'와 '그 설명', '링크' 와 '그 설명', '날짜' 와 '갱신정보' 등 다양한 용도로 이용됩니다.

 

 

 <dl>

     <dt>2010년 5월 28일</dt>

     <dd>html / css 게시판에 <a href="cafe.naver.com/webmarkup" title="XHTML 관련 내용">XHTML</a>

     관련 내용 입력.</dd>

 </dl>

 

 

dt 요소에 '카테고리명'을, dd 요소에 '그 내용'을 지정하는 사용법도 있습니다.

 

 

 <dl>

     <dt>스터디</dt>

     <dd>묻고답하기</dd>

     <dd>Tip</dd>

     <dd>html / css</dd>

     <dd>웹관련용어</dd>

  </dl>

 

 

:

비디오

HTML 2011. 5. 12. 15:37

<embed src="we think like you_korean.mpg" wmode="transparent" allowScriptAccess="always" allowFullscreen="true" name="lgmovie" width="1200px" height="870px" loop="true" showcontrols="false" windowlessVideo="true"/>
:

펌] 폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론

HTML 2011. 3. 9. 15:06

폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론

 

웹 디자인을 처음 하시는 분들에게 있어 폼 디자인은 어려움 그 자체입니다. 하지만 폼은 사용자와의 상호작용을 하는 웹의 특성 상 매우 중요하며 웹 디자이너라면 반드시 이해하고 넘어가야 할 관문입니다. 앞으로 설명하는 내용을 잘 참고하시어 다음부터 제작하는 폼 디자인은 매우 효율적으로 작성하는 웹 디자이너가 되시길 바랍니다.

 

 

좋은 폼 디자인을 하기 위해서는 다음의 4가지를 고려하여야 합니다.

 

  1. 요소 의미에 맞게 사용하기

  2. 접근성을 준수하여 제작하기

  3. 사용성을 고려하여 작성하기

  4. 보고 이해하기 좋게 디자인하기

 

폼 디자인을 잘못하면 사용자를 때때로 난처하게 하거나 곤란하게 만들 수 있습니다.

종종 폼을 사용하다 보면 사용자가 웹 문서를 보는 도중 엉뚱한 방향으로 페이지를 옮기거나,

원하지 않는 요소로 이동하는 경우가 생깁니다. 사용자에게는 참 난처할 수 밖에 없는 상황이 연출됩니다.

사용자에게 보다 편리함을 제공해주는 것이 디자이너와 개발자의 역할이라는 측면에서

많은 반성이 필요하겠죠? 자 그럼 앞으로 사용자에게 편리함을 제공해 줄 수 있는

좋은 폼 디자인 방법을 알아봅시다.

 

 

 

 

1. 의미가 올바른 구조를 작성하라.

  

A. 유사한 내용은 <fieldset> 요소로 감싸라.

일반적으로 폼 디자인 시에는 <form> 요소 내부에 <input /> 요소를 사용하여 작성합니다.

<form> 요소가 <input /> 요소 들을 감싸 않은 모양이죠. 문제는 내부에 <input /> 요소가 많을 경우입니다.

이처럼 내부에 많은 요소가 사용된다면 사용자의 입장은 물론 디자이너, 개발자의 입장에서도 쉽게 구분하여

이들을 파악하기란 어렵습니다. 이럴 경우 <filedset>을 사용하여 내부 요소를 비슷한 내용끼리 묶어준다면

모두가 손쉽게 내용을 이해할 수 있을 겁니다. 모두를 위한 디자인 [유니버셜 디자인]의 시작인거죠!

 

(예제 코드)

<form action="process.cgi" method="post"> 

<fieldset>
    <span>빌딩 주소</span><input type="text" />
    <span>도시</span><input type="text" />
    <span>전화번호</span><input type="text" />
    <span>우편번호</span><input type="text" />
</fieldset>

 

<fieldset>
    <span>빌딩주소</span><input type="text" />
    <span>도시</span><input type="text" />
    <span>전화번호</span><input type="text" />
    <span>우편번호</span><input type="text" />
</fieldset>
 

</form>

 

 

 

B. 구분한 <fieldset> 요소마다 <legend> 요소로 이름을 부여하라.

나뉘어진 <filedset> 요소를 구분하기 위하여 각 <fieldset>은 구분 식별자가 필요하겠죠? 다른 요소의 경우는

name, id 속성으로 구분하겠지만, <fieldset>은 내부에 <legend> 요소를 사용하여 구분 식별할 수 있습니다.

 

(예제 코드)

<form action="process.cgi" method="post">

<fieldset>

    <legend>아카데미 정글</legend>

    <span>빌딩 주소</span><input type="text" />
    <span>도시</span><input type="text" />
    <span>전화번호</span><input type="text" />
    <span>우편번호</span><input type="text" />
</fieldset>

 

<fieldset>

    <legend>와인 아카데미</legend>
    <span>빌딩 주소</span><input type="text" />
    <span>도시</span><input type="text" />
    <span>전화번호</span><input type="text" />
    <span>우편번호</span><input type="text" />
</fieldset>

</form>

 

 

 

C. <input /> 요소에 name 속성을 작성하라.

폼에 작성된 내용을 스크립트를 통해 서버로 보내기 위해서는 스크립트에서 제어할 수 있는 식별 이름이 필요합니다. 때문에 사용자가 입력하는 공간인 <input />에 name(이름) 속성을 작성하여야 합니다.

 

(예제 코드)

 

<fieldset>

    <legend>아카데미정글</legend>

    <span>빌딩 주소</span><input type="text" name="b_address" />
    <span>도시</span><input type="text" name="city" />
    <span>전화번호</span><input type="text" name="tel_number" />
    <span>우편번호</span><input type="text" name="post_number" />
</fieldset>

 

 

 

D. <span> 대신 <label> 요소를 사용하라.

<span> 요소를 사용하는 것은 아무런 의미없이 문서를 작성한 경우로 이는 잘못된 방법입니다.

이를 개선하기 위해서는 <span> 대신 <label> 요소를 사용하여 문서를 구조화 시켜주셔야 합니다. 

 

(예제 코드)

 

<fieldset>

    <legend>아카데미정글</legend>

    <label>빌딩 주소</label><input type="text" name="b_address" />
    <label>도시</label><input type="text" name="city" />
    <label>전화번호</label><input type="text" name="tel_number" />
    <label>우편번호</label><input type="text" name="post_number" />
</fieldset>

 

 

 

 

E. <label> 요소 for 속성을 제공하여 <input />의 id 속성과 연결하라.

<label> 요소의 for 속성은 관련된 <input /> 요소의 id 값과 연결됩니다.

이를 통해 사용자는 접근성 및 사용성 증대를 높힐 수 있습니다.

 

(예제 코드)

 

<fieldset>

    <legend>아카데미정글</legend>

    <label for="buidding_addr">빌딩 주소</label><input type="text" id="buildding_addr" name="b_address" />
    <label for="city_name">도시</label><input type="text" id="city_name" name="city" />
    <label for="phone">전화번호</label><input type="text" id="phone" name="tel_number" />
    <label for="postal">우편번호</label><input type="text" id="postal" name="post_number" />
</fieldset>

 

 

 

 

F. <option> 요소를 카테고리화 하기 위한 <optgroup> 요소를 사용하라.

<select> 요소 내부에 <option> 요소가 많을 경우, <optgroup> 요소를 사용하여 그룹화 하는 것이 좋습니다. 

옵션 요소들을 그룹화하고 label 속성으로 각 그룹의 타이틀을 작성하여 구분할 수 있습니다.

 

(예제 코드)

 

<select>
<optgroup label="USA">
    <option>Alabama</option>
    <option>Alaska</option>
    <option>Arizona</option>
</optgroup>
<optgroup label="Canada">
    <option>Alberta</option>
    <option>British Columbia</option>
    <option>Manitoba</option>
</optgroup>
</select>

 

 

 

 

G. 속성은 반드시 값을 명시해 준다.

과거 문법이 덜 엄격했던 HTML 문서 작성시와는 다르게 XHTML 1.0 이상 문서 작성 시에는 반드시 속성에

값을 명시해주어야 합니다.

 

(예제 코드)

 

<label for="live">Living?</label>
<input name="live" id="live" type="checkbox" checked="checked" disabled="disabled" />

 

 
 
 
 

H. <input type="submit" />보다는 <button>을 사용하는 것이 조작하기 좋다.

<input /> Submit 전송 버튼은 CSS로 꾸미기 매우 불편하다. 이를 대체할 유용한 방법으로 <button>을

사용하는 것이 디자인하기 좋다. 관련 글(Button 요소의 재 발견! <button> VS <input />)을 참고해보길

바란다.

 

 

 

 

2. 접근 가능하게 작성하여야 한다.

  

I. <input /> 요소에 tabindex를 넣어라.

마우스를 사용하는 일반 사용자에 비해 마우스를 사용하지 못하는 사람들(예를들어 시각 장애가 있는 사람들)이

바라보는 웹 페이지를 읽는 방법은 매우 어렵다. 왜냐하면 문서가 작성된 순서대로 스크린리더(화면낭독) 되기 때문. 이런 불편함을 해소하기 위해 디자인 단계에서 글의 중요도에 따라 우선 적으로 읽힐 수 있는 순서를 고려하여야 한다. 이를 위해 tabindex라는 속성으로 순서를 부여할 수 있다.

 

(예제 코드)

 

<input type="text" tabindex="2" />
<input type="text" tabindex="1" />
<input type="text" tabindex="3" />

 

 

 

 

J. 사용 목적이 타당하다면, accesskey 속성을 부여하라.

accesskey 속성은 input 요소에 키보드 단축키를 제공할 수 있다. 단축키는 키보드 자판의 Alt (Option)와

함께 사용하면 된다. 물론 모든 input 요소에 accesskey를 부여할 필요는 없다. 하지만 분명 필요한 요소도

있다. 예를들면 Search box(검색 창)의 경우이다. 아래 코드처럼 단축키 속성을 부여한다면 사용자는 쉽게

검색할 수 있을 것이다. 여기서 주의할 점은 사용자는 단축키를 모른다는 것이다. 그렇기 때문에 단축키를

명시해서 사용자로 하여금 사전에 알 수 있도록 조치를 취하는 것이 필요하다.

 

(예제 코드)

 

<label for="search"><span class="shortcut">S</span>earch</label>
<input type="text" name="s" id="search" accesskey="s" />

 

 

 

 

K. 사용자로 하여금 현재 활성화된 창을 각인 시켜라. 굿 포커싱!

이 방법은 CSS :hover 가상 클래스(슈도 클래스라고도 부름)를 이용하여 시각적으로 사용자에게 현재 활성화된

input 요소를 알 수 있도록 도와준다. 시각적으로 접근성을 향상 시킬 수 있다. 다만 아쉬운 점은 IE7 이하

브라우저에서는 이 방법은 지원되지 않는다. 왜냐하면 IE6의 경우 <a> 요소에만 :hover 가 적용되며,

아래 사용된 속성 선택자의 경우 IE7은 인식하지 못하기 때문이다. 하지만 그렇다고 해서 아주 방법이 없는

것은 아니다. IE7.js를 이용하는 방법과 javascript, jQuery 등을 이용하는 방법으로 보조가 가능하다.

물론 javascript가 지원 되지 않는 환경에서는 적용되지 않는다.

 

(예제 코드)

 

input[type=text]:hover {
     background-color:#ffff66; /* 배경색 변경 */
     border-color:#999999; /* 테두리색 변경 */
}

 

 

 

 

L. 스크린리더기를 이용하는 사람들도 있다는 것을 염두에 두어라.

모든 사람들은 쉽고 일목요연한 폼 디자인을 선호한다. 모든 사람들 안에는 스크린리더기를 이용하는 사람들도

포함된다. 이를 염두에 두고, 모든 input 요소에는 label 요소로 명확함을 전달하여야 한다.

 

아래 사용된 속성 선택자의 경우 IE7은 인식하지 못하기 때문이다. 하지만 그렇다고 해서 아주 방법이 없는

것은 아니다. IE7.js를 이용하는 방법과 javascript, jQuery 등을 이용하는 방법으로 보조가 가능하다.

물론 javascript가 지원 되지 않는 환경에서는 적용되지 않는다.

 

 

 

 

 

 

3. 기능적 실용성을 고려하라.

  

M. 올바른 컨텐츠 타입을 사용하라.

대다수의 경우 form에 enctype 속성을 설정하지 않는다. enctype의 초기 설정 값은 다음과 같다.

enctype="application/x-www-form-urlencoded" 대부분의 경우 이 속성을 설정하지 않아도 무방하나,

form 내부에 <input type="file" />이 있는 경우는 enctype 속성의 값을 "multipart/form-data"로

설정해줘야 한다. 왜냐하면 일반적으로 초기 값일 경우 form 안의 데이타를 text 형식으로 서버에 보내지만,

이미지나 실행 파일 같은 binary 파일은 초기 설정 값으로는 전송할 수 없기 때문이다. enctype=

"multipart/form-data" 으로 설정해주면 text가 아닌 binary 형식으로 form 안의 데이타를 전송할

수 있다.

 

(예제 코드)

 

<form action="verify.php" method="get" enctype="multipart/form-data">
    &tl;label for="avatar">Upload your Avatar : </label>
    <input type="file" name="avatar" id="avatar" />
</form>

 

  
 
 
 
 

N. get/post 전송 방식의 차이를 제대로 알고 사용하라.

get 또는 post는 form 내부의 데이터를 전송하는 방식을 말한다. 이 둘은 같은 역할을 하지만 명백하게

다른 점이 존재하는데 get 방식에 비해 post 방식이 비교적 정보 보안적이 측면이 더 낫다. get 방식의 경우

form 내부 데이터 전송 시 URL 뒤에 정보를 붙여서 보내기 때문에 눈에 보인다는 점이다. 만약 비밀번호를

폼에 넣어 보낼 경우 get 방식을 사용한다면 낭패다 ㅡ.,ㅡ;; 다 보일테니 말이다. 유의해야 할 부분이다.

post 방식은 get 방식에 비해 안전하다.

 

 

get 

post 

보안

post에 비해 덜 보안적.

get에 비해 보안적.

데이터 제한 

제한, URL 허용 길이

제한 없음.

데이터타입 제한

오직 ASCII 문자만 허용.

제한 없음. Binary 역시 사용 가능.

뒤로가기 버튼,

재 전송 버튼 눌렀을 경우

사용자가 입력한 내용을 재 작성해야 함.

사용자에게 경고를 함. 

인코딩

application/x-www-form-urlencoded 

multipart/form-data 또는

application/x-www-form-urlencoded

 

(예제 코드)

 

<form action="you.php" method="get">
    <label for="fname">First Name</label>
    <input type="text" name="fname" id="fname" value="Bill" />
    <label for="lname">Last Name</label>
    <input type="text" name="lname" id="lname" value="Gates" />
</form>

 

  
  
 
 

O. 검증은 클라이언트/서버 양쪽에서 진행할 수 있도록 만들어라.

form 내부의 데이타를 보내기 전에 클라이언트 쪽에서 자바스크립트를 이용하여 데이타 내용이 유효한지 검사하는 것 이외에 혹시 모를 자바스크립트 미지원 시 유효성 검사를 진행할 서버쪽에도 검증 시스템을 만들어놔야 접근성을 높힐 수 있다.

 

  

  

 
 

P. AJAX를 이용하여 보다 사용성을 높여라. 단, 자바스크립트 미지원시도 고려하라.

AJAX를 이용하여 페이지를 새로 고침하지 않고 현재 페이지에서 사용자에게 내용을 전달하는 것은 사용자에게 많은 사용의 편리를 제공할 수 있다.jQuery 또는 당신이 선호하는 자바스크립트 라이브러리를 사용하여 작성해보는 것은 어떨지 고민해봐라. 단 개발 시 Javascript 미지원 시에도 처리가 가능하도록 설계하여야 함을 명심히라.

'HTML' 카테고리의 다른 글

dl, dt, dd 요소  (0) 2011.07.08
비디오  (0) 2011.05.12
HTML5 표준 기술과 서비스 생태계 변화  (0) 2011.01.24
아이프레임 투명하게 만드는 방법  (0) 2010.11.18
파비콘  (0) 2010.05.14
:

HTML5 표준 기술과 서비스 생태계 변화

HTML 2011. 1. 24. 09:22


HTML5는 단지 웹의 변화만을 요구하는 것은 아니다. 모바일의 중심 아키텍처가 되어 새로운 변화와 방향을 주도하고 있으며 나아가 서버 애플리케이션마저도 변화를 요구하고 있다. 또한 이런 요구는 궁극적으로 서비스 생태계 방향의 재정립을 요구하고 있으며 이에 발맞춰 나가지 않으면 무인도에서 홀로 사는 모습이 될 수 있다. 눈 덮인 히말라야 산 골짜기에서 혼자만의 외침이 될 수 있다.

김영보 www.corechain.com|자바스크립트 라이브러리 CoreChain 개발자이면서 『HTML5 차세대 웹 표준, 기술』의 저자다.

필자는 이 글을 통해 태풍처럼 밀려오는 HTML5의 거대한 요구를 서비스 생태계와 연계해 어떻게 대처할 것인가를 생각해 보려고 한다. 이 글은 어쩌면 필자 자신의 독백이 될 수 있으며 소프트웨어 개발자인 필자 자신의 지침이 될 수도 있다. 한편 그릇된 점도 있을 수 있으며 뒤처지거나 훨씬 미래에 발생할 수도 있다. 이 글을 읽는 독자의 환경에 따라 생각의 척도가 다를 수 있으므로 판단은 독자의 몫으로 남기려 한다.

서비스 중심에 콘텐츠가 있다
우리 개발자들이 밤낮으로 고생해서 만드는 최종적인 결과물은 콘텐츠이며 이를 인간에게 제공하는 것이 궁극적인 목적이다. 인간에게 제공하지 못하는, 인간이 사용하지 않는, 사용의 필요성이 없는 콘텐츠를 개발하는 것은 의미가 없다. 서버의 블랙박스 안에 들어가는 제어용 프로그램도 개발하지만 이 또한 간접적으로 인간에게 콘텐츠를 제공하게 된다.

우리가 만든 콘텐츠는 인간에게 제공될 때 비로소 가치를 인정받게 되며 소정의 목적을 달성할 수 있다. 인간이 사용하지 않는 프로그램을 개발한들 소용이 없다. 기술 중심의 마인드를 가진 개발자들이 실수하는 가장 큰 이유 중의 하나가 이 점을 염두에 두지 않고 기술적으로 접근하기 때문이다. 기술과 프로그램은 콘텐츠를 제공하기 위한 바탕이지만 여기에 너무 치우치면 사용자에게 외면 받는 소프트웨어가 될 수 있다. 사용자는 기술이 아닌 콘텐츠를 보고 사용 여부를 결정하기 때문이다. 기술적인 측면을 고려하는 것은 한참 지난 후이며 그나마도 뜻 있는 일부 사용자가 한다.

HTML5는 서비스 지향 아키텍처다!
HTML5는 단지 HTML4에서 HTML5로 숫자가 바뀐 것이 아니므로 웹 페이지를 표현하는 태그 중심 개념으로 접근해서는 곤란하다. 그러면 아무것도 보이지 않으며 느낄 수도 없다. HTML5는 서비스 지향 아키텍처다.

그 동안의 HTML4 개념에서 보면 브라우저에 탑재된 하나의 언어인 것을 아키텍처라고 표현한 것에 대해 받아들이기가 어려울 수 있으며 논리에 맞지 않다고 생각할 수도 있다. 필자 또한 이 점에 동의한다. 하지만 브라우저 관점이 아닌 HTML5 밑바탕에 깔려있는 근본적인 모습을 보면 아키텍처라고 해도 틀림이 없다.

HTML5는 기능이 아니라 사상이라고 필자는 생각한다. HTML5라고 명명되어 한정된 느낌이 들게 하지만 현재 HTML5에 포함된 기능과 앞으로 전개될 기능을 고려하면 기능이 아니라 사상이다. 인간에게 콘텐츠를 제공하기 위한 근본적인 아키텍처다.

<그림 1> HTML5 분류

<그림 1>의 HTML5 분류에서 볼 수 있듯이 HTML5는 크게 엘리먼트(Element)를 통해 콘텐츠를 표현하는 마크업 부분과 다양한 기능을 제공하는 API 부분으로 나눌 수 있다. 한편 HTML5라고 표기하고 있는 관계로 인해 마크업 기능만을 가진 것으로 착각할 수 있으며 API 단어만을 보고 기능을 제공하기 위한 인터페이스로 한정 지을 수 있다.

여기서 중요하게 생각할 것은 마크업도 콘텐츠를 제공하기 위한 것이고 API도 콘텐츠를 제공하기 위한 것이라는 점이다. 즉, 인간에게 콘텐츠를 제공하기 위한 아키텍처를 구비한 것이다. 

마크업은 HTML5에 추가된 엘리먼트 부분과 엘리먼트 기능을 다시 정의한 부분으로 나눌 수 있다. 추가 부분에서 첫째, 콘텐츠를 구성하는 모델 개념이 도입되었다. 엘리먼트를 구조적으로 나열해서 콘텐츠를 구성하는 것이 아니라 데이터베이스 모델링, 비즈니스 모델링, 도메인 모델링 등의 모델링을 하듯이 콘텐츠를 모델링하는 개념이다. 모델링의 최종 목적은 최적화라고 할 수 있다. 즉, 콘텐츠 모델링을 통해 인간에게 최적화된 콘텐츠를 제공하기 위한 것이다. 또한 모델링하는 사람을 모델러라고 하듯이 웹 퍼불리셔를 콘텐츠 모델러라고 불러야 한다.

둘째, <video><section>과 같은 엘리먼트의 추가다. 애플이 플래시를 지원하지 않겠다고 해서 큰 파란이 일었던 기술적인 배경은 하나의 엘리먼트를 지원하지 않은 것에서 발생했다. 이와 같이 엘리먼트 지원 여부에 따라 동반되는 기술에 영향을 미치게 된다. <video><audio>도 마찬가지다. 이 엘리먼트를 지원하게 됨에 따라 비디오, 오디오를 지원하는 체계의 변화가 생겼다. 어떤 회사는 이를 위해 기술력을 가진 회사를 인수하기도 했다. 이렇게 HTML5는 기능이 아닌 서비스 생태계를 변화시키는 아키텍처를 갖고 있다.

API는 <canvas>, <svg>와 같이 엘리먼트에 직접 콘텐츠를 표현하는 API와 Web Sockets, Database와 같이 간접적으로 콘텐츠를 제공하는 API로 나눌 수 있다. 또한 앞으로 어떤 API가 HTML5에 포함될지 모른다. TV에 브라우저가 탑재되듯이 HTML5에는 각종 디바이스(Device)에 브라우저가 탑재될 수 있는 아키텍처가 준비되어 있다.

바로 이 점이 HTML5를 다시 보고 생각해야 하는 이유다. 이미 브라우저를 지원하는 TV가 출시되고 있으며 향후 오디오로, 냉장고로 무한대의 발전이 예상되고 있다. 디바이스에 브라우저가 탑재되면 모바일, PC를 통해 이를 제어할 수 있게 된다. 즉, 이런 모든 제어를 위한 아키텍처를 HTML5가 제공하게 된다. 그래서 HTML5는 아키텍처다.

Web SocketsWeb Sockets는 클라이언트와 서버 간의 양방향 동시 통신을 규정한 API다. 일반적으로 클라이언트에서 서버의 애플리케이션을 호출하면 서버에서 요청한 클라이언트로 데이터를 전송하게 된다. 즉 클라이언트에서 요청이 있어야 한다는 전제 조건이 있으며 그때서야 서버 애플리케이션이 실행되어 데이터를 전송하게 된다. 하지만 Web Sockets는 한 번만 클라이언트에서 서버와 통신 경로를 열어두면 클라이언트의 요청이 없더라도 서버에서 클라이언트로 데이터를 전송할 수 있다. 물론 클라이언트에서 서버로 데이터를 전송할 수도 있다.

필자가 개발했던 간이 빙고 게임 프로그램의 시나리오를 통해 Web Sockets 형태를 살펴본다. 전반적인 처리 흐름과 기능을 살펴보는 것이 목적이다.

<화면 1> 빙고 게임

<화면 1>에서 보는 빙고 게임의 실행 환경은 클라이언트에 웹 소켓 서버를 설정했으며 Java로 서버용 애플리케이션을 작성했다. 왼쪽의 빙고 보드는 크롬 브라우저에서 실행한 것이고 오른쪽의 빙고 보드는 사파리 브라우저에서 실행한 것이다. 원고를 쓰는 시점에 두 브라우저에서 웹 소켓을 지원한다. 개략적인 시나리오는 오른쪽 빙고 보드의 숫자를 마우스로 클릭하면 값이 서버로 전송되고 서버 애플리케이션은 빙고 게임이 연결된 클라이언트로 데이터를 전송한다. 그리고 각 클라이언트에서 이 값을 받아 값과 일치하는 번호에 파란색을 칠한다. 전형적인 빙고 게임과 조금 차이가 있는 것은 의도적으로 웹 소켓 흐름 파악에 중점을 두었기 때문이다. 아래 시나리오에서 클라이언트는 HTML5, CSS, 자바스크립트, 캔버스를 의미한다.

● 시나리오
1.  사용자가 브라우저를 통해 빙고 게임을 실행한다.
1.1.  클라이언트는 랜덤으로 숫자를 추출해서 빙고 보드에 표시한다.
1.2.  클라이언트는 웹 소켓 오브젝트를 생성해 서버와 통신 경로를 개설한다.

2.  사용자가 오른쪽 빙고 보드에서 마우스로 숫자를 선택한다.
2.1.  클라이언트는 입력한 값을 서버로 전송한다.
2.2.  서버는 연결된 모든 클라이언트에 값을 다시 전송한다.

3.  클라이언트는 서버에서 데이터가 전송된 것을 인식한다.
3.1.  {메모} 이벤트 핸들러가 웹 소켓 오브젝트에 설정된 상태이므로 이벤트가 발생하면 자동으로 핸들러 함수가 실행된다.

3.2.  {메모} 이를 메시징 방법이라고 한다.
3.3.  빙고 보드에서 일치하는 번호를 찾아 바탕색을 파란색으로 칠한다.

웹 소켓은 클라이언트에서 var obj = new WebSocket(‘http ://www.corechain.com/socket’)과 같이 생성자 함수의 파라미터에 애플리케이션을 지정하면 통신이 개설된다. 그리고 생성한 오브젝트인 obj에 obj.onmessage = this._onmessage와 같이 onmessage 이벤트가 발생했을 때 실행할 이벤트 핸들러 함수를 지정한다. 그러면 서버에서 웹 소켓을 통해 데이터를 전송하면 자동으로 this._onmessage 함수가 실행된다. 이와 같이 간단하고 쉽게 통신을 행할 수 있다. 

여기서 중요한 것은 HTTP 통신을 하게 되면 Header 정보가 통신할 때마다 전송되지만 웹 소켓 통신은 처음 한 번만 전송되고 두 번째부터는 header 정보는 전송하지 않고 데이터만 전송한다는 점이다. 그러니 당연히 처리 속도가 빠르다. 

또한, 메시징 기법을 다른 API에도 적용했다는 점이다. 예를 들면 클라이언트의 데이터베이스에서 데이터를 추출할 때 조건을 지정해 데이터베이스의 메소드를 호출하면, 데이터 추출을 완료한 후 이벤트를 발생시키므로 자동으로 이벤트 핸들러 함수가 실행된다. 이와 같이 HTML5는 같은 메커니즘을 갖고 있다.

Canvas
캔버스(Canvas)는 동적으로 2차원 그래픽을 구현할 수 있는 API다. 여기서 동적으로 그래픽을 구현한다는 점이 특징이다. 또한, <canvas> 엘리먼트에 직접 그래픽을 표현할 수 있다. 동적이 아닌 정적인 그래픽은 HTML4의 <img><object> 엘리먼트를 사용해서 표현할 수 있다.

그래픽을 표현하기 위한 요소로는 위치를 나타내는 X/Y 좌표, 도형/선을 그리는 형태와 색상을 들 수 있다. 즉, 캔버스는 이를 위한 메소드와 프로퍼티를 제공한다. 또한 자바스크립트 프로그램으로 캔버스의 메소드와 프로퍼티를 조합해 그래픽을 표현하게 된다.

<화면 2>의 캔버스 도형에서 볼 수 있듯이 바탕색이 다른 원이 5개 그려졌다. 또한 다음은 이를 그린 코드다.

<화면 2> 캔버스 도형

var context = document.getElementById(‘idOne’).getContext (‘2d’);
var arcFill = function(x, y, r, g, b, radius){
    context.beginPath();
    context.fillStyle  = ‘rgba(‘ + r + ‘, ‘ + g + ‘, ‘ + b + ‘, 0.7)’;
    context.arc(x + 650, y + 180, radius, 0, Math.PI * 2, false);
    context.fill();
}

arcFill(50, 40, 255, 130, 130, 30);
arcFill(50, 90, 43, 255, 40, 30);
arcFill(100, 40, 64, 161, 255, 30);
arcFill(100, 90, 158, 64, 255, 30);
arcFill(75, 65, 255, 255, 223, 25);

첫 번째 줄에서 도큐먼트에 작성된 <canvas> 엘리먼트를 엘리먼트 오브젝트로 생성하면 오브젝트에 getContext()가 설정되어 있으므로 이를 호출할 수 있다. getContext()는 캔버스 오브젝트를 반환하는 생성자 함수다. 캔버스가 API이므로 new 연산자를 사용해서 오브젝트를 생성해야 하나 new 연산자를 사용하지 않고 생성자 함수를 불러 오브젝트를 생성한다. 또한, 캔버스를 표현할 수 있는 메소드와 프로퍼티가 캔버스 오브젝트에 설정되어 있으므로 이를 사용할 수 있다. 

아래의 arcFill()의 파라미터에 원이 표시될 X/Y 좌표, 바탕색의 RGB 값, 원의 반지름을 지정해 호출하면 원을 그리게 된다. 단순한 것 같으므로 하나 더 살펴본다.

<화면 3> 캔버스 차트

<화면 3>은 캔버스로 그린 차트다. 서버에서 데이터를 받아와서 차트를 그릴 수 있으며 직접 데이터를 지정해 그릴 수도 있다. 여기서 중요한 것은 동적 그래프라는 점이다. 만약 주식 동향 그래프를 제공한다고 할 때 고정된 그래프가 아닌 동적으로 서버에서 데이터를 받아와 그려야 하며 데이터 값에 의해 그래프가 그려져야 한다. 또한 프로그램도 데이터에 따라 움직여야 하므로 고정 값을 지정한 형태가 아닌 옵션을 지정해 프로그램이 수행되는 형태가 되어야 한다. 이와 같이 Canvas API는 동적으로 그래프를 그리는 데 유용하다.

최근의 동향을 보면 모바일에서 웹 페이지를 쉽게 볼 수 있도록 하기 위해 되도록이면 이미지 파일을 사용하지 않으려는 경향이 있다. 캔버스를 사용해서 이미지를 표현하면 모바일에 탑재된 모든 브라우저에서 캔버스 API를 지원하므로 웹과 모바일 모두 통용될 수 있다. 이미지 파일이 다운로드될 때까지 기다리지 않아도 된다.

이미지 파일을 되도록 사용하지 않으려는 또 하나의 이유는 통신이 연결되지 않은 오프라인 상태에서도 모바일은 애플리케이션을 실행할 수 있다는 점 때문이다. 이때 <html> 태그에 실행할 파일과 이미지 파일의 URL을 지정한다. 그런데 캔버스로 이미지를 표현하면 이미지 파일이 필요 없으므로 지정하지 않게 된다. 물론, 지정하는 것이 어려운 것은 아니지만 이미지 파일의 URL이 변경되거나 동적으로 이미지를 표현해야 하는 경우에는 부담이 될 수 있다. 즉 유지보수의 어려움이 있다. 하지만 캔버스로 이미지를 표현하면 동적으로 이미지를 표현할 수 있으며 프로그램만 수정하면 자동으로 반영되므로 이미지 파일의 URL을 바꾸지 않아도 된다.

또 다른 방법으로 CSS3를 사용하는 것을 생각할 수 있는데, 모바일의 브라우저는 지원하지만 IE 6/7/8에서 지원하지 않으므로 웹 페이지에 적용하기에는 어려움이 있다. 물론 Canvas도 IE 6/7/8에서 지원하지 않지만 구글에서 개발한 캔버스 라이브러리를 사용하면 네이티브가 아니므로 다소 처리 속도가 떨어지더라도 이미지를 그릴 수 있다. 필자가 이를 제시하는 것은 대안, 다른 방법을 제시하기 위한 것이며 이렇게 해야 한다는 것은 아니다.

Web Storage
웹 스토리지(Web Storage)는 클라이언트에 데이터를 저장하기 위한 API다. 쿠키를 사용해서 데이터를 저장할 수도 있지만 용도와 방법이 다르다. 쿠키는 쿠키에 접근할 때마다 서버로 전송하지만 웹 스토리지는 전송하지 않는다. 또한 쿠키는 크기(4 KB)에 제한이 있지만 웹 스토리지는 사이트 단위로 5MB를 HTML5 스펙에서 권장하고 있다. 하지만 이는 권고이며 확정된 것은 아니다. 쿠키는 유효 기간을 설정할 수 있으며 이 기간이 지나면 자동으로 지워지지만 웹 스토리지는 유효 기간이 없으며 사용자가 의도적으로 지우지 않으면 영구 보관된다. 

웹 스토리지는 키와 값 형태로 저장된다. 일명 Hash로 {key : value} 형태다. 현재 문자열을 지원하는 브라우저가 있을 수 있는데, 이는 이전 스펙에서는 문자열로 지원하도록 되어 있기 때문이며 최근 스펙에서 변경되었다.

웹 스토리지는 두 가지 유형의 로컬 스토리지와 세션 스토리지를 제공한다. 로컬 스토리지는 사이트 단위를 지원하며 세션 스토리지는 브라우징 콘텍스트 단위로 지원한다. 브라우징 콘텍스트란 브라우저에서 다수의 탭을 사용할 때 각각의 탭을 의미한다. 로컬 스토리지 값은 영구 보관되며 세션 스토리지는 브라우저를 닫으면 자동으로 지워진다.

여기서 하나 생각할 것은 왜 이런 메커니즘을 갖느냐는 것이다. 필자가 웹 스토리지 API를 개발한 것이 아니므로 바로 이것이라고 단언할 수는 없지만 우선 생각할 수 있는 것은 통신을 최소화할 수 있다는 점이다. 같은 데이터를 매번 서버에서 가져오지 않고 웹 스토리지에 저장된 데이터를 사용하면 속도도 훨씬 빠를 뿐 아니라 서버의 부하도 줄일 수 있다. 특히 통신이 끊긴 오프라인 상태에서 실행되는 모바일에서 더욱 진가를 발휘할 수 있다. 

예를 들어 고객과 상담 중에 주문을 받았다고 했을 때 그 자리에서 주문을 모바일에 입력할 수 있다. 이때 웹 스토리지에 주문 입력을 위한 기본 데이터가 저장되어 있다면 서버와 연결하지 않아도 된다. 고객과 같이 모바일을 보면서 주문 내용을 입력할 수 있다. 또한 이어서 다루고 있지만 입력한 데이터를 데이터베이스 API를 사용해서 모바일에 저장할 수 있다.

여기서 중요한 것은 통신이 끊긴 상태에서도 처리할 수 있다는 점이다. 오프라인 상태에서 웹 스토리지 또는 데이터베이스에 데이터를 저장하고 필요한 시점에 서버와 연결해 저장된 데이터를 전송한다. 이와 같이 HTML5는 통신이 끊어진 오프라인 상태에서도 처리할 수 있는 아키텍처와 메커니즘을 제공한다.

Database
HTML5는 두 가지 유형의 Web SQL Database와 Indexed Database를 제공한다. Web SQL 데이터베이스는 ‘select * from table_name’과 같이 일반적으로 알려진 SQL을 사용해서 데이터를 저장/추출할 수 있으며 Indexed 데이터베이스는 인덱스를 사용해서 데이터를 저장/추출할 수 있다. 그런데 Web SQL 데이터베이스는 개발이 중단되었으며 Indexed 데이터베이스가 표준으로 채택될 가능성이 높다.

Indexed 데이터베이스는 {key: value} 형태에 인덱스를 부여해 데이터를 저장한다. 따라서 key 또는 인덱스로 데이터를 저장/추출할 수 있다. 물론, 처리 속도가 떨어질 수 있지만 value로도 추출할 수도 있다. 인덱스는 데이터베이스에서 자동으로 설정한다. 

여기서 {key: value} 형태는 앞서 다뤘던 웹 스토리지와 같다. 다만 Indexed 데이터베이스는 인덱스를 부여하며 저장하므로 key가 중복되더라도 값을 저장할 수 있다. 예를 들어 회원번호를 가진 회원이 다수의 주문을 한다고 할 때 주문번호가 아닌 회원번호를 사용해서 데이터를 저장할 수 있다. 또한 데이터베이스에서 지원하는 커서(cursor) 기능을 제공하므로 데이터를 보다 빠르게 추출할 수 있다.

서버에서 모든 것을 하던 시대는 끝났다

HTML5에는 지금까지 살펴본 것 이외에도 다수의 API가 있다. 하지만 지면 관계도 있고 본 내용이 API를 소개하는 것이 목적이 아니므로 전체를 다루지 않았다. 

그럼 지금까지 살펴본 API의 핵심은 무엇일까? 우선 모든 API가 브라우저에 탑재되어 있으며 클라이언트에서 실행된다는 점이다. 따라서 브라우저가 실행될 수 있는 환경이면 어디서든지 HTML5를 제공할 수 있으며 이의 궁극적인 목적은 인간에게 콘텐츠를 제공하는 데 있다.

30년 전 필자가 처음 프로그램을 개발할 때는 모든 것이 메인 컴퓨터에 있었다. 그리고 어느 정도 시간이 흐른 후 클라이언트/서버 시대가 도래했다. 메인 컴퓨터에서 실행되던 프로그램이 클라이언트에서 실행되는 형태로 유저 인터페이스와 관련된 프로그램이 클라이언트에서 실행되었다.

한편 이 무렵에 웹이 태동했으며 브라우저가 클라이언트 프로그램 역할을 하게 되었다. 하지만 이때의 브라우저는 HTML5가 탑재된 현재의 브라우저하고는 기능도 다르고 처리 방법, 범위도 달랐다. 웹 페이지를 표현하는 것이 주된 기능이다.

브라우저를 사용해서 데이터를 표현하려면 반드시 서버용 애플리케이션이 있어야 한다. 서버용 애플리케이션에서 보내준 데이터를 받아 이를 표현하는 형태로 동기 또는 비동기 방식으로 데이터를 주고 받는다. 이런 환경으로 인해 서버용 애플리케이션은 데이터를 제공하는 형태로, 브라우저는 유저 인터페이스 중심으로 데이터를 표현하는 형태로 발전되었다.

하지만 이런 구조는 사용자의 다양한 요구를 만족시키기에 한계가 있으며 특히 모바일과 다양한 디바이스 환경의 사용자 요구를 만족시키기에 더욱 한계가 있다. 이에 대처할 방법이 바로 HTML5인 것이다. 지금까지 살펴봤듯이 HTML5는 서비스 지향 아키텍처이며 메커니즘을 제공한다.

HTML5는 브라우저만으로 PC, 모바일, 디바이스에서 서버 기능의 대부분을 단독으로 처리할 수 있다. 다른 프로그램이 필요한 것도 아니며 OS가 다른 디바이스 환경에 제약을 받는 것도 아니다. 데이터를 저장할 수 있는 데이터베이스도 있으며 클라이언트의 파일을 읽거나 쓸 수도 있으며 그래프를 표현할 수도 있으며 필요할 시점에 매우 빠르게 다른 디바이스와 통신할 수도 있다. 간단한 애플리케이션이라면 서버와 연결하지 않고 단독으로 처리할 수 있다. 비록 지금은 작은 애플리케이션이지만 가까운 미래에 디바이스 용량이 커지면 큰 애플리케이션도 실행할 수 있게 된다. 이는 하드웨어적인 면으로 지금까지의 경험으로 볼 때 그야말로 눈 깜짝할 사이에 실현될 것이다.

이제, 클라이언트와 서버가 브라우저에 통합되어 손바닥 안에서 실행하게 된다. 손바닥 위에서 무릎 위에서 손가락으로 콘텐츠를 보고 생성하는 시대가 도래한 것이다. 서버와 연결하지 않고도 유려한 인터페이스를 사용해서 보다 인간적으로 친근하게 콘텐츠를 처리할 수 있다. 이제 서버에서 모든 것을 제공하던 시대는 끝났다. 이제 남은 것은 서버와 클라이언트가 융합해 보다 나은 콘텐츠를 어떻게 사용자에게 제공할 것인가를 생각하고 행동하는 것이다. 그리고 그 중심에 HTML5가 있다. 인간에게 선택 받지 못한 콘텐츠는 더 이상 존재 가치가 없다는 점을 상기해 보며 글을 마친다.

출처:
http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=36440

'HTML' 카테고리의 다른 글

비디오  (0) 2011.05.12
펌] 폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론  (0) 2011.03.09
아이프레임 투명하게 만드는 방법  (0) 2010.11.18
파비콘  (0) 2010.05.14
올바른 Table 사용  (0) 2010.04.01
:

아이프레임 투명하게 만드는 방법

HTML 2010. 11. 18. 13:49

아이프레임으로 공지 등을 불러올때 공지 배경을 투명하게 하는 방법.

 

공지의 body 태그에 style="background-color:transparent" 를 넣어준다.


(body style="background-color:transparent" leftmargin='0' topmargin='0' marginwidth='0' marginheight='0'>

 

그리고 공지를 불러오는 아이프레임 태그에 allowTransparency=false를 넣어준다.

(iframe allowTransparency=false src='주소' width='100%' height='100' frameborder='no' scrolling='no'>

========================

 

배경이 있는 곳에서 아이프레임을 사용 할 때 유용하게 쓰임.

 

불투명 아이프레임(IE 5.5 이상)

 

iframe 소스안에 style="filter: Alpha(Opacity=60);"

이것만 추가.

 

투명 아이프레임(IE 5.5 이상)

 

iframe 소스 안에 allowTransparency="true"

이것을 추가.

그리고 아이프레임 내부에 들어갈 문서 body의 < > 안에 style="background-color:transparent" 를 추가.


=======================

 

 투명한 iFrame 만들기


iframe을 사용해 웹 페이지 중간에 다른 페이지의 내용을 넣을때가 종종 발생한다.

하지만 웹 페이지의 백그라운드의 컬러나 이미지가 들어가 있는상태면 iframe을 넣을 경우 웹페이지 백그라운드와

iframe의 백그라운드간의 배경이 매칭되지 않는 경우가 있다.

이럴때 iframe의 속성값을 줘서 투명하게 매칭시킬 수 있는 방법이있으니,,,

 

source :

 

 웹페이지
<iframe src="웹페이지 주소" allowTransparency="true" width="가로크기" height="세로크기></iframe>

 

 

 iframe에 들어갈 페이지
<body style="background:transparent;">

 

Relation property
배경을 투명하게 하는 방법도 있지만 iframe자체를 투명하게 해줄 수 있는 방법도 있다.

방법은 아래

 

<iframe src="" style="filter:Alpha( Opacity=50 );">

이와 같이 Alpha값의 Opacity값을 변경해 주면 된다.

'HTML' 카테고리의 다른 글

비디오  (0) 2011.05.12
펌] 폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론  (0) 2011.03.09
HTML5 표준 기술과 서비스 생태계 변화  (0) 2011.01.24
파비콘  (0) 2010.05.14
올바른 Table 사용  (0) 2010.04.01
:

파비콘

HTML 2010. 5. 14. 10:28

브라우저 주소창의 URL 왼쪽에 16x16 픽셀의 조그마한 아이콘을 넣는 방법입니다. 이런 아이콘을 "파비콘(favicon; favorites icon)"이라고 합니다. 원래 MS가 IE 브라우저를 위해서 만든 것입니다. 그래서 웹 표준이 아니지만 파이어폭스에서도 잘 지원됩니다.

실은 몇 년 전부터 IE에서는 파비콘이 잘 보이지 않게 되었습니다. 이제는 오히려 파이어폭스에서 파비콘이 더 잘 보이더군요.


favicon.ico 파일 만들기


우선 favicon.ico 라는 파일명의 아이콘 파일을 만들어야 합니다.

마이크로안젤로 같은 아이콘 편집기를 사용하여 만들면 됩니다: ▶▶ 윈도우 아이콘/마우스 커서 편집 프로그램: Microangelo Toolset (마이크로안젤로)

되도록 16x16 픽셀의 소형 아이콘으로 저장해야 합니다.

그런 후 아이콘 파일을 서버에 올립니다. 지오시티(Geocities) 등의 서버에서는 .ico 확장자 파일을 거부하는데, 이때는 favicon.ico 를 favicon.zip 등으로 확장자를 변경하여 업로드한 후, 다시 이름을 favicon.ico 로 고쳐 주어야 합니다.



Favicon 추가 태그


웹페이지의 <head></head> 태그 사이에 다음의 코드를 삽입하면 됩니다.

<link rel="shortcut icon" type="image/x-icon" href="http://www.example.com/favicon.ico" />

위의 코드에서 www.example.com 이라고 된 부분을, 자신의 실제 주소로 바꾸어 주어야 합니다.



브라우저 주소창에 파비콘 (URL 아이콘) 넣기 예제


HTML 페이지의 최종적인 형태는 다음과 같습니다:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>페이지 제목</title>
<link rel="shortcut icon" type="image/x-icon" href="http://www.example.com/favicon.ico" />
</head>

<body>
... 여기서 부터 본문 시작 ...


헤드 태그 속의 맨 마지막에 넣으면 적당합니다. 별로 중요한 요소가 아닌 것은 되도록 아래쪽에 넣는 것이 좋습니다.


만약 파일명을 favicon.ico 로 할 수 없는 경우에는 다른 파일명을 지정해도 괜찮습니다.

그런데 favicon.ico 파일은 서버의 루트 디렉토리(최상위 디렉토리)에 있어야 합니다. 그렇지 않고 하위 디렉토리 속에 있으면 IE에서 인식을 못하더군요.



IE 6 브라우저에서 Favicon 이 보이지 않는 문제


파이어폭스에서는 Favicon 이 항상 잘 보입니다. 그렇지만 IE 에서는 좀 문제가 있습니다. 해당 사이트의 파비콘을 보기 위해서는, 우선 Ctrl+D키를 눌러 그 사이트에 대한 북마크를 만든 후, IE를 닫고 다시 실행하여 그 사이트를 재방문해야, 주소창에 파비콘이 보이는 문제가 있습니다. 그렇지만 이 방법도 확실하게 잘 되는 것은 아닙니다.


>>출처 : mwultong Blog
:

올바른 Table 사용

HTML 2010. 4. 1. 09:42

Table 요소는 2차원의 격자형 데이터를 표현할 때 사용되며 예외적으로 dt, dd 형식으로 마크업 할 수 있는 데이터도 표현할 수 있습니다. Table 요소는 표를 설명하는 적절한 제목을 지녀야 하는데 h1~h6, caption, summary 중 한가지 요소 또는 속성을 반드시 사용하여야 합니다. 아래 예제를 통하여 올바른 사용법을 익힐 수 있습니다.

  • caption :표의 제목 요소. table요소 바로 뒤에만 허용되며 한 번만 표시할 수 있습니다.
  • summary :표의 요약 속성. table요소에 동반되는 속성으로서 표의 제목caption이 존재하지 않는 경우나 표에 요약설명이 필요한 경우 사용할 수 있습니다.
  • thead, tbody, tfoot :표의 행tr을 그룹핑하는 요소로서 표의 머리글, 본문, 풋터를 지정합니다. tfoot요소의 경우 보통 이에 해당하는 데이터가 없어서 생략되는 경우가 많습니다.
  • th :표의 머리글 셀을 지정합니다. 표의 머리글 셀은 scope, abbr 과 같은 속성을 동반합니다. scope 속성은 사용이 강력하게 권장되며 abbr 속성은 필요에 따라 사용할 수 있습니다.
  • scope :th 요소에 동반되는 속성으로서 현재의 셀이 어느 셀의 제목인지 그 범위를 명시합니다. scope 속성의 값으로는 col, colgroup, row, rowgroup 이 있습니다
  • abbr :th 요소에 동반되는 속성으로서 포함하고 있는 콘텐츠에 대한 약식표기가 가능한 경우 약어를 표기하는데 사용합니다. th셀의 내용을 반복해서 음성으로 출력하는 도구들은 abbr 속성에 표기된 약어를 읽게 됩니다.



자장면과 짬뽕의 가격과 열량 비교
구분 가격(won) 열량(kcal)
자장면 3,000 300
짬뽕 3,500 350


<table summary="짬뽕은 자장면보다 500원 비싸고 열량이 50kcal 높다">
    <caption>
    자장면과 짬뽕의 가격과 열량 비교
    </caption>
    <thead>
        <tr>
            <th>구분</th>
            <th scope="col" abbr="가격">가격(won)</th>
            <th scope="col" abbr="열량">열량(kcal)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">자장면</th>
            <td>3,000</td>
            <td>300</td>
        </tr>
        <tr>
            <th scope="row">짬뽕</th>
            <td>3,500</td>
            <td>350</td>
        </tr>
    </tbody>
</table>


>>출처 NULI

'HTML' 카테고리의 다른 글

비디오  (0) 2011.05.12
펌] 폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론  (0) 2011.03.09
HTML5 표준 기술과 서비스 생태계 변화  (0) 2011.01.24
아이프레임 투명하게 만드는 방법  (0) 2010.11.18
파비콘  (0) 2010.05.14
: