태그사용자와 상호 작용을 위해서 사용자로부터 데이터를 입력 받아 서버로 전달하기 위한 입력양식(폼)을 제공한다.다양한 형태의 데이터를 입력받기 위한 요소들을 담는 컨테이너 역할을 수행한다.사용자 데이터 입력입력된 데이터 서버로 전달 전달 받은 데이터 서버 스크립트를 이용하여 처리결과 웹페이지 형태 사용자에게 전달 항목1 항목n form 태그의 속성속성설명action="URL"폼이 제출될 때 폼 데이터를 전달받아 처리할 페이지의 주소(경로)를 지정method="전송방식"폼 데이터를 제출 할 때 사용하는 HTTP 방법(get, post)을 지정name="이름"폼의 이름을 지정accept-charset="인코딩"폼 제출을 위해 사용되는 문자 인코딩..
프로그래밍언어/HTML
HTML 문서에서 오디오 재생HTML 문서에서 비디오 재생 및 자막 처리HTML5에서는 오디오와 비디오의 재생을 위해 audio요소와 video요소가 추가되어 외부 플러그인 설치 없이 구현 할 수 있게 됐다.HTML5 이전까지는 enbed 요소나 object 요소를 사용해 왔다.audio 요소오디오 재생사용방법 : 웹브라우저에서 지원하지 않을 경우 대체해서 표시 될 텍스트나 이미지 태그의 속성속성설명autoplay웹 문서 로딩 시 오디오 자동 재생할지 여부를 지정controls오디오 제어기(재생, 일시정지, 볼륨 등)의 표시 여부를 지정지정되지 않을 경우 화면에 아무것도 표시되지 않는다.loop오디오 반복 재생 여부를 지정muted음소거 여부를 지정preload="속성값"웹 문서가 로딩 될 때 오디오의 ..
테이블 태그의 필요성테이블 관련 태그의 종류와 기능 이해테이블 관련 태그와 속성 사용해서 원하는 테이블 생성 가능테이블 기본형식표 제목제목1제목2내용내용 표 제목 제목1 제목2 ... 내용 내용 ... ... 태그태그 설명태그 관련 속성테이블 정의 태그border="테두리 두께"테이블의 행(table row), 나 태그의 부모태그로 혼자서만 사용 할 수 없다. 테이블의 표준 셀(table data), 태그의 자식태그로 왼쪽 정렬이 기본 값이다. 테이블의 헤더 셀(table header), 태그의 자식태그로 내용은 굵게 가운데 정렬이 기본 값이다. 테이블의 제목으로 테이블 상단에 위치한다. 시작태그의 바로 다음에 사용하고, 테이블 바로 위에 진하게 가운데 정렬로 표시된다.CSS의 속성 ..
HTML에서 그림과 링크 표현img 태그 관련 속성 활용a 태그를 다양한 유형의 콘텐츠에 활용1. 이미지 삽입img 태그는 웹 문서에 이미지를 삽입하고 시작태그만 사용한다.는 인라인 요소로 줄바꿈을 위해서는 을 사용한다.src="이미지파일경로" : 문서에 표시할 이미지 파일 경로 지정html문서와 동일 폴더에 있는 경우 : "파일명.확장자명"절대경로의 경우 : "절대경로\파일명.확장자명"상대경로의 경우 : "현재 작업 위치 기준 상대경로\파일명.확장자명"GIFJPGPNGGraphics Interchange Format256개 색상 지원투명배경 처리 지원용량이 작음애니메이션 지원로고나 클립 아트 형태의 이미지에 적합Joint Photographic coding Experts Groups트루컬러 지원압축률이..
HTML에서 텍스트 표현 글자와 텍스트를 표현하는 다양한 HTML 태그를 활용 목록 지정과 관련된 태그 활용 div와 span태그의 기능 차이 이해하고 활용 1. 주석 사용 방법 : 주석 사용 이유 : 웹브라우저 화면상에는 표시 안됨, 차후에 코드의 이해 및 유지 보수의 편리를 위해서 사용 주석 주의 사항 : 주석 안에서 , -- 와 같은 기호 사용 불가 2. 텍스트 표현 br : 줄바꿈 태그. 종료태그 없음. forced line break. p : 단락을 나누는 태그로 단락 전후에 줄바꿈 효과. 연속사용시 한 번만 적용. paragraph. 공백 및 특수 문자 입력 : &특수이름;, 
진수코드;, 진수코드; 특수문자 특수이름 아스키코드 > > > & & & & " " " " 공백 © ©..
1. HTML이란?HyperText Markup Language는 웹 또는 월드와이드웹(WWW)에서 사용하는 마크업 언어하이퍼텍스트(HyperText)단위 텍스트들과 이것들을 결합하는 링크로 구성되는 텍스트로 링크를 통해 다른 텍스트에 대한 참조가 가능비연속적 구조 : 사용자가 연상하는 순서에 따라 이동하여 정보를 얻도록 조직화 된 시스템구성하는 정보의 형태들이 멀티미디어화 되는 추세로 텍스트 이외의 정보형태들이 제공되는 경우 하이퍼미디어라고 부른다마크업태그(tag) : 문서의 논리적인 구조를 정의, 출력 시 보이는 모양에 대한 정보를 부여의미적 마크업 : 문서 내용의 의미를 정의 - 제목, 저자명, 작성일 등구조적 마크업 : 문서의 논리적인 구조를 정의 - 문단, 그림, 표, 여백 등양식적 마크업 : ..
시맨틱(semantic) 태그 시맨틱태그의 의미 '의미를 가진다' 각 태그가 스스로 의미를 가진다 시맨틱태그가 필요한 이유 1. 접근성을 높이기 위해서 : 소스 코드만으로 본문, 제목 등 해당부분을 쉽게 파악 할 수 있다. 2. 문서 구조를 정확하게 나눠 놓으면 여러 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽다. 3. 검색엔진에 본문에 맞는 키워드가 알맞게 상위노출 될 수 있다. 주요 시맨틱태그 1. : 특정 영역의 머릿말로 사이트소개, 메인메뉴(상단메뉴), 사이트로고 등의 부분이다. 주로 맨 위쪽이나 왼쪽에 위치한다. 2. : 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다. 보통 상단메뉴와 연결하는 사이트의 메뉴(좌측) 부분으로 헤더나 푸터, 사이드 바 안에 ..
HTML기본구조 HTML 문서의 특징태그 내부에 또 다른 태그를 사용 할 수 있다. 태그는 대소문자 구분이 없다. 파일저장시 확장자명은 ~.html or ~.htm 태그 내부에 속성을 사용 할 수 있다. 속성으로 태그의 자세한 설정을 줄 수 있다. html문서에 문자, 이미지, 동영상, 음악파일도 올릴 수 있다.HTML 태그들내용 제목 1~6 숫자에 따라 작은 제목 줄바꿈(엔터) 단락구분(엔터2번) br, p태그를 사용하지 않아도 띄어쓰기 줄바꿈 적용 선 긋기 굵게 이탤릭체(기울림) 이탤릭체(기울림) 글씨밑줄 형광펜 가운데 위치 글꼴 크기 색깔 이미지에 대한 설명글 하이퍼링크 순서없는목록 순서있는목록 빈칸(공백으로 데이터갯수 표시)***************************..
본문에서 제일 중요한 제목태그 숫자가 커질수록 덜 중요한 제목태그 본문에서 세번째 큰 제목태그 본문에서 네번째 큰 제목태그 본문에서 다섯번째 큰 제목태그 본문엣 제일 덜 중요한 제목태그 글씨 두껍게 해주는 태그 글씨에 밑줄 쳐주는 태그 단락을 나눠주는 태그 줄 바꿔주는 태그 이미지삽입 태그 src="이미지파일이름" width="이미지크기" 링크첨부 태그 href="링크주소", 새탭으로열래 target="_blank", 툴팁표시 title="툴팁표시" li 목록 태그 ul은 목록 묶어주는 태그(번호없이) li 목록 태그 ol 목록 묶어주는 태그(번호표) : head태그와 body태그를 묶어주는 최고위층 태그 : 웹페이지 본문을 설명해주는 태그들을 묶어주는 태그 : 웹페이지의 제목태그 : 데이터를 설명해주는..
내가 원하는 기능들을 직접 구현하기에는 HTML만으로는 불가능하다. 데이터베이스를 활용해서 백엔드의 기술로 구현해한다. 그마저도 여러가지 예외상황들을 추가해야 하기 때문에 직접 구현하기 힘들다.채팅, 댓글, 방문자분석 같은 웹사이트에서 많이 사용하는 기능들은 이미 만들어 놓은 것들을 가져다가 문서에 포함시키면 된다. 그외의 기능들도 이미 다른 개발자들이 만들어서 무료소스로 공유하고 있는 것들이 많으니 검색해서 활용 하도록 하자. 동영상 삽입유튜브 동영상 삽입하는 2가지 방법1. 원하는 유튜브 영상화면 우클릭 - 소스코드 복사 - 원하는 곳에 붙여넣기2. 유튜브 영상 화면 밑부분 공유하기 클릭 - 퍼가기 클릭 - 소스코드 복사 - 원하는 곳에 붙여넣기 댓글 기능 추가- DISQUS, LiveRe 같은 사이..
