본문 바로가기

소프트웨어/HTML+CSS

(13)
HTML5 5번째 - 멀티미디어 plug-in : 웹 브라우저에서 처리할 수 없는 작업을 위해 웹 문서 안에 포함시킨 외부 프로그램 기능 .data 속성 : 외부 파일 경로 지정 .type 속성 : 내용의 유형 지정 태그 - 외부 파일 삽입하기 . .닫는 태그 없으며, 태그를 지원하지 않는 이전 브라우저에서 사용 멀티미디어의 웹 표준화 웹에서 지원되는 비디오/오디오 파일 종류 종류 확장자 설명 비디오 mp4 고화질 영상 지원, 많은 사이트에서 사용, 라이센스있어 웹 용 제외 유료 webm 화질 우수, 무료 제공 ogv 화질 떨어짐, 무료, webm 전 많이 사용 오디오 mp3 대부분의 음원 사용, 라이센스 유료 ogg 무료이므로 게임에서 많이 사용 인코딩(encoding) : 원본 비디오를 압축해 컴퓨터용 비디오 파일로 변환 디코딩(d..
HTML5 4번째 - 시맨틱(semantic) 태그 HTML4에서 태그의 id 속성으로 문서 구조 정리하여 사람마다 차이 존재, 화면 낭독기나 검색 엔진 구별 어려움 HTML5에서 웹 문서 레이아웃을 표준화하는 태그를 추가, 이 태그를 시맨틱 태그(semantic tag) 라고 함 태그 - 머리말 지정하기 .주로 페이지 맨 위쪽이나 왼쪽에 삽입 . 태그 사용하여 검색 창 . 태그 사용하여 사이트 메뉴 . 태그 안에서 사용 태그 - 문서를 연결하는 내비게이션 링크 .동일한 사이트 안의 문서나 다른 사이트의 문서 연결 링크 .내비게이션 메뉴, 푸터에 있는 사이트 링크 모음 사용 .위치 영향 받지 않아 독립 사용도 가능 태그 - 주제별 콘텐츠 영역 나타내기 .문서에서 콘텐츠 영역을 나타냄 .주제별 묶을 때 사용하며 ~ 태그 함께 사용 . 내 넣기도 함 태그 -..
HTML5 3번째- 폼 관련 태그 form은 웹문서에서 자주 사용되고 있습니다. 로그인 창이 대표적인 예입니다. 태그 - 폼 만들기 . 여러 폼 요소 속성 설명 method 사용자가 입력한 내용들을 서버에 어떻게 넘겨줄지 지정 속성값 get - 길이 제한, 주소 표시줄에 입력 내용 그대로 나타남 post - 길이 제한 없음, 표준 입력 방식, 입력 내용 드러나지 않음 name 폼의 이름을 지정, 여럼 폼들을 구별하기 위해 사용 action 태그 안의 내용들을 처리해 줄 프로그램 지정 target 태그에서 지정한 파일을 현재 창이 아닌 다른 위치에 열도록 지정 autocomplete 속성- 자동 완성 기능 .개인정보, 인증번호 입력 시 autocomplete="off" 하여 사용 태그 - 폼 요소에 레이블 붙이기 .입력 창 옆에 붙여 놓은..
HTML5 2번째 - 이미지와 하이퍼링크 이미지 태그 웹에서 사용하는 이미지 형식 파일 형식 설명 GIF 색상 256가지 한계, 파일 크기 작음, 주로 아이콘이나 불릿 투명한 배경이나 움직이는 이미지 생성 장점 JPG/JPEG 다양한 색상과 명암 표현 PNG 투명 배경 및 다양한 색상 표현, 네트워크용으로 개발됨 최근 많이 사용 태그 - 이미지 삽입 . src 속성 - 이미지 파일 경로 지정 .로컬 PC 내 이미지 파일 경로 지정 : 웹 문서 파일 위치 기준 .'/' - 하위 폴더, '..' - 상위 폴더 .웹 상의 링크를 복사해 이미지 경로 지정 : 이미지 주소 복사 alt 속성 - 이미지를 설명해 주는 대체 텍스트 .화면 낭독기에서 이미지에 대한 설명글로 읽음 .연결 속도나 제대로 이미지 표시가 안될 경우 alt 속성 내용 표시 .그래픽으로..
HTML5 1번째 - 텍스트 관련 태크 블록 레벨 태그 태그 - 제목 표시하기 .~ 까지 사용 가능 . 부터 가장 크게 표시 = 부터 가장 크게 표시 태그 - 단락 만들기 .'단락' 이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리 .브라우저 창의 너비보다 줄이 길어질 경우, 자동 변경 태그 - 줄 바꾸기 .브라우저 창에서 줄바꿈 하려면 해당 위치에 사용 .닫는 태그 없음 태그 - 수평 줄 넣기 .텍스트 단락의 주제가 바뀔 때 사용 .CSS 이용하여 가로선 없앨 수 있음 태그 - 인용문 넣기 .인용한 문장은 다른 텍스트보다 안으로 들여 써지므로 구별됨 .사이트 주소가 명확한 경우, cite 속성을 이용해 인용 사이트 주소를 표시할 수 있음 태그 - 인용문 넣기 태그 - 입력하는 그대로 화면에 표시하기 .많은 공백을 넣어도 브라우저에서는 한 개의 공백만..