본문 바로가기

분류 전체보기

 (189)
[HTML] HTML 주석 (단축키) HTML주석 코드를 작성할 때 개발자가 볼 수 있도록 소스의 설명이나 혹은 후에 다시 사용하기 위한코드들을 동작에 반영되지 않게 할 수 있다. 안에 감싸는 것으로 주석처리는 완료된다. 단축키 단축키 : ctrl + / 다른 IDE에서도 통용되는 단축키이므로 기억해두자 위 내용을 주석처리하게되면 이와 같이 출력이 되지 않는다.
[HTML] HTML YOUTUBE 동영상 올리기 (iframe 태그, 루프, 자동재생, 뮤트) 유튜브 동영상을 첨부하기 위해서는 iframe태그를 사용하여야 한다. 예시태그 유튜브에서는 이 기능을 제공하고 있어 편하게 퍼갈 수 있다. 영상의 공유버튼을 누르고 퍼가기 버튼을 클릭 위 소스코드를 복사해서 사용하고자 하는 곳에 붙여넣으면 된다. 예시 여기서 직접 수정하여 기능을 추가하고자 한다면 기존 유튜브 링크 주소 맨 뒤에 ?을 붙이고 속성을 추가해주면 된다. 여러 속성을 추가할 때에는 & 기호를 사용하자. https://www.youtube.com/embed/kamsx_g2hnI?mute=1&autoplay=1 iframe의 속성 src : 삽입 할 홈페이지 좌표 name : 프레임 이름 width : 프레임 가로 너비 height : 프레임 세로 길이 srcdoc : 직접 태그소스를 iframe..
[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) * 구분선 표시 태그는 빈 태그로 종료 태그가 없음 구분선이 잘 추가됨 본문 내용 작성하기 구..

티스토리툴바