본문 바로가기

Front/HTML

 (15)
[HTML] HTML<audio> 오디오올리기, audio태그와 속성 태그는 소리를 삽입할 수 있는 태그로 source태그와 src속성을 이용하여 좌표를 지정해준다. video 태그를 삽입할 때와 비슷하다. AUDIO태그의 속성 src : 오디오 파일의 주소 controls : 컨트롤러 표시 autoplay : 자동 재생 loop : 반복 재생 width : 가로길이 height : 세로길이 muted : 음소거 type : 타입 지정 (오디오 파일의 맞는 타입을 선언해 두는것을 권장) 예제 예제 코드
[HTML] HTML <video> 동영상올리기, video태그와 속성 태그는 동영상을 삽입할 수 있는 태그로 source태그와 src속성을 이용하여 좌표를 지정해준다. 이미지 태그와 같은 방식으로도 표현할 수 있다. 비디오 태그에 사용하는 속성 src : 비디오 파일의 주소 controls : 컨트롤러 표시 autoplay : 자동 재생 loop : 반복 재생 muted : 음소거 poster : 영상의 첫화면 이미지로 표시할 사진 지정 (썸네일 지정) poster 사용법 예제
[HTM] HTML <img> 이미지올리기, img태그와 속성 는 이미지를 삽입할 수 있는 태그로 src속성으로 좌표를 지정해준다. 빈속성으로 닫는 태그가 따로 없다. IMG태그 사용법 속성의 종류 src (이미지의 좌표) / source alt (대체 텍스트, 이미지에 대한 설명이며 이미지가 에러로 인해 출력되지 않을 시 alt 값 출력이며 구체적으로 표기해두는것을 권장) /alternative width (이미지의 가로 길이) height (이미지의 세로 길이) 위와 같이 img 태그를 태그로 감싸 이미지 링크를 만들 수 있다. 임의의 사진 출력 실습 코드샘플
[HTML] HTML5 콘텐츠 모델 HTML5는 태그를 특성에 따라 Metadata, Flow, Sectioning, Heading, Phrasing, Embedded, Interactive 총 7개의 카테고리로 분류한다. 위의 이미지처럼 서로 겹치는 태그는 서로 간의 특성을 두루 갖고 있는 태그이다. 1. 메타데이터 콘텐츠 (Metadata Content) 메타 데이터는 데이터를 설명하는 데이터이다. 문서의 표현이나 동작을 설정하거나, 다른 문서와의 관계를 설정하고, 다른 문서에 정보를 전달한다. Head 영역 안에서 선언한다. , , , , , , , 2. 플로우 콘텐츠 (Flow Content) 본문(body태그) 안에서 사용되는 콘텐츠, 내용을 뜻하며 대부분의 콘텐츠를 포함하고 있다. Body 영역 안에서 선언한다. 3. 구획/섹션..
[HTML] HTML 엔터티 (Entity, Escape) HTML에서는 이미 문법적인 용도로 사용되고 있어서 특정 문자를 표기하지 못하는 경우가 있다. 예를 들어 텍스트에서 '' 기호를 사용하는 경우 태그로 인식되어 브라우저에서 출력 못하는 것 그래서 그 문자를 Entity 기능을 이용하여 출력을 한다. 자주 사용하는 HTML 엔터티 Result Description Entity Name Entity Number 띄어쓰기 $#160; 크다 > $#62; & 앰퍼샌드(AND) & $#38; " 큰따옴표 " $#34; ' 작은따옴표 &apos; $#39; ¢ 센트 ¢ $#162; £ 파운드 £ $#163; ¥ 옌 ¥ $#165 € 유로 € $#8364; © copyright(저작권) © $#169 ® Registered trademark symbol 등록된 상표 ..
[HTML] HTML 텍스트 익혀보기 (위키백과의 HTML5 문서 만들어보기) 태그의 기능들은 w3schols.com의 HTML Tutorial을 통해 알아보며 codepen.io 사이트를 통해 출력 화면을 보며 실습해본다. 위키백과에 HTML5를 검색해서 윗 부분을 작성해보자. 제목 작성하기 우선 문서의 첫 부분에 HTML5라는 큰 굵은 글씨는 제목(heading) 태그 이다. 제목(heading) 태그 : h 수준(Leve) : 1 ~ 6 h1 ~ h6 : h1(큰제목), h6(작은 제목) -숫자가 커질수록 작은 수준의 제목이 된다. 그리고 제목 밑의 구분선 태그는 단락 태그에서 찾을 수 있다. 구분선 표시 태그 : hr / Horizontal Rules (Empty Elementy) * 구분선 표시 태그는 빈 태그로 종료 태그가 없음 구분선이 잘 추가됨 본문 내용 작성하기 구..
[HTML] HTML 기본 (정의, 요소, 빈요소, 구조, DOCTYPE, 속성) w3schols.com의 Learn html 기반으로 작성 HTML의 정의 HTML : Hyper Text Markup Language 하이퍼 텍스트 : 하이퍼링크를 포함해서 순차적으로 구성되지 않고 링크 연결 중심으로 구성된 문서 마크업 : 콘텐츠 영역을 표시함 HTML의 요소 (Element) HTML은 웹 페이지의 구조를 표현 HTML은 Element로 구성 (Element는 콘텐츠 영역을 표시하는 도구(표식) Element 표식은 브라우저에서 콘텐츠 종류를 알려주는 역할 : "이것은 ~콘텐츠이다" 요소(HTML Element) : 콘텐츠를 시작 태그와 종료 태그로 그루핑 하는 구성 예) 제목 여기서 종료 태그를 쓰지 않아도 일부 태그들은 정상출력이 되나 예기치 않은 오류를 방지하기 위해서는 종료태..

티스토리툴바