'프로그래밍/HTML5'에 해당하는 글 2건


index.html


		
contents
Rev Factory



style.css

html,body {
	padding: 0;
	margin: 0;
	text-align: center;
	height: 100%;
}

body {
	font-size: 12px;
	font-family: "돋음",dotum,sans-serif;
	color: #333;
}

#Head {
	position: relative;
	width: 100%;
	height: 50px;
	overflow: hidden;
	z-index: 10;
	background-color: #eee;
}

#bodyWrap {
	width: 100%;
	min-height: 100%;
	margin: -50px auto -30px;
	background-color: #fbfcfc;
	z-index: 5;
}

/* IE Hack */
*html #bodyWrap { 
	height: 100%;
}

#footerWrap {
	display: block;
	width: 100%;
	line-height: 30px;
	height: 30px;
	background-color: #e9eff6;
	clear: both;
}

#bodyWrap > nav, #bodyWrap > section {
	padding: 50px 0 30px 0;
}

#bodyWrap > nav {
	background: #ffdfee;
	float: left;
	margin-right: -200px;
	width: 200px;
	height: 200px;
}

#bodyWrap > section {
	margin-left: 200px;
	background: #ffffee;
	height: 500px;
}

#bodyWrap > section:after {
	content:" "; 
	display:block; 
	clear:both;
}





참고 블로그 


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

'프로그래밍 > HTML5' 카테고리의 다른 글

HTML5 기본 Layout Template  (0) 2015.03.18
HTML4 와 HTML5의 차이점  (0) 2013.01.19

WRITTEN BY
RevFactory
REV는 '향상시키다' 의미를 지니고 있습니다. 이곳은 Rev Factory 입니다! Kakao Developer

받은 트랙백이 없고 , 댓글이 없습니다.
secret

HTML4 와 HTML5의 차이점


HTML5의 새로운 버젼에 따른 
새로운 개념과 달라진 점을 알아보도록 하겠습니다.



  • 새롭게 도입된 요소

  • 변경된 요소

  • 없어진 요소

  • 신규속성

새롭게 도입된 요소

  1. - section 요소 : h1~h6 관련된 콘텐츠를 그룹화하기 위해 사용
  2. - article 요소 : 독립콘텐츠 등의 섹션을 나타내기 위함
  3. - aside 요소 : 메인콘텐츠와 관련된 참고 콘텐츠 등의 섹션
  4. - hgroup 요소 : 섹션의 제목(h1~h6)을 그룹화하기 위해 사용
  5. - header 요소 : 섹션의 헤더를 나타냄
  6. - footer 요소 : 섹션의 푸터를 나타냄
  7. - nav 요소 : 내비게이션 사용
  8. - figure 요소, figcaption 요소: 이미지나 동영상 등의 콘텐츠와 그 캡션을 그룹화하기 위함
  9. - audio 요소 : 사운드 또는 오디오 스트림을 제공 (플러그인X)
  10. - video 요소, source 요소 : 플러그인이 없어도 재생 가능
  11. - embed 요소 : 플러그인 콘텐츠를 나타냄, html5에서 처음으로 표준으로 규정
  12. - mark 요소 : 저자가 웹페이지 독자에게 주의를 환기시키기 위한 부분
  13. - progress 요소 : 어떤 처리에 대한 진행 상황
  14. - meter 요소 : 디스크 사용량 등의 계측결과
  15. - time 요소 : 날짜와 시각 표시
  16. - ruby 요소, rt 요소, rp 요소 : 루비를 나타내고자 할 때 사용
  17. - canvas 요소 : 그래프, 게임 등 동적으로 비트맵 그래픽을 렌더링하기 위해 사용
  18. - command 요소 : 사용자가 호출할 수 있는 명령을 나타냄
  19. - detail 요소, summary 요소 : 사용자의 요구에 따라 표시할 수 있는 추가정보
  20. - datalist 요소 : imput 요소 입력용으로 목록상자에 입력 후보를 표시하기 위함
  21. - keyget 요소 : 폼을 전송할 때 비밀키와 공개키를 생성
  22. - output 요소 : 계산 결과를 나타냄
  23. - input 요소
    1. ▷ color : 칼라 입력 타입
    2. ▷ date : 일자 입력 타입
    3. ▷ datetime : 시간 입력 타입
    4. ▷ datetime-local : 지역화 일자, 시간 입력 타입
    5. ▷ email : 메일 주소 입력 타입
    6. ▷ month : 연월 입력 타입
    7. ▷ week : 연도와 주 입력을 위한 타입
    8. ▷ number : 한 줄의 숫자 데이터를 입력
    9. ▷ range : 슬라이더 형태를 숫자 범의 데이터 입력
    10. ▷ search : 검색을 위해 값을 입력할 때 사용
    11. ▷ tel : 전화번호 입력을 위한 타입
    12. ▷ url : 절대경로 URL 입력을 위한 타입

변경된 요소

  1. - address 요소 : 연락처 정보 제공
  2. - b 요소 : 굵은 글씨, html5에서는 중요성이나 강조의 의미가 사라짐
  3. - hr 요소 : 라인, html5에서는 의미가 부여됨
  4. - i 요소 : 이탤릭체, 목소리나 분위기, 전문용어, 배의 이름, 인쇄물에 표현
  5. - label 요소 : 폼 컨트롤의 캡션 표현
  6. - menu 요소 : 메뉴 리스트 표현
  7. - small 요소 : 작은 글씨 형태로 주석 표현, 저작권자, 면책 사항, 법률 용어
  8. - strong 요소 : 중요성을 강조하는 표현, 의미를 부각시키지 않고 텍스트를 부각시킴

없어진 요소

  1. - basefont 요소 : 기본폰트 설정, CSS 대체
  2. - big 요소 : 글씨 크게, CSS 대체
  3. - center 요소 : 가운데 정열, CSS 대체
  4. - font 요소 : 폰트 지정, CSS 대체
  5. - s 요소, strike 요소 : 취소선, CSS 대체
  6. - tt 요소 : 고정 간격, CSS 대체
  7. - u 요소 : 밑줄, CSS 대체
  8. - frame 요소, frmset 요소, noframe 요소 : 페이지를 프레임으로 분할 할 수 없음

신규속성

  1. - autofocus : 커서를 이동하지 않고 바로 입력 또는 선택 할 수 있는 속성
  2. - disabled : 모든 콘텐츠를 사용할 수 없도록 함 (fieldset)
  3. - novalidate : 폼 컨트롤 값을 체크하지 않고 전송 (form)
  4. - ping : ping 속성에 지정한 서버용 CGI 프로그램을 호출 (사용자가 클릭한 것을 카운트함)
  5. - placeholder : 입력할 때 도움을 주기 위한 힌트를 표시 (input, textarea)
  6. - required : 폼 컨트롤 공통 속성으로 필수 입력 여부를 지정
  7. - reverse : 일련번호를 반대로 표시할 때 (ol, li)
  8. - async : 스크립트가 실행할 수 있는 상태가 되면 비동기로 실행 (script)
  9. - size : 아이콘 사이즈를 지정 (link)
  10. - iframe 추가 속성
    1. ▷ sandbox : 제공된 콘텐츠에 제약을 가함
    2. ▷ seamless : 브라우징 콘텐츠가 다큐먼트의 부분으로 나타나는 것과 같이 렌더링 됨
    3. ▷ srcdoc : 프레임에 포함시킬 콘텐츠를 지정
  11. - input 추가 속성
    1. ▷ autocomplete : 입력 필드 값의 자동 완성 여부 지정
    2. ▷ min : 컨트롤의 최소값을 지정
    3. ▷ max : 컨트롤의 최대값을 지정
    4. ▷ multiple : 속성에 다수 값 입력 여부 지정
    5. ▷ pattern : 컨트롤 값을 체크하는 정규 표현식 패턴 지정 (자바스트립 패턴 방법 준수)
    6. ▷ step : 속성에 컨트롤의 증가 단위 값을 지정

출처 : http://webstoryboy.tistory.com/12

저작자 표시
신고

'프로그래밍 > HTML5' 카테고리의 다른 글

HTML5 기본 Layout Template  (0) 2015.03.18
HTML4 와 HTML5의 차이점  (0) 2013.01.19

WRITTEN BY
RevFactory
REV는 '향상시키다' 의미를 지니고 있습니다. 이곳은 Rev Factory 입니다! Kakao Developer

받은 트랙백이 없고 , 댓글이 없습니다.
secret