<p class="com_name"><span class="vertical"></span><span class="text">웹피</span></p>

이런 형태면 테이블의 셀같은 정렬이 가능하다

ie6, ie7, 크롬, 파이어폭스 등에서 모두 적용

<%="<object"%> classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
     width="764" height="80" title="경희대학교 메인메뉴">
      <param name="wmode" value="transparent" />
      <param name="movie" value="/images/swf/gnb.swf" />
     <!--[if !IE]> <-->
     <object type="application/x-shockwave-flash" data="/images/swf/gnb.swf" width="764" height="80" title="경희대학교 메인메뉴">
      <param name="wmode" value="transparent" />
     </object>
     <!--> <![endif]-->
     </object>

해당 관련 자세한 내용
신현석님 블로그 http://hyeonseok.com/soojung/webstandards/2009/09/07/547.html

<link rel="stylesheet" type="text/css" href="default.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<[endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<[endif]-->
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<[endif]-->

<
meta
http-equiv="X-UA-Compatible"
content="IE=7" // IE7에 최적화
/>

<
meta
http-equiv="X-UA-Compatible"
content="IE=EmulateIE7"
/>

DTD가 없는 페이지는 여전히 Quirks Mode로,
DTD가 있는 페이지는 IE 7 표준 모드로
렌더링 할 것이다.

<%="<object"%> classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="player" width="269" height="219">
     <param name="url" value="perfect.wmv">
     <param name="src" value="perfect.wmv">
     <param name="showcontrols" value="true">
     <param name="autostart" value="true">
     <!--[if !IE]>-->
     <object type="video/x-ms-wmv" data="perfect.wmv" width="269" height="219">
     <param name="src" value="perfect.wmv">
     <param name="autostart" value="true">
     <param name="controller" value="true">
     </object>
     <!--<![endif]-->
     </object>

asp일때 오브젝트 중복에러가 나오면 <%="<object"%>로 대체 기본은 <object

IE8로 네이버나 몇몇 사이트를 보면 호환모드가 뜨지 않는걸 볼 수 있습니다
이는 사이트내에 메타태그로 강제 호환모드를 주어서 그런데요
방법은

<meta http-equiv="X-UA-Compatible" content="IE=7" />

주시면 강제로 IE7 호환모드로 렌더링 됩니다 그런데 IE8용 호환모드 렌더링도 IE7과 완전히 같지 않기때문에 이점 감안해야 될 듯 하네요
완전히 IE7로 렌더링을 위해서는 F12 (개발자도구) 누르시면 메뉴에 "브라우저모드" 가 있습니다 이를 IE7로 바꿔 주시면 됩니다

input 박스에는 여러가지가 있습니다. (라디오,체크박스,텍스트박스등)

 

여기에서 라디오 박스와 체크박스는 IE와 타브라우저에서 외곽여백의 차이가 있습니다.

이런경우를 잘모르는 웹디자이너 같은 경우 무조건 자기디자인 데로 해달라고 요구하곤하죠.. 그것도 익스에만 맞춰달라면서...참피곤한 경우죠. 물론 디자이너 입장에서는 그게 정답이고, 퍼블리셔 입장에서 맞춰주는것도 해야할일중에 하나일수는 있습니다. 그래서 협업이 중요한거 같습니다.

 

여튼 이럴때 해결방법입니다.

 

먼저 소스를 살펴보겠습니다.

 

 

위와 같은 소스를 출력하면 다음과 같습니다.

 

 

익스와 파폭,사파리는 기본적으로 4px 이라는 외곽여백이 존재하며, 오페라는 3px 여백이 있었습니다.

세로여백은 top 라인에서 익스는 2px, 파폭과 사파리는 3px, 오페라는 0px 여백이 있었습니다. (여기서 사파리는 버전이 4입니다.)

 

그럼 여백을 초기화 해보기로 합시다.

 

 

여기에서 초기화 방법도 여러가지겠지만, 저는 테스트로 * 를 사용했습니다.

body, table, div, input {margin:0; padding:0;} 이런식으로 해줘도 됩니다. 어떤방법이던간에 중요한건 input 에 여백을 0 으로 만드는겁니다.

 

 

익스를 제외하고 타브라우저에서는 여백이 줄어든걸 볼수있습니다. (역시 익스는 끄덕없습니다. 어쩔~ -.-)

input 에 여백을 주지 않을경우는 많은 차이가 없었지만, 여백을 0 으로 하니 브라우저마다 보여지는 차이가 커졌습니다.

 

그럼 이걸 어떻게 맞출까? 방법은 여러가지 겠지만 class 로 input 에 직접 적용해보겠습니다. (물론 여백은 0 으로 했을때 입니다.)

 

 

 

가로 여백(1px) 은 익스와, 파폭, 사파리가 동일하고, 오페라는 2px 벌어졌습니다. 그리고 세로 여백은 사파리를 제외하고 모두 동일해졌습니다.
너무 붙어있는거 같으니, 조금 여백을 주도록하겠습니다.

.input_m {width:13px; height:13px; margin-right:4px; vertical-align:middle;}

 

 

사파리에서 약간의 차이가 있긴하네요. 이래서 핵이 필요한가 봅니다. -.-

위처럼 했는데도 디자이너가 모든브라우저에서 확인후 "어 사파리에서 텍스트가 조금 올라겠네요?" 라고 태클을 걸어온다면, 깔끔하게 핵을 써주세요. (체크와 라디오박스에서 핵사용없이 1px 오차도 없게 하는 방법이 있으면 알려주세요.) 

 

다른방법으로는 * {margin:0; padding:0;} 을 준상태에서 익스만 여백이 그대로이기때문에 익스만 margin-right:-4px 로 주는 방법도 있긴합니다. (익스전용 핵을 사용해야겠죠)

 

어떻게 초기 구조화를 할건지는 제작할 사이트의 특성을 보고 판단하시기 바랍니다. ex) input 전체에 적용할것인가, 아님 class로 뺀후 부분부분만 적용을 할것인가... (차후에 유지보수할때 쉬운쪽으로..)

 

 

만족된 결과는 아니지만, 확인해보시고 또 다른 좋은 방법이 있으면 알려주세요.^^; (공유합시다.)

출처 : http://www.webmini.net/46401#0 (경대리님글~ ㅡㅡb)

아래 포스팅 한 테그 리스트는 웹 표준화팀 에서 “ 축약된 테그의 온전한 이름(Full tag name) 바로알고 사용하자 ”라는 운동의 일환으로 제가 직접 맡아서 제작한 것 입니다.
내용은 tagkorea.pe.kr의 “ 태그사전 ” 에서 참고하였습니다.

Tag name	Tag full name
<a>	Anchor
href=”URL”
name=”이름”
taget=”_blank” ,”_parent” , “_self” “_top”
<alink>	Active LINK
<applet>	java APPLET
align=”top”, “middle” , “bottom” ,           ”left” , “right”
alt=”텍스트”
code=”URL”
codebase=”URL”
height=수치,width=수치
hspace=수치,vspace=수치	Horizontal SPACE, Vertical SPACE
name=명칭
<b>	Bold
<big>	BIG text
<bq>	Block Quote
<bgsound>	BackGroundSOUND
loop=수치 or “infinite”
src=”URL”
<br>	BReak
<col>	table COLumn
align="center, justify, left, right"
valign="baseline, bottom, middle, top"
width="숫자"
span="숫자"
<colgroup>	COLumn GROUP
<cols>	COLumnS
<colspan>	COLumn SPAN
<dd>	Definition Data
<dl>	Definition List
<dt>	Definition Term
<del>	DELeted text
<dfn>	DeFinitionN
<dir>	Directory List
<div>	DIVision
align=”left” , “right” , “center”
<em>	EMphasized
<embed>	EMBEDded
height=수치, width=수치
name=”이름”
param=”값”
src=”URL”
<fig>	FIGure
<fn>	FootNote
<h1>	Heading 1
<hr>	Horizontal Rule
align=”left”또는 “right” 또는 “center”
color=”#RRGGBB” 또는 “색이름”
noshade
size=수치
width=수치
<html>	HyperText Markeup Language
<href>	Hyper REFerence
<hsides>	Horizontal SIDES
<i>	Italic
<iframe>	Inline FRAME
border="테두리의 굵기"
bordercolor="테두리의 색깔"
frameborder="테두리의 유무"
name="Frame의 이름"
scrolling="스크롤 바의 유무"
<ins>	INSerted text
<id>	IDentification
<img>	IMaGe
align=”top”, “middle” , “bottom” ,           ”left” , “right” , “center”
alt=”텍스트”
border=수치
controls
dynsrc=”URL”	DYNamic SouRCe
height=수치,width=수치
hspace=수치,vspace=수치	Horizontal SPACE, Vertical SPACE
ismap
loop=수치 또는 “infinite”
src=”URL”
start=”fileopen”, “mouseover”
uesmap=”#이름”
<kbd>	KeyBoarD
<lang>	LANGuage
<li>	Listed Item
type=”A” , “a” , “I” , “i” , “disc” ,           ”circle” , "square”
value=수치
<lh>	Listed Heading
<lhs>	Left Hand Sides
<nobr>	NO BReak
<ol>	Ordered List
<optgroup>	OPTion GROUP
type=”A” , “a” , “I” , “I”
start=숫자
<p>	Paragraph
align=”left” , “right” , “center”
<param>	PARAMeters
name=”명칭”
value=”값”
valuetype=”data” , “ref” , “object”
type=”MIME유형”
<pre>	PREformatted text
<q>	Quote
<rhs>	Right Hand Sides
<s>	STRIKE
<samp>	SAMPle
<small>	SMALL text
<sub>	SUBscript
<sup>	SUPerscript
<src>	SouRCe
<tab>	horizontal TAB
<tbody>	Table BODY
align=”left” , “right” , “center”
bgcolor=”#FFFFFF” or “색이름”
valign="baseline, bottom, middle, top"
<thead>	Table HEAD
align=”left” , “right” , “center”
bgcolor=”#FFFFFF” or “색이름”
valign="baseline, bottom, middle, top,"
<td>,<th>	Table Data, Table Header
align=”left” , “right” , “center”
bgcolor=”#FFFFFF” or “색이름”
bordercolor=”#FFFFFF” or “색이름”
colspan=수치
height=수치
nowrap
nowspan=수치
valign=”top” , “middle” ,            “bottom” , “baseline”
width=수치
<tr>	Table Row
align=”left” 또는”right” or “center”
bgcolor=”#FFFFFF” or “색이름”
bordercolor=”#FFFFFF” or “색상명”
valign=”top” , “middle” ,           ”bottom” , “baseline”
<tt>	Tele Type
<u>	Underline
<ul>	Unordered List
type=”disc” , “circle” , “square”
<var>	VARiable
<vlink>	Visited LINK
<vslides>	Vertical SIDES
<wbr>	Word BReak
<xhtml>	eXtensible Hyper Text Markup Language

출처 : 네이버 웹표준 블로그 http://html.nhndesign.com/blog/?cat=3&paged=6

Internet Explorer 브라우저에서 보면 일반적으로 <img src="....."  .../>  테그를 사용하고
해당 태그에 마우스 오버를 하면 다음과 같은 도구 상자가 나타납니다

        

이것을 "imagetoolbar" 라고 부르더군요...

최근에 imagetoolbar가 뜨면 안되는 상황이 와서 구글링좀 해봤습니다..

두가지 해결 방법을 찾았습니다.

1. Meta markup in Head 

head 테그 내부에 meta 테그를 삽입함으로써 해결가능합니다..

  <meta http-equiv="imagetoolbar" content="no" />

2. 비표준 img 테그 속성 사용

IE에서만 제공하는 img 테그의 비표준 속성을 사용할 수 있습니다.

해당 이미지 테그에 galleryimg = "no" 라는 속성을 주면 imagetoolbar가 뜨지 않습니다.

  <img src="....." galleryimg="no"/>

비표준 속성이므로 사용이 장려되지는 않는군요... 하지만 이렇게 부분적으로 처리를 해야한다든지

여러 사정상 meta 테그를 사용할 수 없는 경우에 자바스크립트로 처리할 수도 있습니다.

  var _img = document.getElementById("img1");

  _img.galleryimg = "no";

두가지 방법중 사용 가능한 방법을 사용하면 좋을것 같습니다 : )

출처 : 다음 UI개발자 블로그

<link href="basic.css" rel="stylesheet" type="text/css">  --> 구형 브라우저

 

<style type="text/css" media="screen">

<!--
@import url(basic.css) screen;
-->

</style>  --> 현대적인 브라우저

<form name="bodyForm">
   <input type="file" name="fl" style="display:none">
   <input type="text" name="fileName"><img src="fileSearch.gif" onclick="document.bodyForm.fl.click()">
  </form>

만만하게 볼 작업만은 아니네요^^;;

이미지를 변경하시거나 소스를 수정해서 직접 만들어 보세요

모두 고마우이..ㅎㅎ

<style type="text/css">
 h3 {
  display:none;
 }
 .floor { 
  background:url("img/com_bg01.gif") left top no-repeat;
  width:702px;
  height:70px;
  padding:6px 0 0 80px;
  margin:0;
  list-style-type:none; */  li 앞의 ● 들을 없앱니다. */
 }
 .floor li{
  float:left;  /* li가 옆으로 쭉 붙습니다.. display:inline; 써놓고 계속 고민T.T ie에선 먹지만.. ff, opera 에선 inline이 안먹네요... ul이 block요소라 그렇디다..ㅎㅎ  float:left;를  써 주어야 모두 만족시킵니다. */
  width:81px;
  text-align:center;
  margin:0 0 0 5px;
 }
 .floor li a {
  color:#666;
  font:bold 12px Dotum;
  width:81px;
  height:22px;
  padding:5px 0px 0px 0px;
  text-decoration:none;
  display:block; /* ie에선 안써도 제대로 보이지만... ff, opera에선 block 써주어야 영역이 제대로 표출됩니다..  이거 빼고 테스트 해보시길..ㅎㅎ */
 }
 .floor li a:hover {
  color:#fff;
  background:url("img/com_bg_num.gif") left top no-repeat; /* 마우스 갖다대면 배경으로 나옵니다. */
  font:bold 12px Dotum;
  width:81px;
  height:22px;
  padding:5px 0px 0px 0px;
 }
 .floor li a.aaa {
  color:#fff !important;
  background:url("img/com_bg_num.gif") left top no-repeat; /* 선택된 페이지 */
  width:81px;

 }
</style>

<h3>층별 안내</h3>
<ul class="floor">
 <li><a href="#" class="aaa">B1</a></li>
 <li><a href="#">1F</a></li>
 <li><a href="#">2F</a></li>
 <li><a href="#">3F</a></li>
 <li><a href="#">4F</a></li>
 <li><a href="#">5F</a></li>
 <li><a href="#">6F</a></li>
</ul>

잠깐의 틈을 타..

작업하던 중 응용해서 만들어 봤어요... 아웅~ 신나!

지식이 기술을 낳습니다... 보다 업그레이드 해서 작업해보세요 ㅎㅎ

디따조아, 디스타일의 도움을 받아.. 여러가지 사실을 캐치.... 뜻깊은 하루 되었습니다..

작업 후 style은 css문서로 빼셔야 겠죠..ㅎㅎ

출처 : 하코사 나나님

이 LABEL 태그를 잘 활용하면 라디오 버튼, 체크 박스, 입력 상자 등의 폼 컨트롤을

직접 선택하지 않고 텍스트만 눌러도 폼 요소가 선택이 되는 효과를 나타낼 수 있습니다.

LABEL 태그는 일반적으로 잘 사용하지 않는 태그 중 하나입니다.

테스트결과 ie에서 동작합니다.

파폭이나 오페라에서도 동일한 효과를 나타내려면 어떻게 해야할까요?^^

제가 생각하는 label 태그를 이용하면 ie에서나마 웹접근성이 높아지는 효과를 볼 수 있는거 같습니다..

label 미지정:
<input type="radio" name="link" value="home" > 홈으로 이동하기

label 지정:
<input type="radio" name="link" value="home" id="홈으로 가기">
<label for="홈으로 가기">홈으로 가기</label>

출처 : 하코사 나나님

a 태그의 사용성과 접근성.

안녕하세요? 오늘은 HTML DTD에 따른 FIELDSET과 LEGEND 요소의 다른 사용법에 대하여 공유드리고자 합니다.

• FIELDSET 요소는 하나의 전송양식(FORM)을 의미 단위로 그룹핑하는 요소로서, 회원가입 페이지의 전송양식을 예로 든다면 ‘필수입력, 선택입력’ 등과 같이 의미구조에 따라 전송할 내용을 그룹핑(또는 분할)하는 역할을 하고 있습니다.
• LEGEND 요소는 FIELDSET 요소에 대한 캡션(또는 제목)을 제공하여 양식의 이해를 돕는 역할을 하고 있습니다.

혹시 W3C Markup Validation Service 도구를 사용하면서 FIELDSET 요소 안쪽에 어떤 HTML요소는 허락하지 않는다는 오류를 만나보신 적이 없으신지요?
만난적이 없으시다면 아래 경우 중 한 가지 경우에 해당되실 것 같습니다.

1. HTML 4.01(ST) 문서에서 FIELDSET과 LEGEND의 용법을 정확하게 알고 사용하고 있다. (존경합니다^^)
2. HTML 4.01(ST) 문서에 대한 Validation Check를 해본적이 없다. (네, 저도 한동안은 뭐..)
3. Validation Check는 반드시 진행하지만 주로 XHTML 1.0(ST)을 사용한다. (부럽습니다~)
4. FIELDSET 요소를 사용하지 않거나, 평소에 오류따위는 무시하면서 살고 있다. 대수냐. (… 이리오슈~ 냉큼오슈!)

* ST : DTD의 표준모드(Strict) 또는 호환모드(Transitional)를 모두 일컬음.

HTML 4.01 문서에서 FIELDSET 요소를 사용할 때 FIELDSET의 자식으로서 어떤 HTML요소는 허락하지 않는다는 오류를 만나셨다면 그것은 HTML 4.01에서 FIELDSET과 LEGEND를 적절하게 마크업하지 못했기 때문일 수 있습니다. 하지만 그것이 여러분들의 잘못이라고는 생각하지 않습니다. W3C의 HTML 4.01 스펙 명세서에서 이것을 충분히 설명하지 않았기 때문이라고 생각합니다.

결론부터 말씀드리면 FIELDSET과 LEGEND의 사용법은 DTD에 따라 차이가 있습니다.

HTML 4.01의 경우 FIELDSET 사용시 LEGEND 요소는 반드시 첫 번째 자식(first-child)으로 마크업 되어야 합니다.

LEGEND요소를 FIELDSET의 첫 번째 자식으로 마크업 하지 않는 경우 W3C Validator는 LEGEND 속성이 비었다는 경고 대신에 아래와 같은 오류 메시지를 출력합니다.

• 현재의 DTD는 이 자리에 "XXX"요소를 허락하지 않아!
• "FIELDSET"의 닫기 태그가 여기서 나오면 안될껄?

LEGEND요소를 빼먹었다는 언급은 하지 않았지만 두 오류 메시지가 모두 틀린말은 아닙니다. 왜냐하면 LEGEND요소는 FIELDSET의 첫 번째 자식으로 존재해야 하는데 LEGEND가 등장하지 않았음으로 "XXX"라는 요소가 올 자리가 아니라는 사실도 맞고, FIELDSET이 닫히긴 했지만 뭔가 수상하다고 알려주고 있기 때문입니다.
 
이 사실을 모르셨던 분들의 경우가 더 많다고 생각되는데 그 이유인즉은, HTML 4.01 에서 FIELDSET이 나오면 LEGEND가 첫 번째 자식으로 나와야 한다고 명시적으로 설명하지 않았기 때문입니다. (또, 모르죠 웹 표준 만랩 되시는 분들이 보는 문서에는 기술되어 있는지. 하지만 제가 참조하고 있는 HTML 4.01 명세에는 그런 표현이 없는것 같습니다. 혹시 알고 계시면 알려주세요^^)

XHTML 1.0의 경우 FIELDSET 사용시 LEGEND 요소는 생략해도 됩니다.

제가 참조하는 HTML/XHTML 스펙 명세서에서는 관련 내용을 찾을 수 없었기에 W3C의 공개된 메일링 리스트에서 검색된 질답중 Masayasu Ishikawa 라는 분의 답변을 인용하면 아래와 같습니다. 메일 주소가 xxx@w3.org 형식으로 되어 있기에 급 신뢰가 가서 그분의 답변 일부를 인용합니다.

This is one of several places where XHTML 1.0 cannot approximate the definition of HTML 4.01 due to the difference between SGML and XML. XML doesn’t allow the content model like the FIELDSET content model in HTML 4.01, so in order to approximate the definition, XHTML 1.0 had to loosen the content model.

이것은 SGML과 XML간 차이에서 기인하는 것으로 XHTML 1.0을 HTML 4.01과 일치시킬 수 없었던 몇 가지 사례중 하나이다. XML은 HTML 4.01의 FIELDSET과 같은 콘텐츠 모델을 허용하지 않는다. XHTML을 XML의 정의에 일치시키도록 하기 위하여 XHTML 1.0은 FIELDSET 콘텐츠 모델에 대하여 느슨해져야만 했다.

So the semantics hasn’t changed, but the XHTML 1.0 DTDs cannot enforce this restriction due to the limitation of XML 1.0. XML Schema could cope with this problem better, though.

의미는 변하지 않았지만 XHTML 1.0은 XML 1.0의 제한 때문에 이것을 강제할 수 없었다. XML 스키마는 이 문제를 좀 더 개선해서 극복해야 한다고 생각한다.

내용을 이해하는게 쉽지는 않았지만 확실한것은 HTML 4.01과 XHTML 1.0의 FIELDSET/LEGEND 문법이 이렇게 다르고 XHTML 1.0에서는 XML과 콘텐츠 모델을 최대한 일치시키기 위하여 LEGEND 요소를 강제하지 않음으로서 오히려 이 콘텐츠 모델에서만큼은 느슨해지게 되었다 라는 사실입니다.

참조 URI

W3C home >  Mailing lists >  Public >  www-html@w3.org >  February 2002
Re: FIELDSET, LEGEND, HTML, & XHTML
http://lists.w3.org/Archives/Public/www-html/2002Feb/0054.html

글의 오류나 추가정보에 대한 코멘트 언제든 환영합니다. ^^

출처 : http://naradesign.net/wp/2008/04/02/137/

블록의 높이를 설정하는 속성

브라우져 화면의 100% 높이를 유지하는 레이아웃

1. 우선 height 100%를 사용하려면 html element와 body element의 높이를 100%로 확보해 주어야 합니다.
2. #body 는 min-height 로 100%높이를 유지 해주고, #content-area 는 원하고자 하는 컨텐츠 영역을 확보 합니다.
3. 이때, IE 는 min-height 를 지원하지 않으므로, conditional comment를 사용하여 height를 100% 로 확보 합니다. (주석같이 보이는 부분)
4. #head 의 높이와 #foot 의 높이가 고정이어야 한다는 제약이 있습니다...만, 거의 대부분의 웹사이트가 고정이므로 별 문제는 없으리라 봅니다.