웹표준 xhtml, css

-웹표준

답답한 제약이 아님

지키지 않으면 웹사이트를 리뉴얼하기 위해 더 많은 비용과 시간 지출

장애인 및 여러 기기, 여러 웹브라우저 버전 및 종류에서 접근 가능해야 함

웹표준 : W3C(world wide web consortium)의 토론을 통해 나온 권고안

권고안 이외 단계 수준의 스펙은 비표준이거나 독자 확장 요소

+웹표준 관련 기술

구조 : XHTML

표현 : CSS

동작 : Script

+웹표준 기술

HTML(hypertext markup language)

오류에 느슨한 구조

SGML(standard generalizes markup language)를 모체로 하여 국제 표준 기구 ISO가 채택한 웹에서 사용하는 표준 마크업 언어

XML(eXtensible markup language)

오류에 엄격한 구조

웹에서 구조화된 문서를 전송 할 수 있도록 설계된 표준화된 텍스트 형식

HTML한계 극복, SGML의 복잡함 해결, HTML에 담겨져 있는 형식적 요소를 완전히 배제하고 순수 데이터 포맷으로 작성

XHTML(eXtensible hypertext markup language)

xml 응용으로써의 HTML4를 다시 공식화한 것

좀더 원할하게 기계적으로 처리하도록 XML의 형식을 빌어 HTML 4.01를 재정의

xml -> html4 -> xhtml 2.0 -> html5

HTML5

특정 플로그인에 의존하지 않고 콘텐츠를 제공하는 것이 목표

다양한 구조 요소를 지원

CSS(cascading style sheet)

html 3.2부터 지원하기 시작

웹 페이지의 스타일(작성 형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되어 문서 전체의 일관성을 유지하고 작업 시간을 단축 시킴

DOM(document object model), ECMA script(=java script)

DOM = 웹 페이지의 구성 체계

웹 페이지의 요소를 객체화(DOM)해서 동작(ECMA script)을 제어

DOM객체(html, css(모양, 색깔)) ▨ <- 스크립트(동적)

객체(묶어 있는 부분)

+ 웹 표준의 장점

웹 접근성 수준의 향상

검색 친화적인 웹 사이트 구현

구조와 표현의 분리

손쉬운 유지 보수 및 비용 절감 효과

호환성 확보

+웹브라우저

DOM을 해석, 페이지 표시 -> ECMA Script등의 기술을 통하여 DOM의 구조를 변경

즉, 사용자 측에서 작동하는 많은 동적 요소들이 DOM을 이용하여 객체 모델에 접근한 후, 스크립트 언어인 ECMA Script를 이용하여 웹 페이지의 요소의 동작을 제어하는 방법

+테이블 레이아웃 사용이 왜 잘못됨

불 필요하고 의미가 불 분명한 코드를 생성, 콘텐츠가 가지는 본래의 웹 의미를 훼손, 유지 보수 및 리뉴얼 작업을 어렵게 만드는 요인

+이미지 무분별하게 남발하거나 스크립트를 과도하게 사용?

특정 웹 브라우저나 기기에서만 동작하는 반쪽짜리 웹사이트로 전락할 위험

+웹에디터

1. 텍스트 기반

2. 위지윅

+웹(www : world wide web)을 위한 3가지 요소

1. 고유한 주소를 할당하는 방법

2. 링크한 정보를 전송하는 규약

3. 정보를 인코딩하는 언어

+웹브라우저 <-> 서버와의 소통

1. DNS(domain name system)서버를 통해 해당 주소(url)를 ip주소로 변환

2. 라우터를 통해 해당 ip를 검색한 후 해당 ip를 가전 서버에 연결 요청

-웹 프로그래밍

웹 프로그램

1. 클라이언트측 웹 프로그램 : 클라이언트가 요청한 파일이 서버의 우선처리없이 클라이언트의 도착한 후 웹 브라우저로 수행

2. 서버측 웹 프로그램 : 클라이언트가 요청한 파일이 서버의 우선처리(db처리)한 후 클라이언트에서 수행

클라이언트 측	서버 측
XHTML, CSS, DOM, ESMA Script, XML	asp, jsp, php

컴파일 유무

1. 컴파일

2. 비컴파일(script 포함)

사람 -----------------> 컴파일러 ---------> 컴퓨터

프로그래밍 언어 기계어

+URI, URL, URN

URI(uniform resource identifier) ⊃ URL(uniform resource locator)

URL

프로토콜, 도메인, 파일위치 등 자원의 위치를 알아야 자원을 찾을 수 있음

URN(uniform resource name)

자원의 이름만으로 자원찾음

+정적 페이지, 동적 페이지

1. 정적 페이지 : 서버가 보이는 데이터 그대로 클라이언트로 반환

2. 동적 페이지 : 요청한 페이지가 서버에서 클라이언트의 요구에 맞게 변환하여 보여짐

(서버측 웹 프로그램)

실제 1개 페이지 ----> 여러 개로 변환되어 화면에 표시(사용자, 시간, 장소에 따라)

---->

+서버측 방식

1. CGI방식

2. 어플리케이션 방식

CGI(common gateway interface)

ASP(active serve page)

CGI를 개선시킴

마이크로스프트 IIS(internet information server)서버에서 ASP라는 대화형 언어를 이용

PHP(personal homepage tools)

CGI를 개선 시킴

웹 서버에서 php라는 대화형 언어를 이용

servlet, jsp 서블릿

자바기반, 코드가 html코드와 혼재

JSP(java server pages)

자바 서블릿과 같음

html태그 사이에 자바 코드가 들어감

+웹2.0 -> 웹3.0

웹2.0 -------> 웹3.0

개인화 지능화

지능화

semantic(의미적인) web(=기계가 이해할 수 있는 웹) => 마크업의 등장

마크업(mark up : 글이나 책에 표시하는 것)

문장, 그림, 표등에 배치, 크기, 모양, 들여쓰기, 줄간격, 여백 정보가 추가하여 표시

마크업의 분류

1. 순차적 마크업 : 기본 데이터(글, 그림), 구조(문단, 줄), 표현, 시각 효과(폰트, 생삭, 여백, 줄간격)를 가짐

2. 서술적 마크업 : 기본 데이터, 구조(문단, 줄)를 가짐

순차적 마크업 : 특정 응용소프트웨어에서만 인식(예 : HTML)

서술적 마크업 : 문서 구조 <----> 표현 정보, 여러 소프트웨어에서 사용 가능, 엄격한 규칙(예 : XML)

분리

순차적 마크업 + 서술적 마크업 = XHTML

HTML XML

-XHTML문서의 기본 구조

+문서형 정의 및 선언(DTD) : 맨 첫 줄에 위치, 공백이 없어야 함

1. 엄격형(strict) - 단계적으로 사라질 표현에 관한 요소와 속성을 배제한 문서 타입

제한 요소 - center, font, iframe, strike, u

2. 호환형(transitional) - 기존에 만든 문서들과의 호환성을 유지하기 위한 중간 단계

3. 프레임형(frameset)

strict

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

transitional

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

Frameset

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

+네임 스페이스

다른 xml형식의 문서 표준을 네임 스페이스(xmlns)를 이용해서 지원 할 수 있음

+휴먼 랭귀지

xhtml 문서에 사용 언어를 선언 할 수 있음

1. 휴먼 랭귀지(human language) 명시 - html요소에서 선언 가능

2. meta요소를 이용한 선언

<head>

//문자 코드 세트 설정

//키워드 지정

"description"

"author"

"robots"

"copyright"

</head>

-XHTML

+기본태그

<div>

<p>

<br>

<em>

<dl>(용어 정의 리스트)-<dt>(제목)-<dd>(용어설명)

<hr>

<h1> 1~6

</map>

"passwd"

"file"

"hidden"

"image"

"radio"

"checkbox"

"submit"

"reset"

+텍스트 관련

<blockquote cite=""> -인용문

<q cite=""> - 인용문

<abbr title=""> - 축약어

<acronym tilte=""> - 두문자어

<ins> 추가글 예) 138,000

<del> 삭제글 예) ~~138,000~~

<sup> 첨자

<sub> 아랫첨자

+테이블

<colgroup, col> 열 그룹화 요소

<thead, tfoot, tbody> 테이블 행 그룹화 요소

<scope, id, headers> 제목 셀과 내용 셀의 연관성

<caption>요약</caption>

<colgroup span ="2">

<col id="publishing">

<col id="booktitle">

</colgroup>

<thead>

<tr>

</tr>

<tr>

<th headers = "publishing" id = "jeumedia" rowspan="2"> 제우미디어</th>

</tr>

</thead>

<tfoot>

</tfoot>

<tbody>

</tbody>

</table>

+form

<fieldset, legend> 폼 요소 그룹화 및 제목

레이블(label) - 설명 글과 input을 연결하여 묶음

명시적

암시적

다양한 폼 컨트롤

<input type = "text" name="" id=""> name과id 둘다 태그들을 구분하기 위해서 사용됨

= "password"

= "radio"

= "checkbox"

= "file"

= "image"

= "submit"

= "reset"

= "button"

= "hidden"

//목록상자(select, option, optgroup>

</select>

</optgroup>

<textarea cols="" rows="" name="" id=""> //여러 줄 글 상자

<button type="" name="" id=""> //버튼요소

+스타일

1. CSS적용

<head>

p{}

</style>

</head>

2. 스크립트 삽입

head요소와 body요소 둘다에 삽입 가능

1> 내부 삽입

<body>

//<![CDATA[

//필요한 내용

//]]>

</script>

</body>

2> 외부 삽입

<body>

</script>

</body>

+그룹화 요소

블록 요소 => <h1>, <p>, <ul>

인라인 요소 => <label> (width속성이 적용되지 않음)

블록 그룹화 요소 => <div id="" class="">

인라인 그룹화 요소 => <span id="" class="">

-CSS(cascading style sheet)

웹표준검사 - acid test

+CSS서식

선택자 { 속성 : 값;}

+CSS 적용하기

1. 외부 스타일 시트(external style sheet)

1) link

<head>

</head>

2) @import 명령

<head>

@import url("연결하려는 css파일");

</style>

</head>

@import url("연결하려는 CSS파일");

import되어질 css에서 문자 코드 세트를 첫 줄에 선언해야 함

@charset "euc-kr"

2. 내부 스타일 시트 internal style sheet

3. 인라인 스타일 시트 inline style sheet

+CSS선택자

1. type 선택자

<head>

h1 {color:red;}

</style>

</head>

2. 전체 선택자

* {margin:0; padding:0;}

3. class 선택자와 id 선택자

class : 여러 번 사용. 여러가지 요소들을 한꺼번에 선택하여 일관된 스타일을 지정할 때 사용

요소명.클래스명{속성:값;}

id : 유일한 요소에 접근하여 스타일 지정

요소명#아이디명{속성:값;}

4. 속성 선택자

요소명[속성명]

속성명

속성명 = "값"

속성명 ~= "값"

속성명 |= "값"

속성명 ^= "값"

속성명 *= "값"

5. 가상 요소와 가상 클래스

가상요소

요소명:가상요소명 {속성: 값;}

p:fist-line {color:green;}

p:first-letter {}

p:before {}

p:after {}

가상클래스

요소명:가상요소명 {속성:값;}

p:first-child {color:green}

a:link {}

a:visited {}

a:hover {}

a:active {}

a:focus {}

-선택자 조합

1. 하위 선택자(descendant selector) : 해당 선택자 아래로 다 똑같이 적용됨

선택자 선택자 {속성 : 값;}

div p {속성:값;}

div안의 p, br 둘다 적용됨

2.자식 선택자(child selector) : 해당 선택자만 적용됨

선택자 > 선택자 {속성:값;}

div > p {속성:값;}

div안의 p만 적용됨

3. 인접 형제 선택자(adjacent sibling selector) : 해당 선택자만 적용됨

선택자 + 선택자 {속성:값;}

div + p {속성:값;}

4. 선택자 그룹화

선택자, 선택자 {속성:값;}

+상속(inherit) : 상위 요소에 적용한 스타일이 하위 요소까지 이어지는 현상

css속성

1. 하위 요소로 상속되는 속성

2. 상속되지 않는 속성

+겹침(cascading)과 개별성(specificity)

겹침: 여러 가지의 스타일 중복 적용되어 충돌 발생하면 마지막에 선언한 스타일이 적용

<head>

@import url(base.css);

p {color : gray;}

</style>

</head>

<p style = "color : blue"> //마지막 선언한 이 스타일이 적용됨

개별성 : 선택자의 개별성 규칙에 의해 결정됨

<head>

h2 {color:red;}

.cascade {color:green;}

#specifi {color:blue;}

</style>

</head>

선택자의 개별성

선택자	사용 예	개별성
Type 선택자	p	1
class 선택자	.wrap	10
id 선택자	#gnb	100
inline 선택자	style = “color:red;”	1000
가상 요소	:first-child, :before, :after	1
가상 class	:link, :visited, :hover, :focus	10

+주석 및 단위와 색상

1. 주석

/* */

2. 단위

절대단위	상대단위
pt, cm, mm, pc, in	px, ex, em, %

px : 해상도

ex : 소문자 x의 높이 기준

em : font-size 기준

3. 색상(color & background)

1) 키워드 방식 - 17개 색상명

2) 16진수 코드 방식 #00 ff 00

빨강 녹색 파랑

-CSS속성

선택자 { 속성 : 값;}

+박스모델

표준 모드

가로크기 = width + margin*2 + border + padding*2

호환모드

padding을무시함

width : 길이 | 퍼센트 | auto | inherit

hight : 길이 | 퍼센트 | auto | inherit

border-style--

border-width | -> border

border-color--

border-style :

none / hidden / dotted / dashed / solid / double / groove / ridge / inset/ outset

margin : 길이 | 퍼센트 | auto | inherit

padding : 길이 | 퍼센트 | auto | inherit

margin : (top, right, bottom, left)

margin : 50px

margin : 50px 100px

margin : 50px 70px 100px

margin : 50px 70px 100px 120px

왼쪽값(2)이 설정되지 않으면 오른쪽의 값(2)이 왼쪽의 값으로 됨

아래쪽 값(1)이 설정되지 않으면 위쪽의 값(1)이 아래쪽의 값으로 됨

마진 겹침 현상( margin collapsing)

위쪽 margin과 아래쪽 margin이 겹침

마진이 하나로 합쳐질때 두개의 마진값 중에서 큰 값으로 적용

float : 박스의 위치를 부모 요소의 안에서 왼쪽 or 오른쪽으로 이동

float : left / right / none / inherit

clear : 블럭 요소나 블럭 요소를 대체 할 수 있는 속성을 지정한 경우 플로트 해제

clear : left / right / both / none / inherit

+position

position : static | relative | absolute | fixed | inherit

top : 길이 / 퍼센트 / auto / inherit

right : 길이 / 퍼센트 / auto / inherit

bottom: 길이 / 퍼센트 / auto / inherit

left : 길이 / 퍼센트 / auto / inherit

1. relative position

본래 요소 기준, 다른 요소들의 배치 위치에 영향x

2. absoulte position

본문 요소에 떠 있는 형태

1) 상위 요소가 position : static, body일 때 body 요소를 기준으로 배치

2) 상위 요소가 position : relative, absolute일 때 이 상위 요소를 기준으로 배치

3. fixed position

스크린 기준

+타이포그래피

1.font-family : 글꼴 패밀리명, 대표 패밀리명;

대표 패밀리명 = serif, sans-serif, cursive, fantasy, monospace

2. font-size : 키워드 | 길이 | 퍼센트 | inherit

절대크기

1) 단위 : pt, pc, cm, mm

키워드 : xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger

2) 상대단위

px, em, ex, 퍼센트

3. line-height

단위 = px, em, 실수(1.4)

실수 계산법 => font-size * 실수 = line-height

4. font-weight 글꼴 굵게 장식

font-weight : 키워드(normal, bold, bolder, lighter) | 100~900 | inherit

5. font-style : normal | italic | ablique

6. font-varient : normal | small-caps(크기가 작은 대문자)

필수 속성 : font-size, font-family

8. text-indent 단락 첫 번째 줄 들여쓰기

text-indent : 길이 | 퍼센트 | inherit

9. text-align : left | center | right | justify | inherit

10. vertical-align

적용 가능 요소 : 인라인 요소, img 요소, input 요소, 블록 요소(th, td)

12. text-transform : none | uppercase | lowercase | capitalize | inherit

13. letter-spacing : 문자 간격 조절

letter-spacing : 길이 | normal | inherit

길이 => px, em (%는 인식이 이상해짐으로 사용 안함)

14. white-space : 공백문자를 처리하는 방식

nowrap : 자동 줄바꿈 허용x, pre : 하나 이상의, pre-wrap, pre-line : 대부분 웹브라우저에서 인식x

+색상과 배경

1. color : 색상명 | RGB16진수 | RGB10진수 | RGB백분율 | inherit

색상명 : 17가지 키워드

RGB16진수 : #FF0000

RGB10진수 : rgb(0, 255, 0)

RGB백분율 : rgb(0%, 0%, 100%)

2. background-color : 색상명 | RGB16진수 | RGB10진수 | RGB백분율 | inherit

3. background-image : none | url() | inherit

4. background-repeat : repeat | repeat-x | repeat-y | no-repeat | inherit

6. background-attachment : scroll | fixed | inherit

+목록

2. list-style-position : inside | outside | inherit

3. list-style-image : 목록 마커 대신 이미지를 사용

list-style-image : url() | none | inherit

+기타속성

1. border-collapse : separate | collapse | inherit

2. overflow : visible | hidden | scroll | auto | inherit

3. display = 박스(블록 요소 또는 인라인 요소)의 성격을 변경할 때 사용

display : none | block | inline | inline-block | inherit

none : 아예 화면에 나타나지 않음

4. visibility = display와는 다르게 화면에 감춰진 박스의 영역이 확보됨

visibility : visible | hidden | inherit

hidden : 원래 있던 자리의 공간은 남기고 숨기기

5. z-index : 요소 박스가 겹쳐지는 순서를 지정할 때 큰 숫자가 가장 위쪽에 겹침

z-index : auto | 정수

position 속성값이 absolute, relative, fixed (0)

static (x)

6. CSS hack

*html filter

윈도우용 익스플로러 4~6, 맥용 익스프로러 4~5에는 스타일이 적용, 그 밖의 웹 브라우저에서는 적용되지 않음

*html p {color:red;}

underscore hack

익스플로러 6에만 속성을 적용, 나머지 웹 브라우저에서는 적용 안됨

p {_color:red;}

hash hack

익스플로러 7이하 버전에만 속성을 적용하고 나머지 웹 브라우저에서는 적용되지 않도록 함

p {#color:red;}

조건 주석문(conditional comment)

익스플로러에서만 사용할 수 있는 핵, if함수처럼 해당 조건에 만족하면 수행 그렇지 않으면 주석으로 인식

<!--[if IE 6]>

<![endif]-->

저작자표시 비영리 변경금지

Com Fun

웹표준 xhtml, css

티스토리툴바

웹표준 xhtml, css

'공부/웹 프로그래밍' Related Articles

티스토리툴바