<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>flexible 레이아웃</title>

<style type="text/css">

#wrap{width:100%}

#header{width:100%}

#container{_display:inline-block;width:100%}

#container:after{display:block;clear:both;content:''}

.snb{float:left;width:180px;margin-right:-200px}

#content{margin-left:200px}

#footer{width:100%}


div{margin:0 0 10px;padding:10px 0;color:#2d2c2d;font-family:Tahoma;font-size:14px;font-weight:bold}


#wrap{width:auto;margin:0;padding:10px;border:1px solid #bdbdbd;background:#f7f7f7}

#header{margin-top:10px}

#header,#container{width:auto;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}

.snb,#content{margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}

#content{height:200px}

#footer{width:auto;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}

</style>

</head>


<body>


<div id="wrap">

    <p>#wrap</p>

    


    <div id="header">

        <p>#header</p>

    </div>



    <div id="container">

        <p>#container</p>


        <div class="snb">

            <p>.snb</p>

        </div>


        <div id="content">

            <p>#content</p>

        </div>


</div>


    <div id="footer">

        <p>#footer</p>

    </div>


</div>


</body>

</html>



저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

강제 렌더링  (0) 2014.01.09
object, 플래시 삽입시  (0) 2012.12.14
iframe  (0) 2012.12.13
form 컨트롤  (0) 2012.12.13
테이블 표준  (0) 2012.12.11

쿼크모드로 변경되는 이유.

① dtd 선언이 안되어 있을 때
② dtd 선언된 것 위에 어떤 소스가 들어가 있을 때 (즉, 아무 소스도 없어야 한다.)

 

[참고]

무조건 해당 IE버전으로 보여준다.

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


IE9를 최신으로 하되 실패시 IE5모드로 전환
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>


최신버전으로 랜더링하라

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

 

크롬이 설치되어있다면 IE 에서도 크롬 렌더링을 사용하라

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

[출처] 웹브라우저 문서모드|작성자 디자인루


저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

가변 레이아웃  (0) 2014.05.19
object, 플래시 삽입시  (0) 2012.12.14
iframe  (0) 2012.12.13
form 컨트롤  (0) 2012.12.13
테이블 표준  (0) 2012.12.11
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100%" height="72">
<param name="movie" value="1280_72.swf" />
<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<embed src="1280_72.swf" quality="high" pluginspage="" type="application/x-shockwave-flash" width="100%" height="72"  wmode="transparent"></embed>
<!--<![endif]-->
</object>

# wmode : opaque(플래쉬를 최상위로), transparent, Window  

# 참고 :

  1. window : flash movie 를 맨 위에 놓는다. 레이어보다 상위에 위치하게됨. (기본값)
  2. opaque : flash movie 아래에 위치한 모든 것을 가리지만, 레이어를 상위에 표시할 수 있다.
  3. transparent : flash movie 의 flash 속성으로 설정한 background color 를 투명하게 처리하여 뒤에 html 이 표시되게 하며, layer 역시 표시될 수 있다. 이 속성의 경우 플래쉬 애니메이션의 fps 가 떨어질 수 있으므로, 상황에 맞게 사용하여야 한다.
     


플래시 소리관련 태그
<param name="volume" value="50">
<param name="mute" value="0"> 

<param name="LOOP" value="false" /> : 반복여부 설정



flv플레이어 object 
http://stream.xmoov.com/examples/xmoovstream-video-player/

<div class="embedded"><object type="application/x-shockwave-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="670" height="377">
<param name="movie" value="http://stream.xmoov.com/embed/video/flv/xmoovstream"/>
<param name="allowfullscreen" value="true"/>
<embed src="http://stream.xmoov.com/embed/video/flv/xmoovstream" type="application/x-shockwave-flash" width="670" height="377" allowfullscreen="true"></embed>
</object></div> 
저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

가변 레이아웃  (0) 2014.05.19
강제 렌더링  (0) 2014.01.09
iframe  (0) 2012.12.13
form 컨트롤  (0) 2012.12.13
테이블 표준  (0) 2012.12.11

[iframe]

Transitional DTD에서만 사용가능함.

 

<iframe src="aaa.html" id="news" name="news" frameborder="0" width="350" height="200"

 scrolling="auto" title="게임뉴스">

<p>프레임이 표시되지 않는 분은 <a href="go.html">xx게임 바로가기</a>를 클릭해주세요.</p>

</iframe>

 

# iframe이 지원되지 않는 환경을 고려하여 대체콘텐츠를 입력.

   title속서에 iframe 콘텐츠 내용을 잘 나타낼 수 있는 내용으로 넣기.

 

 

저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

강제 렌더링  (0) 2014.01.09
object, 플래시 삽입시  (0) 2012.12.14
form 컨트롤  (0) 2012.12.13
테이블 표준  (0) 2012.12.11
DTD 정의 및 선언  (0) 2012.12.11

[ex1] form, fieldset, legent, label

 

<form action="write_ok.asp" method="post">

  <fieldset>   : 컨트롤 요소 주변에 테두리 생김

<legend>필수 입력 사항</legend>   : 폼 요소의 제목. 스크린 리더기 접근성과 연관되니 꼭 써주기!!

<p><label for="userid">아이디</label> <input type="text" id="userid" /></p>

<p><label for="pwd">비밀번호</label> <input type="text" id="pwd" /></p>

  </fieldset> 

</form>

 

# label : input 의 id값과 일치하게 label for 값을 지정. 명시적 label 방법.

 

 

[ex2] label

 

 

<tr>

  <th scope="row"><label for="cellno">휴대폰</label></th>

  <td>

<input type="text" name="cellno" id="cellno" maxlength="3" size="3"  title="휴대폰 첫째자리" />

-

<input type="text" name="cellno2" maxlength="4" size="4" title="휴대폰 중간자리" />

-

<input type="text" name="cellno3" maxlength="4" size="4" title="휴대폰 끝자리" />

  </td>

</tr>

 

# label : 휴대폰번호 처럼 input이 여러개일때.

첫번째 input에다만 id값을 연결하고, 나머지엔 title만으로 대체 설명 입력.            

 

 

[ex3] radio 선택

 

<tr>

  <th scope="row">메일링 리스트 가입</th>

  <td><input type="radio" id="yes" value="Y" checked="checked" title="메일링 리스트 가입여부" />

        <label for="yes">예</label>

   <input type="radio" id="no" value="N" title="메일링 리스트 가입여부" />

         <label for="no">아니오</label>

  </td>

</tr>

 

# 스크린리더 사용자가 라디오버튼에 접근시, "예" 만 나오게하기보단

   title을 주면 메일링 리스트 가이여부에 대한 "예"를 연결지어 제공할 수 있음.

 

 

[ex4] select, 그룹화

 

<p>

  <label for="age">연령</label>

  <select id="age">

<option value="10">10대</option>

<option value="20">20대</option>

<option value="30">30대</option>

  </select>

</p>

 

# <select id="age" size="10" multiple="multiple"> 로  size를 1 이상으로 지정하면

   리스트박스 형태로 보여짐.

 

<p>

   <label for="addr">주소</label>

   <select id="addr">

<optgroup label="서울특별시">

<option value="gangnam">강남구</option>

<option value="songpa">송파구</option>

</optgroup>

<optgroup label="경기도">

<option value="anyang">안양시</option>

<option value="seoungnam">성남시</option>

</optgroup>

   </select>

 

# option을 그룹화하여 그 하위목록으로 구현할 경우. label 값으로 상위그룹 지정.

</p>

 

 

[ex5] textarea

 

<p>

  <label for="memo">메모</label>

  <textarea cols="50" rows="10" id="memo" name="memo">의견 남겨주세요</textarea> 

</p>

저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

object, 플래시 삽입시  (0) 2012.12.14
iframe  (0) 2012.12.13
테이블 표준  (0) 2012.12.11
DTD 정의 및 선언  (0) 2012.12.11
메일코딩 tip  (0) 2012.04.19

<table rules="groups" summary="교육센터의 교육과정명, 교육비, 정원 등의 자료">

-> rules="groups" 열을 그룹화한 영역에 테두리 지정할경우.

-> summary 테이블 필드의 항목 소개


<caption>교육과정</caption> -> 테이블의 내용을 대표할 수 있는 제목


<colgroup span="2">
  <col id="curriculum" />
  <col id="cost" />
</colgroup>

<col id="limit" />

->교육과정, 교육비는 논리적으로 그룹화


<thead>
<tr>

  <th scope="col">교육과정</th>

  <th scope="col">교육비</th>

  <th scope="col">정원</th>

</tr>
</thead>

 

<tfoot>
<tr>

  <td>평균교육비</td>

  <td colspan="2">700,000</td>

</tr>
</tfoot>

-> 헤더, 푸터는 테이블에서 한번만 사용.

-> 선언순서는 thead, tfoot, tbody 순서임.

-> thead 다음에 tfoot이 위치하여 시각장애인이 순차적으로 모든 테이터를 읽지않아도 먼저 알수있음.


<tbody>
<tr>

  <th scope="row">웹 접근성 향상 전략</th>

  <td>600,000</td>

  <td>20명</td>

</tr>

<tr>

<th scope="row">웹 접근성 향상 전략2</th>

<td>700,000</td>

<td>30명</td>

</tr>

<tr>

<th scope="row">웹 접근성 향상 전략3</th>

<td>800,000</td>

<td>22명</td>

</tr>
</tbody>

 

-> scope 로 영 제목, 행 제목을 지정하면 음성브라우저 접근후 읽어줄때 순서가

교육과정 : 웹접근성 향상전략 => 교육비 : 600,000 => 정원 : 20명... 의 순이다.


</table>

저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

iframe  (0) 2012.12.13
form 컨트롤  (0) 2012.12.13
DTD 정의 및 선언  (0) 2012.12.11
메일코딩 tip  (0) 2012.04.19
페이징 테스트  (0) 2012.02.17

HTML 4.01

 

Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

1999년 12월 24일 확정 규격.

권장하지 않는 element, attribute, frame 사용불가,

엘리먼트 배치가 엄격함,

일부tag가 적용안됨,

새창띄우기 적용안됨(target=_blank),

가장 이상적인 문서작성시 사용.

 

Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

가장 최근의 CSS 규격을 따름.

엘리먼트 배치가 자유로움,

스크롤링 레이어 같은건 사용불가능,

position, display 속성과 구현 방법의 차이가 상이,

frame 사용 불가능

 

Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" http://www.w3.org/TR/html4/frameset.dtd>

 

 

XHTML 1.0

 

Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 


XHTML 1.1 [XHTML 1.1은 무조건 Strict]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


XHTML 모바일 1.0
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

form 컨트롤  (0) 2012.12.13
테이블 표준  (0) 2012.12.11
메일코딩 tip  (0) 2012.04.19
페이징 테스트  (0) 2012.02.17
IE8 강제렌더링  (0) 2012.02.16

- table, tr, td 사용


- 배경 넣을때.. <td background="..."> 로 직접 스타일 지정


- 텍스트가 메일서버마다 모두 다르니 font-family 써주기

- line-height 도 초기화로 선언하기


- valign="top" 사용가능


- <table cellspadding="0" cellspacing="0"> 

   style="border-collapse:collapse;"


저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

테이블 표준  (0) 2012.12.11
DTD 정의 및 선언  (0) 2012.12.11
페이징 테스트  (0) 2012.02.17
IE8 강제렌더링  (0) 2012.02.16
ol 의 li 순서  (0) 2012.02.16
<div id="page">
<p class="pg"><a href="#"><img src="../images/page_left.gif" alt="" />이전</a></p>
<p><span>1</span> | <a href="#">2</a> | <a href="#">3</a> | <a href="#">4</a> | <a href="#">5</a> | <a href="#">6</a> | <a href="#">7</a> | <a href="#">8</a> | <a href="#">9</a> | <a href="#">10</a></p>
<p class="pg"><a href="#">다음<img src="../images/page_right.gif" alt="" /></a></p>
</div>

<div id="search">
<p>
<select class="selbox">
<option>제목</option>
<option>내용</option>
<option>작성자</option>
</select>
</p>
<p><input type="text" class="txtbox2 htxt"  /></p>
<p><input type="image" src="../images/btn_bbs_search.jpg" alt="" /></p>
</div>


/* paging, search */
#page { padding:25px 0 20px 205px; font-size:11px; }
#page:after {content:" "; display:block; clear:both;}
#page a { color:#808080; padding:0 2px; }
#page p { float:left; }
#page span { color:#ebebeb; font-weight:bold; }
#page p.pg { width:50px;  vertical-align:middle; text-align:center; }


#search { padding:0 0 45px 210px; font-size:12px; color:#1c1c1c; }
#search:after {content:" "; display:block; clear:both;}
#search p { float:left; }
#search .htxt { width:145px; margin-right:4px; }
저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

DTD 정의 및 선언  (0) 2012.12.11
메일코딩 tip  (0) 2012.04.19
IE8 강제렌더링  (0) 2012.02.16
ol 의 li 순서  (0) 2012.02.16
라디오버튼 그룹핑  (0) 2012.02.16
head 태그 바로 아래
(ms권장. style 이나 script 태그아래 두면 동작하지 않는다.) 

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

tip. IE9 안먹을때 쓰기
저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

메일코딩 tip  (0) 2012.04.19
페이징 테스트  (0) 2012.02.17
ol 의 li 순서  (0) 2012.02.16
라디오버튼 그룹핑  (0) 2012.02.16
링크에 점선 없애기  (0) 2012.02.16
  <ol>
<li> aaaaaaaa</li>
<li> b</li>
<li> cccc</li>
<li> ddd</li>
<li> eeeee</li>
  </ol>

   <ol start="7">
<li> aaaaaaaa</li>
<li> x</li>
<li> cccc</li>
<li> ddd</li>
<li> eeeee</li>
  </ol>

1. aaaaaaaa
2. b
3. cccc
4. ddd
5. eeeee

7. aaaaaaaaa
8. x
9. cccc
10. ddd
11.  eeeee
저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

페이징 테스트  (0) 2012.02.17
IE8 강제렌더링  (0) 2012.02.16
라디오버튼 그룹핑  (0) 2012.02.16
링크에 점선 없애기  (0) 2012.02.16
호환성 감추기  (0) 2012.02.16
<input type="radio" name="group1" checked />
<input type="radio" name="group1" />
<input type="radio" name="group1" />

<input type="radio" name="group2" checked />
<input type="radio" name="group2" />
저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

IE8 강제렌더링  (0) 2012.02.16
ol 의 li 순서  (0) 2012.02.16
링크에 점선 없애기  (0) 2012.02.16
호환성 감추기  (0) 2012.02.16
IE 주석  (0) 2012.02.16
<a href="page1.htm" onfocus='this.blur()">페이지1</a>
<a href="big_img.htm" onfocus='this.blur()"><img src="img1.gif"></a>
저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

ol 의 li 순서  (0) 2012.02.16
라디오버튼 그룹핑  (0) 2012.02.16
호환성 감추기  (0) 2012.02.16
IE 주석  (0) 2012.02.16
체크박스 레이블  (0) 2012.02.16
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 삽입 
저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

라디오버튼 그룹핑  (0) 2012.02.16
링크에 점선 없애기  (0) 2012.02.16
IE 주석  (0) 2012.02.16
체크박스 레이블  (0) 2012.02.16
크롬 프레임 권고창  (0) 2012.02.16
모든 IE 에서만 
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]--> 

IE6 에서만 
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->

IE7 에서만 
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->

IE7 보다 낮은 버전에서만 (7 제외. less than)
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="a.css" /><![endif]--> 

IE7 보다 낮은 버전에서만 (7 포함 less than or equal)
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="a.css" /><![endif]-->  

IE7 보다 높은 버전에서만 (7 제외. greater than)
<!--[if gt IE 7]><link rel="stylesheet" type="text/css" href="a.css" /><![endif]-->  

IE7 보다 높은 버전에서만 (7 포함. greater than or equal)
<!--[if gte IE 7]><link rel="stylesheet" type="text/css" href="a.css" /><![endif]-->  

IE 아닌 브라우저만 
<!--[if !IE]><link rel="stylesheet" type="text/css" href="a.css" /><![endif]-->  

저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

링크에 점선 없애기  (0) 2012.02.16
호환성 감추기  (0) 2012.02.16
체크박스 레이블  (0) 2012.02.16
크롬 프레임 권고창  (0) 2012.02.16
텍스트 -> html 컨버팅  (0) 2012.02.16
텍스트 클릭해도 체크박스 동작

<input type="checkbox" class="" id="xx" /> <label for="xx" style="cursor:pointer;">
약관에 동의합니다.
</label>
저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

호환성 감추기  (0) 2012.02.16
IE 주석  (0) 2012.02.16
크롬 프레임 권고창  (0) 2012.02.16
텍스트 -> html 컨버팅  (0) 2012.02.16
파일첨부 이미지버튼  (0) 2012.02.16
IE6 사용자에게 크롬 설치하라고 권고하는 창 띄우기

<head> 태그 아래에 삽입
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>

 
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
     chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
  <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
  <script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
<![endif]-->
</body> 태그 닫기 전에 삽입
저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

IE 주석  (0) 2012.02.16
체크박스 레이블  (0) 2012.02.16
텍스트 -> html 컨버팅  (0) 2012.02.16
파일첨부 이미지버튼  (0) 2012.02.16
이미지맵  (0) 2012.02.16
약관이나.. 긴 글을 html로 교체시 유용

http://www.textfixer.com/html/convert-text-html.php
http://website101.com/cgi-bin/t2h/Mt2h.cgi
저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

체크박스 레이블  (0) 2012.02.16
크롬 프레임 권고창  (0) 2012.02.16
파일첨부 이미지버튼  (0) 2012.02.16
이미지맵  (0) 2012.02.16
xhtml 웹접근성 페이지 예  (0) 2012.02.16
<style type="text/css">
.file_input_textbox { float: left }
.file_input_div { position: relative; width: 100px; height: 23px; overflow: hidden; }
.file_input_button { width: 100px; position: absolute; top: 0px;background-color: #33BB00;
color: #FFFFFF;border-style: solid; }
.file_input_hidden { font-size: 45px; position: absolute; right: 0px; top: 0px; opacity: 0; 
    filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0; -moz-opacity: 0; }
</style>



<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
 
<div class="file_input_div">
  <input type="button" value="Search files" class="file_input_button" />
  <input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
</div>
저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

크롬 프레임 권고창  (0) 2012.02.16
텍스트 -> html 컨버팅  (0) 2012.02.16
이미지맵  (0) 2012.02.16
xhtml 웹접근성 페이지 예  (0) 2012.02.16
메타태그  (0) 2012.02.16
<img src="images/footer.gif" border="0" usemap="#Map3" />

<map name="Map3">
<area shape="rect" coords="81,19,230,79" href="#" target="_blank" />
</map>


원형 일때 shape="circle"
<area shape="circle" coords="70,61,55" href="#" /> 원 중심 가로좌표, 세로좌표, 반지름 
저작자표시 비영리 변경금지 (새창열림)

'xhtml' 카테고리의 다른 글

크롬 프레임 권고창  (0) 2012.02.16
텍스트 -> html 컨버팅  (0) 2012.02.16
파일첨부 이미지버튼  (0) 2012.02.16
xhtml 웹접근성 페이지 예  (0) 2012.02.16
메타태그  (0) 2012.02.16

+ Recent posts

티스토리툴바