1. 웹 표준/웹 접근성
- W3C의 권장 표준 준수
- 논리적이고 의미에 맞는 HTML/CSS사용
- 내용과 디자인의 분리
- 브라우저간의 호환성 유지
- 웹 접근성 : 웹 접근간 장애제거(장애우, 노약자, 외국인의 접근편리 유도)
- 웹 표준에 맞는가를 확인 하는 방법(Validation)
> 통합검사기 : http://validator.w3.org/unicorn/
> HTML/XHTML : http://validator.w3.org/
> CSS : http://jigsaw.w3.org/css-validator/
> 브라우져의 Add-on
ⓐ chrome : pendule
ⓑ firefox : html Validator
2. 웹 개발 과정
- 요구 분석/조사
> 목표 및 요구 사항 분석
> 관련 사이트의 특징과 장/단점, 아이디어 분석
> 브레인 스토밍
- Site 구조
> 초기 스케치
> 맵 사이트 구성
> Frame 구성
- 디자인
※ 디자인은 디자이너의 일이 아니다. 공학자가 공학적 측면에서 디자인을 설계/분석할 능력을 갖춰야한다.
> 레이아웃 구성 : 사이트 맵을 표현할수 있고, 사용자에게 편의를 제공하는 모습을 구상
> 색상 : 너무 많은 색을 피하여 색상을 구상하여야 보기가 좋다.
> 이미지 : 과도한 이미지 사용은 피하는 것이 좋다.
이미지의 크기 개수에 따라서 웹에 무리가 가해지는 것이 달라짐.(작은 아이콘 多 X / 큰 그림 하나 O)
- 코드 작성
> 레이아웃을 표현할 골격을 작성한 후 골격 하나하나씩 나아가며 HTML을 작성해나간다.
> CSS가 없어도 HTML만으로 의미가 전달 될 수 있게 해야한다.
> HTML의 작성이 끝나면 CSS를 작성한다.
ⓐ CSS 작성시 : 브라어주 마다 다른 CSS초기값을 일정한 값으로 초기화 해주는 것이 좋다.
※ 참고 : http://developer.yahoo.com/yui/reset/
-----------------------------------------------------------------------------------------------------
이번에 과제로 컴퓨터과 홈페이지 제작을 하면서 했던 결과물들이다. 간단히 작성해보면 다음과 같다.
ⓐ 요구 분석 / 조사
> 학과 소개 및 과목 소개, 공학인증 소개
> 과목 소개시 과통합으로 인한 복잡한 커리큘럼에 대해서 자신이 들어야 할 과목 안내 기능 추가
> 커뮤니티시 게시판 사용없음 : 구현시 트위터나 페이스북으로 컴퓨터 공학과 페이지 생성하여 대체 사용
But, 일단 자유 "게시판" 창은 생성해 두도록 한다.
ⓑ Site 구조
> 사이트 맵
ⓒ 디자인
> 레이아웃 : 여러페이지중에서 Community.html을 예를 들어 보여주겠다.
완성된 페이지에 작성을 하였지만 이렇게 골격을 짜는 것은 손으로 스케치를 하여 작성하는 것도 좋다.
> 색상 : 내가 좋아하는 파란색을 기준으로 그라데이션으로 배경을 넣고, 링크등 이미지등은 유사계열을 사용함
> 이미지 : 각각 게시판을 나타내는 그림은 하나씩 표현하였고,(표현시 텍스트 위치를 잡기 편하게 같은높이적용)
트위터와 페이스북은 하나의 이미지로 묶어서 CSS로 위치 조정을 통해서 해당 이미지가 나오게 했다.
ⓓ 코드작성
> DTD선언 및 CSS파일 링크 생성/ 메타 선언
> 골격 생성
※ 정말 아무것도 없이 내용만 있음을 알 수 있다. CSS를 적용하기 전에 있는 HTML화면
ⓔ CSS 작성
> 브라우져 리셋 : http://developer.yahoo.com/yui/reset/ 사이트를 이용함
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
- W3C의 권장 표준 준수
- 논리적이고 의미에 맞는 HTML/CSS사용
- 내용과 디자인의 분리
- 브라우저간의 호환성 유지
- 웹 접근성 : 웹 접근간 장애제거(장애우, 노약자, 외국인의 접근편리 유도)
- 웹 표준에 맞는가를 확인 하는 방법(Validation)
> 통합검사기 : http://validator.w3.org/unicorn/
> HTML/XHTML : http://validator.w3.org/
> CSS : http://jigsaw.w3.org/css-validator/
> 브라우져의 Add-on
ⓐ chrome : pendule
ⓑ firefox : html Validator
2. 웹 개발 과정
- 요구 분석/조사
> 목표 및 요구 사항 분석
> 관련 사이트의 특징과 장/단점, 아이디어 분석
> 브레인 스토밍
- Site 구조
> 초기 스케치
> 맵 사이트 구성
> Frame 구성
- 디자인
※ 디자인은 디자이너의 일이 아니다. 공학자가 공학적 측면에서 디자인을 설계/분석할 능력을 갖춰야한다.
> 레이아웃 구성 : 사이트 맵을 표현할수 있고, 사용자에게 편의를 제공하는 모습을 구상
> 색상 : 너무 많은 색을 피하여 색상을 구상하여야 보기가 좋다.
> 이미지 : 과도한 이미지 사용은 피하는 것이 좋다.
이미지의 크기 개수에 따라서 웹에 무리가 가해지는 것이 달라짐.(작은 아이콘 多 X / 큰 그림 하나 O)
- 코드 작성
> 레이아웃을 표현할 골격을 작성한 후 골격 하나하나씩 나아가며 HTML을 작성해나간다.
> CSS가 없어도 HTML만으로 의미가 전달 될 수 있게 해야한다.
> HTML의 작성이 끝나면 CSS를 작성한다.
ⓐ CSS 작성시 : 브라어주 마다 다른 CSS초기값을 일정한 값으로 초기화 해주는 것이 좋다.
※ 참고 : http://developer.yahoo.com/yui/reset/
-----------------------------------------------------------------------------------------------------
이번에 과제로 컴퓨터과 홈페이지 제작을 하면서 했던 결과물들이다. 간단히 작성해보면 다음과 같다.
ⓐ 요구 분석 / 조사
> 학과 소개 및 과목 소개, 공학인증 소개
> 과목 소개시 과통합으로 인한 복잡한 커리큘럼에 대해서 자신이 들어야 할 과목 안내 기능 추가
> 커뮤니티시 게시판 사용없음 : 구현시 트위터나 페이스북으로 컴퓨터 공학과 페이지 생성하여 대체 사용
But, 일단 자유 "게시판" 창은 생성해 두도록 한다.
ⓑ Site 구조
> 사이트 맵
ⓒ 디자인
> 레이아웃 : 여러페이지중에서 Community.html을 예를 들어 보여주겠다.
> 색상 : 내가 좋아하는 파란색을 기준으로 그라데이션으로 배경을 넣고, 링크등 이미지등은 유사계열을 사용함
> 이미지 : 각각 게시판을 나타내는 그림은 하나씩 표현하였고,(표현시 텍스트 위치를 잡기 편하게 같은높이적용)
트위터와 페이스북은 하나의 이미지로 묶어서 CSS로 위치 조정을 통해서 해당 이미지가 나오게 했다.
ⓓ 코드작성
> DTD선언 및 CSS파일 링크 생성/ 메타 선언
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4.loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel = "stylesheet" type = "text/css" href = "community.css">
<title>Computer Engineering</title>
</head>> 골격 생성
<body>
<div id = "wrap">
<div id = "header">
<div id = "navigation">
</div>
</div>
<div id = "main_content">
</div>
<div id = "sub_content">
</div>
<div class = "third_content">
</div>
<div class = "footer">
</div>
</div>
</body>
> 각 부분에 대한 구현 : 네비게이션을 예를 들겠다.
<div id = "navigation">
> 각 부분에 대한 구현 : 네비게이션을 예를 들겠다.
<div id = "navigation">
<a href = "introduce.html" class = "item">Introduce</a>
<a href = "system.html" class = "item">ABEEK</a>
<a href = "community.html" class = "item" id = "last_nav">Community</a>
</div>
※ 정말 아무것도 없이 내용만 있음을 알 수 있다. CSS를 적용하기 전에 있는 HTML화면
ⓔ CSS 작성
> 브라우져 리셋 : http://developer.yahoo.com/yui/reset/ 사이트를 이용함
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
#body{
width:960;
}
div{
display:block;
}
a:link, a:visited{
text-decoration:none;
color:CornflowerBlue ;
}
a:hover, a:active{
color:blue;
}
> CSS 작성 : 네비게이션을 예를 들겠다.
navigation 결과
이렇게해서 CSS를 모두 완성시킨 페이지가 맨위의 레이아웃에 나온 그림이다.
마지막으로 호환성 검사를 위해 크롬, 파이어폭스, IE에서 실행실시 및
파이어폭스의 Validator를 이용하여 표준에 대한 검사 실시
※화면 검사는 다 사진을 올리면 글이 더 길어질것 같아서... validator결과만 보이겠다.
이렇게 호환성 결과와 validator결과 이상이 없으면 End!!
> CSS 작성 : 네비게이션을 예를 들겠다.
/* navigation */
#nav {
position: absolute;
bottom: 5px;
right: 5px;
}
#nav a.item {
text-decoration: none;
color: #525252;
font-family: "curlz MT", "blackadder ITC", "Arial";
}
#nav .item {
list-style-type: none;
font-size: 17px;
border-right: 1px solid #E2E2E2; //각각의 메뉴는 오른쪽에 나눔줄을 갖는다.
float: left; //각각의 아이템은 왼쪽으로 계속 붙는다.(너비가 꽉찰때까지)
height: 25px;
padding: 0px 22px;
line-height: 25px;
display: block;
}
#nav #last_nav{ //마지막 메뉴의에서 오른쪽 나눔줄 삭제
border-right: 0px solid #DFE2E1;
} navigation 결과
이렇게해서 CSS를 모두 완성시킨 페이지가 맨위의 레이아웃에 나온 그림이다.
마지막으로 호환성 검사를 위해 크롬, 파이어폭스, IE에서 실행실시 및
파이어폭스의 Validator를 이용하여 표준에 대한 검사 실시
※화면 검사는 다 사진을 올리면 글이 더 길어질것 같아서... validator결과만 보이겠다.
이렇게 호환성 결과와 validator결과 이상이 없으면 End!!