웹표준

8 POSTS

  1. 2009/08/27 [15강] apple코딩&포지션
  2. 2009/08/18 [12강] 포지션&레이아웃&테이블
  3. 2009/08/04 [8강] CSS-font&text
  4. 2009/07/28 [6강] CSS
  5. 2009/07/23 [5강] XHTML & CSS
  6. 2009/07/21 [4강] 웹표준
  7. 2009/07/14 [2강] UX 사례분석 (2)
  8. 2009/07/07 [교육]UX와 웹표준을 고려하고 웹표준을 지키는 웹페이지 제작실무과정

[15강] apple코딩&포지션

Posted 2009/08/27 21:58, Filed under: Study/css
* shift+alt+f : 코딩시 자동정렬
* 디자인 요소가 많은 사이트 : http://www.smileycat.com/

* position / float의 규칙
1. position:absolute > float: > position:relative 순으로 적용
2. position끼리는 레이아웃 잡는데 영향을 받음
3. static은 relative와 float에 영향을 주고 받음
4. 하나의 블록레벨 요소에서 한 요소의 자리를 주고 싶으면 마진, 패딩, 모두 사용가능
5. 하지만 여러개의 요소를 배치 시켜야 할 때는 상위 블록레벨 요소를 relative를 주고, 자식들을 모두 absolute로 positioning을 한 뒤, left, top, right, bottom등으로 정렬시킴

2009/08/27 21:58 2009/08/27 21:58
Tag : ,
Response : 0 trackback , 0 comment

Please leave a comment.

[12강] 포지션&레이아웃&테이블

Posted 2009/08/18 20:43, Filed under: Study/css
* 익스플로러 6 더블마진 버그 :
  1. float:left와 margin or padding을 같이 적용할 경우 발생
  2. 해결책 : float:left 속성이 있는 요소에 display:inline으로 선언

* background 이미지 지정 :
  1. background-position : 숫자 or 퍼센트 | 숫자 or 퍼센트
-> 네이버에서는 리스트로 된 형태들을 숫자별로 이미지를 자르지 않고 하나의 gif안에 넣은다음 좌표값으로 리스트에 따라 이미지가 노출되도록한다.
   ex) background:url(images/rank.gif) no-repeat 0 -17px;

* 웹접근성을 고려한 테이블 :
1. table내의 summary속성 : 테이블의 내용을 요약함
2. caption 태그 : 테이블의 제목을 지정
                 보여주지 않더라도 display:none 말고 visibility:hidden 사용
3. thead, tbody로 나누어 정확한 의미 전달
4. th를 이용해 head 셀임을 표시
5. scope 속성을 이용해 열, 혹은 행에 적용되는지 표시
-> 테이블을 쓸때는
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>순으로 작성해줘야 한다.
->테이블에 보더를 주고싶을때는 table#hackTable th,tr,td{ border:1px solid silver; } 이런식으로 모두 줘야한다.
->테이블의 cellspace같은 개념 : table#hackTable { border-collapse:collapse; }
-><caption>익스플로러 6에도 통하는 핵 정보</caption>를 안보이게 하고 싶은경우에는 display:none를 주게 되면 리더기가 읽지 못하게 되므로 다음처럼 지켜줘야 한다. table#hackTable caption {visibility:hidden;}
-> 테이블 링크 주는 방법
        table#hackTable tbody tr {
            cursor:hand; /*파폭에서는 안됨*/
            cursor:pointer; /*모든브라우저에서 적용*/
        }
        table#hackTable tbody tr:hover { /*테이블 행에 마우스 오버하면 백그라운드에 색을 줌*/
            background:#00bfff;
            color:white;
            font-weight:bold;
        }
-> 마우스 오버시 폰트가 bold일경우 테이블이 와따가따 할경우table-layout:fixed;를 주면 됨

* 포지션(position)
1. 포지션의 속성 : static, relative, absolute, fixed
2. static (자리를 차지하고 있는것임)
  ▢ 보통의 배치를 의미(기본값)
  ▢ top, right, left, bottom을 지정해도 무효가 됨
3. relative
  ▢ 상대배치를 의미함
  ▢ 본래의 박스를 생성하여 배치되지만 본래 위치에서 상대적으로 이동되어 배치
  ▢ 뒤의 요소 박스는 이 박스가 원래 위치에서 이동되지 않은 것으로 여김
-> static보다 위에 떠 있다고 봄, relative두개일경우에는 아래코딩된 relative가 위로 뜸
* 배너나 쇼핑몰의 하단에 장바구니(bottom에 위치한것)등은 fixed를 줘서 스크롤해도 고정위치에 위치할수 있도록 한다.
4. absolute
  ▢ 절대적인 위치를 의미함
  ▢ 다른 요소들의 레이아웃에 전혀 영향을 주지 않음

* z-index 속성
-> 크면클수록 위로 올라간다.

* 익스플로러 6에서도 통하는 크로스브라우징 핵
언더스코어핵 - html {_color:..  } - IE 4~6등에서만 스타일 적용
2009/08/18 20:43 2009/08/18 20:43
Tag : ,
Response : 0 trackback , 0 comment

Please leave a comment.

[8강] CSS-font&text

Posted 2009/08/04 21:35, Filed under: Study/css

오늘까지 절반완료: 문법 완료
*URL : 상대/절대경로
*NebBeans IDE 단축키- shift+Alt+F : css 정렬정리하기
                                      Alt + space : 자동완성기능 보이기
p a{color:green; } => p안의 a의 컬러가 바뀌게 설정됨
* font-weight속성 - 두께 줄이기 : lighter
* em박스란? 소문자 m을 기준으로 활자디자이너가 박스를 만듦.
* font-size :
  xx-small, x-small, small, medium, large, x-large, xx-large로 되는 절대크기는 브라우저들마다 약간씩 다르게 보여진다.
* emChart : http://aloestudios.com/tools/emchart/ ->px->em변환 or em->px변환 차트임
* font 속성
  .a1 {font:bold italic 40px NanumGothi; }
  .a2 {font:40px serif; } /*앞의 속성 3가지는 생략 가능 적용됨*/
  .a3 {font:20em; } /*font-family가 없어서 적용 불가*/
  .a4 {font:sans-serif; } /*사이즈가 없어서 적용 불가*/
* text-indent : 텍스트의 들여쓰기
  div {text-indent:20px; } ->텍스트 첫줄이 20px안으로 들여쓰기가 된다. 음수값도 가능
* text-align: left보다는 justify가 좌측정렬이 더 예쁘고 보기좋게 정렬이 됨. justify를 사용할것.
* text-decoration : blink는 firefox와 opera에서만 깜빡임
                           p {text-decoration:underline overline blink}-> 여러가지 함께 사용가능
                           underline, overline, line-throungh, blink, none 등이있음
* vertical-align : baseline, sub(아랫첨자), super(윗첨자), top, middle, text-top, text-bottom, bottom
* white-space :
* direction : 글자가 좌측or우측으로 흐르는 방향 지정 -> rtl, ltr

2009/08/04 21:35 2009/08/04 21:35
Tag : ,
Response : 0 trackback , 0 comment

Please leave a comment.

[6강] CSS

Posted 2009/07/28 20:15, Filed under: Study/css
pmania@nate.com

4page~71page
프로그램다운로드 : http://www.my-debugbar.com/wiki/IETester/HomePage

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

인라인안에 블록을 넣을수 없다.
Shift+Alt+F : CSS에서 자동정렬이 됨.중요!!
@import url(default.css); =>권장하지 않음 5.0이하 버전에서 안읽을 수 있음
@import url(default.css) screen; 이 제일 먼저 오도록 한다.
css 명령이 중복될경우 마지막것으로 적용된다. 하지만 id는 처음 id것으로 적용이 됨

다음시간...<선택자의 종류> 시작
2009/07/28 20:15 2009/07/28 20:15
Tag : ,
Response : 0 trackback , 0 comment

Please leave a comment.

[5강] XHTML & CSS

Posted 2009/07/23 22:08, Filed under: Study/css

* 하드코딩 프로그램 권장
- http://java.sun.com/javase/downloads/index.jsp 에서
  JDK 6 Update 14 with NetBeans 6.7 설치하면 java와 코딩프로그램 설치완료
- 나눔고딕코딩 폰트 사용권장

2009/07/23 22:08 2009/07/23 22:08
Tag : , ,
Response : 0 trackback , 0 comment

Please leave a comment.

[4강] 웹표준

Posted 2009/07/21 21:50, Filed under: Study/css
1. 웹(world wide web)이란?
http://info.cern.ch/ : 세계최초의 웹사이트
- Markup Language
  우리가 공부할때 줄을 치거나, 형광팬 등으로 칠하는 것이 마크업

2. 웹표준(Web Standards)
W3C(World Wide Web Consortium) 이외에 ISO, IETF, IANA, OASIS등이 참여하고 있음
W3C : CSS, HTML, XHTML, XML, RDF, OWL 등의 문서양식 표준화
웹표준 준수방법 :HTML 4.01, XHTML 1.0이상의 권고안을 지켜 제작
* 우리가 기억할 웹표준 :  요소를 의미대로 사용함
- 테이블은 정보를 테이블로 표시할 경우에만 사용(레이아웃X)
- 레이아웃은 <div> 요소 사용
- 제목은 <h1~6> 요소 사용
- 메뉴나 리스트는 <li>요소 사용
- <font>, <big> 사용x
- 구조와 데이터는 XHTML, 레이아웃과 스타일은 CSS :
   HTML에서 스타일을 인라인, 속성으로 지정X, css로 뺄것
http://csszengarden.com/
* 웹표준의 장점 : 수정과 관리가 용이
- 웹접근성 향상 : 다양한 기기에서 접근 가능
- 검색엔진 최적화 (SEO:Search Engine Optimization)
   검색엔진의 크롤러는 (X)HTML을 그대로 해석되므로 문서구조가 명확하지 않으면 검색이 쉽지 않음
- 파일사이즈의 축소
- 상,하위 호환성 확보
* 웹표준에 대한 오해 :
- 화려하고 세련된 페이지 불가?
   웹 서비스 가공자들에 대한 재교육 부재와 기존의 비효율적이고 표준을 활용하지 못하는 작업 행태에서 문제가 시작 되는 것
- 접근성이 높은 사이트는 비용이 증가한다?
   개발시는 비용 증가/유지보수, 리뉴얼시 효율성이 높음
- 웹표준 = 크로스브라우징?
* 웹표준 준수지침(2008.04.25)

3. 웹접근성(Web Accesibility)
웹접근성이란?
- 노인이나 어린이, 장애인이 웹의 정보에 접근 가능하게 하는 것
- 모든 브라우저뿐 아니라, 핸드폰, PDA 등 모바일 기기, TV등의 여러가지 기기에서 웹페이지에 접근가능하게 만드는 것
- 웹표준, 웹접근성, CrossBrowsing은 비슷하나 개념은 다르다.
2009/07/21 21:50 2009/07/21 21:50
Tag :
Response : 0 trackback , 0 comment

Please leave a comment.

[2강] UX 사례분석

Posted 2009/07/14 20:10, Filed under: Study/css
1. UX로 생각하기
http://www.starpl.com 싸이월드같은 사이트
디자인과 아이디어가 좋았지만 사용성에 문제가 있어 계속 업그레이드 되고 있는 사이트
http://www.insidekitty.co.kr/ 키티전시회
메뉴를 하단으로 배치해 일반적인사이트의 관념에서 벗어난 사례

2. UX와 관련된 디자인 학문
정보 디자인 : 정보디자인의 집약-올림픽픽토그램/지하철노선도
인터페이스 디자인
인터렉션 디자인
그래픽 디자인 : http://www.genoco.com/
* Look&Feel 이란 단어는 매킨토쉬가 만들었지만 너무많은 사람들의 사용으로 분쟁까지 일어났지만 현잰 분쟁에서 져 누구나 사용이 가능하다.

3. 인포메이션 디자인과 관련된 UI
태그클라우드 : http://mar.gar.in/ 소셜북마크
                     소셜북마크의 원조 -> http://delicious.com/
계층(관계) 구조의 시각화 : http://www.blackdogair.com/
                                     http://newsmap.jp/
                                     http://t.lab.naver.com/movie_network/ 
                                     http://slab.nate.com/network/ 네이트 검색실험실
                                     http://s.lab.naver.com/related/ 네이버연관검색어
                                     http://qrobo.com/ 시맨틱웹검색의 대표적인 케이스
                                     http://owlim.com/ 시맨틱웹검색
비쥬얼 서치(Visual Search) : http://www.uniqlo.com/kr/ 상품검색부분 참고, 검색과 브라우징의 결합
                                         http://lab.nate.com/timeline/ 검색결과의 비주얼인포메이션
                                         http://s.lab.naver.com/posneg/ 긍정부정 검색
블로그타입의 초기화면 : http://www.acornpub.co.kr/
썸샷(Thumbshot) : http://www.crepot.com
스크린캐스트(screencast) : http://www.lemonpen.com/ 레몬펜 동영상
                                       사용하기 어려운 사이트일경우 동영상으로 설명을 만든다
                                       http://inside.naver.com/ 동영상
순서 매기기(Numbering) : http://www.cgv.co.kr/ 예매시스템의 순서화
                                    https://nid.naver.com/user/join.nhn?todo=getUserAgree_normal&returl=
                                    회원가입의 스텝

4. 인터페이스 디자인과 관련된 UI
웨블리케이션(Weblication) : web + aplication
                                       https://buzzword.acrobat.com 열리고 닫히는 애니메이션을 확실히 보여줌
                                      스크롤바의 페이지넘버화
                                       http://www.crepot.com 웹상에서 문서제작가능
                                       http://s.lab.naver.com/pe/
웹의 위젯화 : http://blog.jidolstar.com/ 랭킹서비스 위젯적용
                   http://flexdocs.kr/board/ 플렉스의 신기술 3D화, 지돌스타님이 제작
                   http://widgetbank.daum.net/

포틀릿 기반 인터페이스 : http://www.naver.com/ 박스형태의 서로다른 콘텐츠들을 모아둔것
포스트잇 타입 인터페이스 : http://www.magnoto.com/
PIP(Picture in Picture) 인터페이스 : http://wzd.com/ 개인화, Ajax로 구현
                                                  http://www.google.co.kr/ig 원조
위키타입 인터페이스 : http://wikipedia.org/ 집단지성의 대표
탭 패턴(Tab Patterns)
강력한 그룹핑
보기옵션 : 네이버의 스마트파인더 기능
큰 입력 필드 : http://www.babelwith.me/ 실시간번역채팅 사이트
                    큰입력창을 사용해 다른부분은 입력이 안되도록 제약조건사용
원스톱 등록 : 네이버 캘린더, 가계부

5. 인터렉션 디자인과 관련된 UI
단일 컨텍스트 다중 작업 : 하나의 페이지에서 다양한 인터렉션이 일어남. 영화예매사이트
로딩 표시기 : http://www.ajaxload.info/ 움직이는 gif로 원하는 형태를 제작해줌
자동 완성 : 검색어 자동완성기능
미리보기 팝업 : http://www.wizwid.com
빠른편집 : http://wzd.com/ 바로고칠수 있게 함, 빠른등록/편집
제약기법 : 하나의 입력필드에서 다른부분은 입력할수 없도록 제약시키는것.
피쉬아이메뉴(Fisheye Menus) : http://opencast.naver.com/
인터렉티브 모자이크 : http://www.blinkx.com/
                               http://www.coverpop.com/
파비콘과 북마크릿 : 브라우저 탭에 붙는 북마크

6. 그래픽 디자인과 관련된 UI
단순함(Simplicity) : http://www.google.co.kr/
심플한 레이아웃 : http://www.flickr.com/
투명한 컨트롤 패널 : 위성지도 겹쳐보기 서비스 http://map.naver.com/
분리된 헤더 : http://www.lemonpen.com/
가운데 정렬 : http://www.hyundaicard.com/
리퀴드 디자인(Liquid Design) : 다양한 해상도에서 상대적인 크기로 보여지는것
                                           http://calendar.daum.net/top
강한색상과 밝은색상 : http://me2day.net/me2/app
크고 진한 글자 : http://openid.net/
둥글게 처리된 형태 : http://www.tistory.com/
선명하고 정교한 그래픽 요소 : 네이버 자동차스마트파인더의 [엠블렘/외형] 참고
코멘트 디자인 : 댓글 http://me2day.net
2009/07/14 20:10 2009/07/14 20:10
Tag : ,
Response : 0 trackback , 2 Comments

  1. # 이성희 2009/12/02 15:17 Delete Reply

    좋은 정보 감사합니다. 많은 도움 되었어요

    1. # bobozzang 2009/12/03 15:14 Delete

      ^^ 앗! 도움이 되셨다니 다행입니다.
      자주 오세요~

      날씨가 춥습니다. 감기조심하세요.

Please leave a comment.

[교육]UX와 웹표준을 고려하고 웹표준을 지키는 웹페이지 제작실무과정

Posted 2009/07/07 10:17, Filed under: Study/css
♣사용자 경험(User eXperience)이란?
♣UI와 UX의 구분
♣사용자경험(UX)의 중요성
♣사용자 경험(UX)을 중시한 사이트 분석
♣구체적인 UX의 사례 분석
♣UX를 고려한 인터페이스 분석
♣UX 기획시 고려사항1 : 페르소나
♣UX 기획시 고려사항2 : 사용성 테스트
♣UX 기획시 고려사항3 : 여러가지 인터페이스
♣웹표준에 대하여
♣웹표준의 의미와 고려사항
♣웹접근성의 개요와 여러가지 웹접근성 지침 분석
♣웹표준을 준수한 사이트 사례 분석
♣HTML의 버전과 DOCTYPE 정의
♣XHTML 과 CSS
♣CSS의 값에 대하여
♣CSS의 단위와 폰트 정의
♣CSS의 선택자 정의
♣선택자 고려사항
♣CSS의 인라인 엘리먼트
♣CSS의 인라인 엘리먼트
♣CSS의 블록 엘리먼트
♣CSS의 블록 엘리먼트
♣CSS의 박스모델
♣CSS의 시각정형모델
♣CSS의 시각정형모델
♣CSS의 레이아웃
♣CSS의 레이아웃
♣여러가지 레이아웃
♣포지셔닝의 개념
♣여러가지 포지셔닝
♣포지셔닝을 이용한 레이아웃
♣사용성 중심의 테이블의 개요
♣사용성 중심의 테이블 만들기
♣사용성 중심의 테이블 만들기
♣접근성 높은 폼의 개요
♣접근성 높은 폼 만들기
♣접근성 높은 폼 만들기
♣크로스 브라우징의 개념
♣크로스 브라우징의 고려할 사항들
♣크로스 브라우징의 고려할 사항들
♣브라우져 별 특징
♣여러가지 핵과 필터
♣여러가지 핵과 필터
♣유효성 검사
2009/07/07 10:17 2009/07/07 10:17
Tag : ,
Response : 0 trackback , 0 comment

Please leave a comment.

  1  

Total: 223684 (Today: 18, Yesterday: 42)