웹표준 강좌 01
<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
CSS(Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로,
HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다
. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
CSS는 지속적으로 새로운 버전이 나오고 있다. 1996년에 도입된 CSS 1은 CSS의 바탕이 되었다. CSS의 표준으로는 CSS 2.1이 있으며 이전 버전에 비하여 새로운 기능과 도구가 추가되었다. 대다수의 웹브라우저는 CSS 2.1를 잘 지원한다.(인터넷 익스플로러의 경우, 버전 7이 되면서 CSS2.1을 지원한다.) 현재 W3C에서는 CSS 3를 표준으로 만들고 있다.
Css layout의 장점
1.Table 코딩에 비해 용량 50% 절감
2.검색엔진의 접근성이 높아짐
3.유지보수가 쉬워 비용절감의 효과 (표현요소와 데이터의 분리)
01. Css 시작
<style type="text/css">
body { color: black; background: white; }
</style>
{속성:속성값;}으로 이루어진다.
02.CSS 링크 연결
여러페이지에 일관성있는 스타일 시트를 적용하고자 할 때 외부 css를 공통으로 사용합니다.
<link type="text/css" rel="stylesheet" href="style.css">
03.Css comments (주석)
/* 이렇게 주석을 달면 되지요 */
04. 링크
a:link { color: #000000; } /* for unvisited links */
a:visited { color: #000000 } /* for visited links */
a:active { color: #444444) } /* when link is clicked */
a:hover { color: #555555) } /* when mouse is over link */
05. id, class
#center {text-align:center;}
.green{color:green;}
<span id=”center”></span>
<span class=”green” id=”center”><span>
여기서 id는 한번만 호출하여 쓰고 class는 여러 번 호출하여 사용한다
즉 id는 레이아웃을 잡을 때 사용
Class는 색과 크기등 을 잡을 때 사용한다.
06.공간구분
<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />
07. block 과 inline
html 이나 xhtml 의 tag들은 block level element와 inline level element로 나누어진다.
줄바꿈으로 구분할 수 있다.<br/>제외
block level element는 <div><h1~6>, <p>,<ul>,<ol>,<il>
inline level element는 <br/>, <img/>, <span>
08. double side element 와 single side element
double side element 는 처음과 끝을 표하는 <p></p>형식이고
single side element 는 하나의 element 로 이루어진다. <img src=”주소”/>
기존에는 single side element 는 “/” 를 사용하지 않았지만 웹표준을 지키고자 한다면 />을 지켜주어야한다.
웹표준 강좌 02 _List
시작전 (Doctype) <?xml:namespace prefix = o />
DOCument TYPE Declaration (문서 형식 선언)
“본문서가 어떤형식에 의해 만들어졌다” 라는 선언을 말한다.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”
”http://www.w3.org/TR/HTML4/loos.dtd”>
:"이 문서는 HTML 문서로 국제적이며 W3C라는 ISO비공인인증기관 에서 HTML DTD 4.0을 기준으로 Transitional방식으로 영어 공용어로 출력한다."
<!DOCTYPE 최상위엘리먼트네임 (국제적,공용||내부적,제한용) "(ISO공인인증기관 || ISO비공인인증기관)//기관명//DTD type //인코딩언어(ISO)" "DTD 주소">
----------------------------------------------------------------------------------------------------------
HTML 4.01 호환모드
코드:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
가장 최근의 CSS 규격을 따름. 엘리먼트 배치가 자유로움, 스크롤링 레이어 같은건 사용불가능, position, display 속성과 구현 방법의 차이가 상이, frame 사용 불가능
HTML 4.01 엄격모드
코드:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
1999년 12월 24일 확정 규격. 권장하지 않는 element, attribute, frame 사용불가, 엘리먼트 배치가 엄격함, 일부태그가 완전히 먹통, 가장 이상적인 문서작성시 사용.
XHTML 1.0 호환모드
코드:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1999년 12월 24일 확정된 프레임문서. frameset이 사용가능. 하지만 넷스케이프.. FF(파이어폭스)쪽의 frame은 전혀 작동 되지 않음
XHTML 1.0 엄격모드
코드:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
----------------------------------------------------------------------------------------------------------
영문 <meta http-equiv="Content-Type" c"text/html; charset=ISO-8859-1" />
한글 <meta http-equiv="Content-Type" c"text/html; charset=euc-kr" />
일어 <meta http-equiv="Content-Type" c"text/html; charset=shift_JIS" />
모든언어 <meta http-equiv="Content-Type" c"text/html; charset=UTF-8" />
유니코드(전 세계의 문자들을 표시하기 위한 표준 코드)16진수문자로 한글등 특수문자깨짐
- 1. DOCTYPE 선언 :웹문서의 준수해야할 기준선언
- 2. HTML문서선언
- 3. HEAD
- 타이틀
- META
- STYLE
- SCRIPT
- 4. BODY (웹문서)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" c"text/html; charset=euc-kr" />
<title> </title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
01.리스트 < 들여쓰기 / 순서형, 비순서형>
<li>공혜림</li>
<li>공병주</li>
>>
l 개나리 꽃이 피었습니다.
l 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다.
무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다.
무궁화 꽃이 피었습니다.
<ul>
<li>공혜림</li>
<li>공병주</li>
</ul>
>>
l 개나리
l 무궁화
<ol>
<li>개나리</li>
<li>무궁화</li>
</ol>
>>
- 1. 개나리
- 2. 무궁화
02. 어떠한 용어정리나 제목 내용으로 표현하기위한 표현
<p>정의형 문서</p>
<ol>
<dt>소주</dt>
<dd>강희가 못먹는것</dd>
<dt>맥주</dt>
<dd>강희가 좋아하는것</dd>
</ol>
>> 자동들여쓰기
정의형문서
소주
강희가 못먹는것
맥주
강희가 좋아하는 것
<p>정의형 문서</p>
<ol>
<li>html</li>
<p>하이퍼 텍스트 마크업 렝귀지</p>
<li>css</li>
<p>캐스캐이딩 스타일 시트</p>
</ol>
>> 단어와 같이시작
정의형문서
- 1. Html
하이퍼 텍스트 마크업 랭귀지
- 2. Css
캐스캐이딩 스타일 시트
##### 변형
Ul { list-style:none; } 블릿이 사라짐
Ul { list-style:none; padding-left:0;} 블릿이 사라지고 들여쓰기 삭제
Ul {list-style-image:url(images/dot.gif);} 블릿을 이미지로 바꿈
Ul {list-style:none;}
Li {background:url(dot.gif) no-repect 0 6px; padding-left:17px;}
블릿은 삭제 li 백그라운드이미지를 left 0px 위에서 6px 에서 시작하여 깔고 한번만
글자는 left에서 17px떨어져서 시작하라
03. h1~h6
<h>테그를 사용하는이유
<h1> ~<h6> 까지 있으며 타이틀을 나타낼 때 쓴다. 32px, 24px, 18px, 16px, 13px, 10px
기존방식은 <B></B> <span></span> 으로 css를 사용하였으나 2.0에서는 지양한다.
- 1. 검색엔진은 <B></B> <span></span>를 본문으로 인식한다.
- 2. Css를 적용하지 못하는 브라우져에서는 타이틀과 본문을 구분할수없다.
- 3. 텍스트에 의미를 부여한다.
- 4. 시각 음성 브라우저가 모두 머리글로 인식한다.
- 5. css적용이 쉽다.
[출처] 웹표준강좌02 (유컴패니온)
웹표준 강좌 03 _Table
01. 웹표준에 가장큰 오해 테이블을 쓰면 안된다
Table이 적합한 경우<?xml:namespace prefix = o />
- 달력
- 스프레드시트 ( 일상 업무에 많이 발생하는 도표 형태의 양식 )
- 차트
- 스케줄
Ex>>>>>>>
<table summary="테이블의 내용 요약정보(이벤트 작업 리스트 정리하였습니다..)" width="500" height="300" >
<caption> 테이블의 목적(이벤트 리스트)<caption>
<thead>
<tr>
<th id="year">연도</th>
<th id="opp">상대팀</th>
<th id="record" abbr="성적">시즌 성적</th>
</tr>
</thead>
<tfoot>
<tr>
<td headers="year">2006</td>
<td headers="opp">시카고</td>
<td headers="record">90-58</td>
</tr>
</tfoot>
<tbody>
<tr>
<td headers="year">2007</td>
<td headers="opp">필라델피아</td>
<td headers="record">75-57</td>
</tr>
<tr>
<td headers="year">2008</td>
<td headers="opp">브루클린</td>
<td headers="record">75-57</td>
</tr>
</tbody>
</table>
<th> 테이블 해더 ? 테이블 항목을 한꺼번에 지정(자동가운데정열,독립id부여)
Summary - 내용, caption ? 목적 abbr ? 항목인식( 브라우져 이외의 경우)
<thead> 해더 기능
<tfoot> 자동 푸터역활
<tbody> 내용부분만 한꺼번에 정리가능
table{border-top:1px solid #3366ff;border-left:1px solid #3366ff; font-size:12px; }
tbody{background-color: #f3f3f3;}
td, th {border-right:1px solid #888888;border-bottom:1px solid #888888;}
<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" /><?xml:namespace prefix = v /><?xml:namespace prefix = v /><?xml:namespace prefix = v />
border-collapse:collapse; 자동테두리
#year , #opp, #record , caption
[출처] 웹표준강좌03 (유컴패니온)
웹표준 강좌 04_인용문<?xml:namespace prefix = o />
01.인용문
// 부적절한경우
<div class="quotation">
<p>"부적절한 인용문"</p>
<p>— 사람이름 </p>
</div>
// 인용문 코딩
<blockquote>
<p>"인용문을 정리할 경우"</p>
<p>— 사람이름</p>
</blockquote>
<blockquote> 는 자동들여쓰기로 오인하지 말 것
W3C에서 목적을 위해 고안, css규칙만으로 적용하면 되므로 인용문에 스타일 입히기 쉬움
모든브라우져에서 일반텍스트와 구분
Cite : 해당컨텐츠에 대한 정보를 좀더 자세히 알수있도록출저청보를 밝힘
<blockquote cite=”http//www……………………”>
<p>"인용문을 정리할 경우"</p>
<p>— 사람이름</p>
</blockquote>
인라인 인용문 : 따움표처리
아빠가 말씀하셨습니다. <q>라면사라와</q> 아들이 말햇습니다.<q>잔돈은<q>하하하</q> 내꺼</q>
익스) 아빠가 말씀하셨습니다. 라면사라와 아들이 말햇습니다.잔돈은하하하 내꺼
파폭) 아빠가 말씀하셨습니다. “라면사라와” 아들이 말햇습니다.”잔돈은’하하하’ 내꺼”
<blockquote cite=http://www.0000.00.00>
<p id=”quote”> 너자신을 알라 <strong>너자신을 알라</strong> 너자신을 알라 너자신을 알라 </p>
<p id=”author”>—소크라테스</p>
</blockquote>
[출처] 웹표준강좌04 (유컴패니온)
웹표준 강좌 05 _ form<?xml:namespace prefix = o />
기본 테이블방식은 많은 style로 지저분해질 수 있음
A.
<form id="thisform" method="post">
<p><label for="name">이름 :</label><br />
<input type="text" id="name" name="name"></p>
<p><label for="email">이메일 :</label><br />
<input type="text" id="email" name="email"></p>
<p><input type="checkbox" id="remember" name="remember"><label for="remember">내정보 기억하기</label></p>
<p><input type="submit" value="확인"></p>
</form>
마크업이 단순해 작은화면장비 유리
레이블과 컨트롤 길이가 달라도 정렬가능
접근성 좋음
B.
<form id="thisform" method="post">
<dl>
<dt><label for="name">이름 :</label></dt>
<dd><input type="text" id="name" name="name"></dd>
<dt ><label for="email">이메일 :</label></dt>
<dd><input type="text" id="email" name="email"></dd>
<dt><label for="remember">내정보 기억하기</label></dt>
<dd><input type="checkbox" id="remember" name="remember"></dd>
<dt><input type="submit" value="확인"></dt>
</dl>
</form>
작은화면장비 유리, 접근성, ccs컨트롤가능
<label>
For 속성에 id를 일치하는 값을지정
폼레이블을 마크업하기위한 방법 스크린리더프로그램에서 폼컨트롤 레이블을 읽어들임
<tabindex> 텝키를 이용해 입력폼순서이동 키보드만으로 내비게이션가능
<input tabindex=”1”>
<input tabindex=”2”>
<input tabindex=”3”>
<accesskey> Alt , Ctrl, Commend 키를사용
<label for=name accesskey=”9”>
모든브라우저에서 지원하지 않음
<form id="thisform" method="post">
<fieldset>
<legend>로그인 하기 </legend>
</fieldset>
</form>
<fieldset> 폼스타일 자동테두리
<legend> 폼 타이틀
[출처] 웹표준강좌05 (유컴패니온)
웹표준 강좌 06_ 문서구조<?xml:namespace prefix = o />
<b> 대신 <storong>, <i>대신<em>
<em> : 강조 (emphasis)
<strong> : 강한강조 (stronger emphasis)
특정단어나 문구의강조 음성합성기에서 톤 속도 높이를 다르게 읽음
(단지 디자인을 꾸미기위한 이텔릭과 볼드는 class 나 span 으로 처리하는 것이 옳음)
문구 엘리먼트
<cite>: 인용문이나 참조한 문서의 출처
//
<dfn> : 용어묵음에 대한 정의
//
<code> : 컴퓨터 프로그래밍 코드
예제를 표시하기위한 테그로 자간과 고정폭을 지원함 브라우저 통일성지키기 위해
따로 css를 지정해줄 것
//
<samp> : 프로그램이나 스크립트의 결과샘풀
<samp>샘플결과</samp>
//
<var> : 프로그램 변수(variable)나 인수(argument)
//
<kbd> : 사용자가 입력한 텍스트(단축키)
<kbd>Alt + 8</kbd>
//
<abbr>: 약자
<abbr title=”extensible hypertext markup language”>xhtml</abbr>
엑스 에이치 티 엠 엘
<acronym> : 두문자어
<aconym> nato </aconym> 나토
Abbr { speak:spell-out;}
Acronym {speak:mormal;}
점선밑주로 나타남
Border:1px dotted; cursor: help; --- 지원하지않는 브라우저있음 따로설정
앵커테그 anchor
<a href=”#pooh”>곰돌이푸</a>
<a name=”pooh>곰돌이푸와 친구들은……</a>”
<a href=”#pooh”>곰돌이푸</a>
<form id=”pooh”>곰돌이푸와 친구들은……</form>”
지정해놓은 id값으로 지정
## top 이런거쓰지말랜다..ㅋㅋㅋㅋ
## 구버젼지원하지 않음(아직써야할지…..)
그래서 해결책은
<a href=”#pooh”>곰돌이푸</a>
<a id=”pooh” name=”pooh>곰돌이푸와 친구들은……</a>”
Id와 name를 같이쓸수있는테그정리
<a> <applet> <form> <frame> <iframe> <img> <map>
<a href=”조정아닷컴” title=”www.junga.com | 조정아게인홈페이지”>조정아닷컴</a>
[출처] 웹표준강좌06 (유컴패니온)