웹표준 (XHTML + CSS)
description
Transcript of 웹표준 (XHTML + CSS)
㈜유미테크
웹 표준 (XHTML + CSS)
㈜유미테크2 ㈜유미테크 웹 표준 (XHTML + CSS)
웹 표준이란 : 웹에서 표준적으로 사용하는 기술의 총칭 .
어떠한 브라우저 환경에서도 같은 결과가 나타나도록 함
W3C ( 월드와이드웹 컨소시엄 : www. W3.org / Consortium)
- 1994 년 10 월 설립- 400 개 이상의 기업 / 기관이 회원 가입- 국제적 웹 표준 기관
웹표준 역할 분리- 구조 (HTML, XHTML) : 요소 생성 및 기본 구조 작성
- 표현 (CSS) : 레이아웃 및 스타일 적용- 동작 (DOM, Script) : 동적인 이벤트 처리 , jQuery 와 같은 라이브러를 활용한 이벤트 핸들러
분리
1. 웹 표준이란 ?
㈜유미테크3 ㈜유미테크 웹 표준 (XHTML + CSS)
컨텐츠와 디자인을 분리 : 수정과 관리가 용이
마크업 용량이 줄어듬
페이지 로딩속도 향상
크로스 브라우징 : 여러 웹 브라우저에서 동일한 페이지 표현
검색엔진의 최적화 ( 플래시 x, 이미지 자제 , 이미지 대체 글자 제공 )
웹 접근성 용이 : 웹표준 문서는 최대한 많은 브라우저와 장치에서 읽을 수 있다 .
2. 웹 표준의 장점
㈜유미테크4 ㈜유미테크 웹 표준 (XHTML + CSS)
W3C Validation
- http://validator.kldp.org/
- http://validator.w3.org/
3. 웹 표준 테스트 툴
㈜유미테크5 ㈜유미테크 웹 표준 (XHTML + CSS)
웹 접근성- 어떠한 사용자 ( 장애인 , 고령자 포함 ), 어떠한 기술 환경에서도 전문적인 능력 없이 웹
사이트에 모든 정보에 동등하게 접근 . 이용할 수 있도록 보장해 주는 것- 2008 년 4 월 11 월부터 웹접근성 의무화 준수
웹 접근성 품질마크- 웹 접근성 수준을 인정하는 품질마크를 부여하는 인증제도- 인증기관 : 한국정보화진흥원- 수수료 : 인증심사 : 2,000,000 ( 공공기관 , 비영리장애인민간 단체 : 1,000,000)
갱신 , 재심사 : 800,000 ( 공공기관 , 비영리장애인 민간단체 : 400,000)
4. 웹 접근성
㈜유미테크6 ㈜유미테크 웹 표준 (XHTML + CSS)
5. 구조적 마크업
div id=“header”
div id=“side bar”
div id=“content”
div id=“footer”
div class=“main”
div class=“banner”
div class=“main_con”
.
.
.
.
.
.
.
.
.
㈜유미테크7 ㈜유미테크 웹 표준 (XHTML + CSS)
table 의 태그의 오남용- table 태그는 표에만 사용 , 레이아웃 작업 시 빈번한 사용 자제
font, b, I
- 글자에 대한 각종 효과는 css 로 처리
link 에 대한 자바스크립트로의 처리- <a href=“javascript:func1()”> <a href=“b.html” onclick=”” />
폼 전송 기능은 자바스크립트로 전송- 전송기능은 반드시 type=“submit” 또는 type=“image” 이용
6. 마크업 주의점
㈜유미테크8 ㈜유미테크 웹 표준 (XHTML + CSS)
7. css 사용법
외부 스타일 시트 – link 방법 (External Style Sheet)<head>
<link rel=“stylesheet” type=“test/css” href=“sytle.css” />
</head>
내부 스타일 시트 – head 에 정의하는 방법 (Internal Style Sheet)<head>
<style type=“text/css”>
body { margin:0; padding:0}
p {color : red;}
</style>
</head>
HTML 태그내에 스타일 지정 (lnline Sytle) <p style=“color:red;”> 이 문단의 색은 빨강입니다 . </p>
우선순위 : lnline > Internal > External
㈜유미테크9 ㈜유미테크 웹 표준 (XHTML + CSS)
8. div, p, span 차이점 (block-Level Element 공간 분할 태그 )
<div> <p> : 넓이를 브라우저의 “ 100%” 로 인식 (block-level)
난 div 초록라인입니다 .
<span> : 고유 영역이 없이 내용의 양에 따라 길이가 결정 (inline-level)
난 span 입니다 .
난 span 레드 난 span 태그 블루입니다 .
난 div 블루라인입니다 .
<div style=“background : #92d050”> 난 div 초록라인입니다 .</div><div style=“background : #8eb4e3”> 난 div 블루라인입니다 .</div>
<span style=“background : #ffc000”> 난 span 입니다 .</span><span style=“background : #e46c0a”> 난 span 레드 </span ><span style=“background : #00b0f0”> 난 span 태그 블루입니다 .</span >
※ div, p 는 넓이와 높이를 인식하지만 , span 은 인식하지 못함 ※ div, p 는 줄바꿈이 생기지만 , span 은 줄이 바뀌지 않음
※ 만약 span 에 상하공간을 주고 싶을때는 ‘ display:block’ 속성을 사용 ※ div 는 레이아웃을 지정할때 사용 !!, span 은 특정부분에 스타일 줄때 사용 !!
㈜유미테크10 ㈜유미테크 웹 표준 (XHTML + CSS)
전체가 1000px
200px 700px
※ 결과 : div 에 각각 float 을 사용하면 한줄에 div 가 표시됨 ※ float 는 center 가 없슴
9. Float 속성 ( 현재행의 왼쪽이나 오른쪽으로 밀어내는 박스 )
float : 크게 left 와 right (display 가 block 속성일때만 가능 !!, inline 은 안됨 )
전체가 1000px
200px
700px
float:left
※ 결과 : div 로 각각 200px 와 800px 를 연달아 사용하면 밑으로 붙음
float:right
㈜유미테크11 ㈜유미테크 웹 표준 (XHTML + CSS)
10. clear
clear : float 설정을 초기화 {clear:both;}
전체가 1000px
200px 600px
※ 결과 : float:left 로 연달아 사용하면 옆으로 쭉 ~ 붙음 .
No clear
전체가 1000px
200px 600px
clear:both;
※ 결과 : clear:both; 를 선언하면 그전에 both 의 속성을 무시하고 밑으로 붙음 .
㈜유미테크12 ㈜유미테크 웹 표준 (XHTML + CSS)
11. 박스모델 (box model)
margin : 경계선밖에서 최종경계선까지의 여백 border : 경계선 padding : 컨텐츠와 경계선 사이의 여백
Content
padding
border
margin
표현법 ) margin : 10px; ( 상하좌우 모든 10px 의 여백을 줌 ) padding ※ 동일 margin-top: 10px, margin-left:10px, margin-right:10px, margin-bottom:10px;
margin : 10px 0px; ( 상하 10px, 좌우 0px)
margin : 10px 0px 5px ( 상 10px, 좌우 0px, 하 5px)
margin : 10px 2px 5px 6px ( 상 10px, 우 2px, 하 5px, 좌 6px;)
시계방향으로 적용됨 (top right bottom let )
border : 10px solid gray (10px 의 일자 회색 경계선 )
㈜유미테크13 ㈜유미테크 웹 표준 (XHTML + CSS)
12. id 와 class 사용법
id 의 기본 구조 -<div id=“ 아이디 이름” >
- 스타일 적용 : # 아이디이름 { 스타일입력 }
- 사용 : 동일 본문 내에서 한번만 사용할 때 씀 - 용도 : id 를 사용하여 DHTML 을 적용시 많이 씀
class 의 기본 구조 - <div class=“ 클래스 이름” >
- 스타일 적용 : . 클래스이름 { 스타일입력 }
- 사용 : 여러 번 중복사용 가능 ex) div, span, input 등에 중복 사용가능 - 용도 : 홈페이지의 일관성을 주는데 사용
<div id=“header”></div>
#header {width:100px…}
<div class=“banner”></div>
.banner {font-size:9px;}
㈜유미테크14 ㈜유미테크 웹 표준 (XHTML + CSS)
13. 텍스트 스타일
color : 텍스트 색상 ( 일부만 색상 변경시에는 span 사용 )
text-align : left, center, right ( 예 :text-align:center; 텍스트 수평정렬 )
letter-spacing : 자간설정 ( 예 : letter-spacing:10em; 글자와 글자사이의 간격 )
line-height : 행간 설정 ( 예 : line-height:140%; 글자의 높이간격 , 140% 권장 )
text-decoration : 텍스트 밑에 줄긋기 ( 예 : text-decoration:underling)
text-shadow : 텍스트 그림자효과 ( 예 : text-shadow : 5px,5px,5px gray;)
…………..
㈜유미테크15 ㈜유미테크 웹 표준 (XHTML + CSS)
14. 테이블 스타일
<table>
<tr>
<th> 이름 </th>
<th> 나이 </th>
</tr>
<tr>
<td> 홍길동 </td>
<td>20 세 </td>
</tr>
</table>
[ 행 생성( 줄 )]
[ 제목 선언 ]
[ 내용 선언 ]
㈜유미테크16 ㈜유미테크 웹 표준 (XHTML + CSS)
15. 특수문자
Character Reference
< <
> >
공백
“ "
& &
© ©
® ®
™ ™
[ 마크업 ]
<li>< 홍길동 <</li>
<li>< 임꺽정 <</li>
[ 출력 ]
. < 홍길동 >
. < 임꺽정 >