Jaybon 의 지식창고

html5.0이라는 뜻이다.

폼 태그

사용자 입력을 위한 HTML 양식을 만드는 데 사용

입력 컨트롤을 선언하기 위해 form 요소 내에서 사용됨

<input> <textarea> <button> 등

accept_charset 입력 데이터에 사용될 문자 인코딩 (utf-8 등)

action 입력데이터의 전달 위치를 지정

method 입력데이터의 전달 방식을 선택

enctype 입력데이터를 서버에 보낼 때 인코딩 할 방법을 지정(method속성을 post로 할때만 사용가능)

name 입력데이터의 form 양식의 이름을 지정

novalidate 입력데이터 전달 시 데이터의 유효성 감사를 하지않음

target 데이터 전달 후 서버 응답을 표시할 위치 지정

폼태그 전달 순서

폼이 있는 웹페이지에 내용입력

->폼 안에 있는 모든 데이터를 웹서버로 전송

->데이터 처리 위해 웹 프로그램 실행

->웹 프로그램이 폼 데이터 처리

->처리결과를 다른 html페이지 웹 서버로 전송

->사용자 브라우저에 전송

->브라우저는 받은 내용을 보여줌

input 태그

인풋 타입

html5 이전버전에서는 '플러그인'을 이용하여 미디어를 재생하였음.

예를 들어 '플래시 플레이어' 등이 있다.

하지만 html5에서는 이미지, 오디오, 비디오 태그 등의 미디어 기능을 자체 제공한다.

이미지태그

<img> 태그는 src, alt의 두 가지 필수 속성을 가짐.(src만 사용도 가능)

이미지를 선언한 태그는 참조된 이미지를 위한 공간을 생성하고

그 공간에 참조된 이미지를 참조할 수 있도록 링크 시킴.

<img src = "imgfile.jpg" alt = "이미지가 없을경우 설명" width = "" height = "">

이미지 태그의 속성

alt 이미지가 없을경우 설명

width, height 너비와 높이

src 이미지 소스 경로

이미지 태그 사용 예시 보기

오디오 태그 

xhtml5 에서의 태그

<audio src = "audiofile.mp3" controls = "controls" autoplay = "autoplay"></audio>

html5 에서의 태그 (파일과 MIME타입을 입력)

<audio controls loop autoplay>

    <source src =  "audiofile.mp3" type = "audio/mpeg">

    <source src =  "audiofile.ogg" type = "audio/ogg"> <!-- 위의 소스가 안될경우 -->

</audio>

오디오태그 속성

autoplay 자동재생

controls  음악 재생도구 출력 여부

loop 음악을 반복할지 여부

muted 음소거

preload 음악을 재생하기전에 불러올지 여부

src 음악파일의 경로 

비디오태그

비디오타입은 mp4 webm Ogg 등을 지원

webm ogg 는 익스플로러와 사파리에서 미지원

source 태그는 브라우저별 지원 가능한 비디오 파일 형식이 다르기 때문에 같은

비디오 파일을 지정하여 모든 브라우저에서 실행 가능할 수 있게 해줌.

xhtml5 에서의 태그

<video src = "videofile.mp3" controls = "controls" autoplay = "autoplay"></audio>

html5 에서의 태그 (파일과 MIME타입을 입력)

<video controls loop autoplay>

    <source src =  "videofile.mp4" type = "video/mp4">

    <source src =  "videofile.ogg" type = "video/ogg"> <!-- 위의 소스가 안될경우 -->

</video>

비디오태그의 속성

autoplay 자동재생

controls 재생도구 여부

width, height 비디오의 너비와 높이 지정

loop 비디오 반복재생 여부

muted 음소거 여부

poster 비디오를 준비중일때의 이미지 파일 경로 지정

preload 비디오를 재생하기 전에 모두 불러올지 지정

src 비디오파일의 경로

위 코드를 적용하면 아래 처럼 나옵니다.

<pre> 입력한 글 구성대로 출력 , 웹상에 코드 등을 올릴 때 활용.

<blockquote>인용문을 사용할 때 활용.

<b> <i> <small> <sub> <ins> <del>  글자형태 설정

<ol> <ol reserved> <ol start = "숫자"> <ol type ="1/a/A/I/i/disc/square/circle" start = "숫자"> 순서가있는 목록

<ul type = "square/circle"> 또는 <ul compact> 순서가없는 목록

<li type = "1/a/A/I/i/disc/square/circle"> 등등 <ol> <ul> 안에서 사용

<dl> 정의 목록을 선언할때 사용

<dt> 용어 제목

<dd> 용어에 대한 설명

<table> <caption> <clogroup> <tr> 행 <th>행의 타이틀 <td>열  테이블태그 (최근 표를 만들 때만 쓰이는 추세)

일단 윈도우키면 userinit이거 오류뜨고

배경화면만 나오죠?

그때

Ctrl + Alt + Del 눌르면 윈도우즈 작업관리자가 뜨는데요

작업관리자 왼쪽 위에 보면 파일(F) 탭이 있을건데

눌러보면 새작업(실행...)(N) 이라는 항목이 있는데

그걸 누르면 주소창 같은게 하나 떠요

거기다가 c:/ 라고 쳐주시면 오류메시지 하나뜨고

밑에 시작버튼이랑 배경화면에 아이콘들 다시 나타나는 것을

알 수 있을거에요

한번해보세요 ㅋ

아예 화면이 안움직이신다면 포멧 추천드립니다.

네이버 지식인에 올렸다가 블로그로 옮겨씁니다.^^

예전부터 기억력이 좋아지려면 마인드맵은 하라는 말이 있었죠?

하지만 손으로 무턱대고 그리기에는 마인드맵은 정말 복잡하답니다.

단계도 여러단계로 그려야 되고 말이죠.

그래서 컴퓨터 프로그램 마인드맵을 사용하는데 유료 프로그램이 많습니다.

하지만 이 프리마인드는 기능도 강력하면서도 무료 프로그램입니다.

프리마인드 설치 파일-[프리마인드다운받기]

   프리마인드를 실행 시킬려면 자바가 필요합니다. 깔려있으신분은 안깔으셔도됩니다.

프리마인드 설치 안되시는 분은 여기를-[자바다운로드]

완료 짜잔

.

.

프리마인드 실행 화면

프리마인드를 시작하면 이런화면이 뜨죠?

저 위에 메모장이 한글로 바꾸는 법이랍니다 저 경로로 따라가 한글로 바꿔봅시다.

환경설정

가장 위의 랭귀지에서 kr을 선택해봅시다. 

재시작

세이브를 누르면 재시작 합니다.

다시시작

다시 시작했나요? 그럼 이런 화면이 뜹니다. 뜨지 않을경우 파일에서 새파일을 엽니다.

사용하기

자주 쓰는 단축키들!

• Insert : 선택된 항목에서 하위항목을 만들때 쓰이는 단추입니다.
• F2 : 선택된 항목의 문자를 수정할 때 쓰이는 키입니다.
• Alt + Enter : 선택된 항목에서 문자의 색이나 크기를 조절할 때 사용하는 키 입니다. 문장이 길어서 두줄로 나눌 때도 이 키를 눌러서 들어간 다음 나누고자 하는 위치에서 Shift + Enter키를 누르면 됩니다.
• Delete : 선택된 항목을 지울 때 사용하는 키 입니다.
• 마우스 오른쪽 클릭 : 선택된 항목에서 마우스 오른쪽 클릭을 하면, 위에서 설명한 편집 항목 뿐만아니라 구름만들기, 이미지 추가, 하이퍼링크 등의 필요한 기능을 선택할 수 있는 창이 뜹니다.

마맵응용!

마인드맵에 insert를 한 후 그 가지를 클릭하고 저의 카테고리를 복사해서 붙여넣기를 해보았습니다.

하이퍼 링크까지 되니까 정말 편하군요. 가지를 반대편으로 움직이실려면 [지식]처럼 회색이 됬을때 드래그 하셔서

[새로운 마인드맵]의 왼쪽에다가  놓아보세요. 그럼 반대편으로 움직입니다. 

.

.

.