끄적대기

글

라벨이 html5인 게시물 표시

[HTML5] HTML5 기초 : section, article 차이

11/12/2012

뭐 기본적인 태그 정의 내용은 따로 적혀있으니 스터디때 내용만 대충 적어 놓을게요'ㅡ') article - 태그 자체로 완전한 하나의 개별 컨텐츠로 사용함. - 신문기사로 치면 타이틀 제목이 있는 하나의 기사거리를 말함. - 물론 article는 그 안에 section을 가질 수 있음. section - 자체로 완전한 개별 컨텐츠로 배포, 재사용하기 위한 것은 아님. - 페이지 안의 주제가 다른 영역 구분 짓거나 하나의 글을 나누기 위함. - 일반적으로 section 영역은 헤딩을 시작으로 가짐. - 헤딩을 사용하지 않거나 스타일을 입히기 위해 감싸는 용도는 div를 쓰는 것이 옳습니다. (HTML5 첫걸음) 좀 그림도 그리고 설명하고 싶은데... 요즘 왠지 귀차니즘에 걸려서...천천히 올릴게염...'ㅡ')

자세한 내용 보기

[HTML5] HTML5 기초 : input 유형과 속성

11/12/2012

HTML5에서 사용되는 input 유형입니다.'ㅁ')/ 아래 내용은 파일 첨부하였으니 최신 브라우저에서 확인해 보실 분들은 확인해 보세요. 아마도 후회할 것임ㅋㅋㅋ text - 텍스트를 입력함 password - 비밀번호 입력시 사용하며 동그리마로 표기됨 checkbox - 여러개를 체크할 수 있음 radio - 한가지만 선택 file - 파일을 업로드 할 수 있음 submit - 폼에 입력한 값을 전송함 New) email - 지원하는 곳에서 자판이 email용으로 변하고 email형식을 입력해야함 New) url - 지원하는 곳에서 자판이 url용으로 변하고 http://가 자동으로 앞에 사용됩니다. New) number - 상하버튼을 눌러서 숫자를 변경 할 수 있습니다. min : 최소값 max : 최대값 step : 숫자 간격 (기본값은 1) value : 초기값 New) range - 슬라이드 막대로 숫자를 변경 min : 최소값 max : 최대값 step : 숫자 간격 (기본값은 1) value : 초기값(생략하면 슬라이드 가운데) New) date... - 날짜와 관련된 유형입니다. date : 연도, 월, 날짜를 선택 month : 연도, 월 선택 week : 연도, 주 선택 time : 시간을 표시 datetime : 날짜, 시간 선택. UTC 시간대 기준 datetime-local : 연도, 월, 날짜 현지 시간이 표시됨 New) search - 검색상자입니다. 입력시 상자 오른쪽에 x 표시가 됩니다. New) color - 색상을 선택합니다. 추가된 유형들은 대부분이 현재 브라우저에서 미미하게 지원을 하고 있기 때문에 바로 사용하기에는 큰! 무리수가 있더군요.'ㅡ'); 적용되면 아무튼 편하긴 할듯. 새로 추가된...

자세한 내용 보기

[HTML5] HTML5 기초 : video, audio 삽입

11/12/2012

예전에 난장세미나에서 들었었던 코덱에 대한 이야기는 내용도 길고 하니 언급 안하겠습니다. 그래도 간단히 알고 가야 되는 내용이라면 파이어폭스와 오페라는 테오라코덱(무료 : ogg형식) 을 지원하고 나머지는 H.264(유료, HTML5 동영상 재생 용도로는 무료 : mp4형식) 를 지원하는 것만 일단 알고 계시면 됩니다. 단 크롭은 둘다 지원하고 있습니다. 그리고 구글이 오픈 소스로 공개한 VP8 이 있습니다. <video> src - 동영상 파일의 경로를 지정 poster - 동영상이 화면에 나타나지 않을 때 대신 표시할 그림을 지정 preload - 동영상이 백그라운드에서 다운로드되어 재생 단추를 눌렀을 때 재생 ( http://hacks.mozilla.or.kr/2010/09/firefox-4-html5-video-preload/ ) : 위 내용은 간단히 말하면 사용자가 동영상을 재생하기 전에 내 컴퓨터에 다운을 시킬것인지 말것인지를 정하는 부분입니다. autoplay - 동영상을 자동 재생 loop - 반복 재생 횟수를 지정 controls - 컨트롤 막대를 추가 width, height - 넓이, 높이 HTML 5로 어떻게 <video>를 삽입해야 하는가? <video width="300" height="300" autoplay controls poster="astralps.gif"> <source type="video/mp4" src="astralps.mp4"> <source type='video/ogg: codecw="theora, vorbis"' src="astralps.ogv"> </video> 넵 이렇게 하시...

자세한 내용 보기

[HTML5] HTML5 기초 : 의미가 변경된 TAG

11/12/2012

태그들의 의미가 기존에 알고 있던 부분에서 추가 되거나 변경된 부분들입니다. 대부분 우리가 알고 사용하던 부분에서 조금씩 가감이 있다고 생각하면 됩니다. a를 좀더 넓은 범위에서 사용할 수 있게 된 점과 글자에 대한 강조부분 메뉴부분이 눈에 띄네요. a - href 속성없이도 사용할 수 있습니다. 그리고 a요소 안에 버튼과 같은 상호작용하는 요소가 없으면 전체 문단, 리스트, 표, 섹션 등을 모두 포함할 수 있습니다. address - address요소는 이제 실제 주소가 사용되는 곳에만 적용이 됩니다. b - 단순히 진하게 표시하려고만 할 때 사용합니다. 진하면서 강조하고 싶으면 그대로 strong를 사용하시면 됩니다. hr - Html5이전에는 단순히 선을 긋는 의미였지만 Html5에서는 컨텐츠가 경계, 주제가 바뀔 때, 문단, 단락을 나눌 때 사용하시면 됩니다. 이는 지금 여러사람들이 웹표준으로 혹은 접근성으로 마크업하고 있는 방법이니 쓰시던 분은 편하실 듯. i - 단순히 텍스트를 기울어지게 표현하는 것을 떠나서 주변의 텍스트들과는 정보가 있다는 의미로 사용하시면 됩니다. strong보다는 덜 한 강조의 의미. label - 클릭했을때 위치가 이동하는 녀석으로도 사용하는데 이제는 플랫폼 수준에서만 표준으로 사용합니다. menu - 이전 html버전에서는 사용하지 않도록 권고되어 사용하지 않았었는데 Html5에서는 실제문서 메뉴 정보를 제공할 때 사용합니다. small - 세부 주석이나 법적 인쇄 문서에서 작은 인쇄 정보를 표시할 때 사용합니다. strong - '너 중요해!' 할 때 * 실전 HTML5 가이드 외 참조

자세한 내용 보기

[HTML5] HTML5 기초 : 추가된 TAG

11/12/2012

Html5는 시맨틱 마크업(Semantic Markup)을 할 수 있도록 기존보다 좀더 의미가 담겨있는 새로운 태그들을 지원하고 있습니다. 예전에 세미나에서 들었던 이야기로는 이러한 태그들을 만들때 기존에 사용자들이(여기선 개발자나 퍼블리셔등이 되겠지요) 각 컨텐츠에 대해 어떠한 Class나 ID를 쓰는지 조사하고 적용했다는 소문이 있더군요. section - 일반적인 문서나 애플리케이션 영역을 표시합니다. 섹션의 제목을 나타내는 h_n와 함께 사용할 수 있습니다. article - 뉴스 기사나 블로그 글 같은 독립적인 콘텐츠를 표시합니다. aside - 문서의 주요 부분을 표시하고 남는 사이드 바 콘텐츠를 표시합니다. hgroup - 제목과 그에 관련된 부제목을 하나로 묶습니다. header - 헤더 부분으로 , 사이트 소개나 내비게이션 등을 표시하기도 하고 내용 중간에서는 머리글 역할을 하기도 합니다. footer - 푸터 부분을 표시합니다. 사이트 제작자나 저작권 정보 등을 나타낼 때 주로 사용합니다. nav - 사이트 안의 내비게이션 요소를 표시합니다. figure, figcaption - 그림이나 비디오 같은 멀티미디어 콘텐츠에 갭션을 붙이려고 할 때 사용합니다. audio, video - 멀티미디어 콘텐츠를 표시합니다. 애플리케이션 개발자들이 사용자 인터페이스를 직접 만들 수 있는 API를 제공합니다. embed - 플러그인 콘텐츠를 표시합니다. mark - 텍스트에 형광펜으로 칠한 것과 같은 강조 효과를 만듭니다. progress - 시간이 걸리는 작업과정을 막대로 표시합니다. meter - 측정값을 표시합니다. time - 날짜나 시간을 표시합니다....

자세한 내용 보기

[HTML5] HTML5 기초

11/12/2012

html5 스터디에 앞서서 조금씩 기초 정보와 자료들을 올려볼까 합니다. 스터디 할때 각각 조사해서 정리해오는 방법을 할까 생각도 해봤지만 어차피 저도 정리하고 공부해봐야 하는 상황이라서 여기다가 올리면서 할게요^^. 대충 진행하고자 하는 순서는 입문 -> 태그 -> 기초 마크업 중간중간 정보들 이런 순으로 글을 올려볼 생각인데요. 요즘 한가해서 시작하는 거라서 갑자기 한동안 올라오지 않는다던가 한다면 바빠서 그렇구나'ㅁ')/ 보다는 또 술병이 들었구나 생각하시면 됩니다..-ㅁ-); <!DOCTYPE html> <html> <head> <title>Sample page</title> </head> <body> <h1>Sample page</h1> <p>This is a <a href="demo.html">simple</a> sample.</p>  </body> </html> html5 문법은 웹 브라우저가 표준 모드로 렌더링을 할 수 있도록 맨 상단에 DOCTYPE을 지정해줘야 합니다. html5는 대소문자를 구별하지 않기 때문에 doctype를 소문자로 사용하셔도 상관이 없습니다. html5는 대소문자를 구별하지 않기 때문에 마크업시에 관례 혹은 편하게 보기 위해서 대소문자를 모두 사용하셔도 상관없습니다. 하지만 xml은 대소문자를 구분하기 때문에 html5와 xml에 모두 유효한 문서를 만들길 원하시면 구별하셔서 소문자를 사용하시길 권장드립니다. (그냥 지금까지 xhtml에서 해왔던 것처럼 DOCTYPE는 대문자로 해주시고 마크업은 소문자로 하시면 됩니다.=ㅁ=) 이런식으로 간단히 쭉 올릴 생각입니다. 틀린 부분들 있거나 한다면...

자세한 내용 보기

[JS, HTML5, JQuery] 유용한 정보

11/12/2012

[ Javascript 관련 ] http://blog.naver.com/seogi1004/110110498345 - JS Tip & Tech (1), OOP 기초 http://blog.naver.com/seogi1004/110110870056 - JS Tip & Tech (2), 프로토타입 http://blog.naver.com/seogi1004/110111378492 - JS Tip & Tech (3), 상속 http://blog.naver.com/seogi1004/110111856643 - JS Tip & Tech (4), 콜백 함수 http://blog.naver.com/seogi1004/110112955634 - JS Tip & Tech (5), 프레임워크 구현 http://blog.naver.com/seogi1004/110117013902 - JS Tip & Tech (6), 프레임워크 구현 심화 http://blog.naver.com/seogi1004/110120770472 - JS Tip & Tech (7), 클로저 [ HTML5 관련 ] http://blog.naver.com/seogi1004/110095812775 - HTML5 Tip & Tech (1), 기초 http://blog.naver.com/seogi1004/110096142093 - HTML5 Tip & Tech (2), Drag & Drop http://blog.naver.com/seogi1004/110096740941 - HTML5 Tip & Tech (3), Web Database http://blog.naver.com/seogi1004/110098886402 ...

자세한 내용 보기