MUMYEONG

비디오(Video)태그 HTML5 이후에 도입된 video태그를 사용하여 웹 페이지에 비디오를 삽입할 수 있다. 1) controls 속성 비디오의 재생 도구를 표시해준다. 2) autoplay 속성 비디오 파일을 자동재생시켜준다. 3) width 속성 비디오의 너비를 지정한다. 4) height 속성 비디오의 높이를 지정한다. 5) src 속성 비디오 파일의 경로 지정한다. 6) type 속성 비디오 파일의 유형과 확장자를 지정한다. 코드 결과

목록(List)태그 웹페이지에서 내용을 일렬로 나열하거나 목록 형태로 지정하기 위해 사용한다. 웹페이지에서 내비게이션 바를 만들 때 주로 사용한다. 리스트의 종류에는 순서가 없는 목록(ul)과 순서가 있는 목록(ol) 태그가 있다. ol태그는 속성을 통해 순서타입을 변경할 수 있다. 1) ul(순서가 없는 목록) 코드 호랑이 사자 늑대 표범 치타 결과 2) ol(순서가 있는 목록) 코드 고래 돌고래 상어 물개 바다표범 결과 3) 중첩 목록 태그 코드 육상동물 호랑이 사자 늑대 표범 치타 바다동물 고래 돌고래 상어 물개 바다표범 결과 4) 속성(type) 모음 1 : 숫자(기본값) A : 알파벳 대문자 a : 알파벳 소문자 I : 로마숫자 대문자 i : 로마숫자 소문자 코드 숫자 숫자 숫자 알파벳(대) 알..

이미지태그 웹페이지에 이미지를 삽입하는 경우에 사용한다. 1) src 속성 이미지 파일의 경로 또는 URL을 넣는다. 2) alt 속성 이미지 파일이 없을 경우 표시된다. 3) width 속성 이미지의 너비를 지정한다. 4) height 속성 이미지의 높이를 지정한다. 코드 결과(이미지가 있는 경우) 결과(이미지가 없는 경우)

앵커(anchor)태그 브라우저 내의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 지정할 때 사용한다. 1) href 속성 이동하고 싶은 파일 또는 페이지의 위치(경로)를 값으로 넣으면 지정한 목적지로 이동할 수 있다. 웹페이지의 경우 아래의 예시처럼 웹사이트URL(https://thkim0627.tistory.com/)을 값으로 넣는다. 2) target 속성 _self : 링크를 클릭했을 때 웹페이지를 현재 탭에서 이동(기본 값) _blank : 링크를 클릭했을 때 웹페이지를 새로운 탭에서 이동 코드 티스토리: 태형이야기 (현재 탭에서 이동) 티스토리: 태형이야기 (새로운 탭에서 이동) 결과 이동 결과

본문(main text)태그 1) p 단락 (Paragraphs) 즉, 하나의 문단을 지정한다. 줄바꿈 없이 브라우저에 표시된다. 코드 Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt odio deleniti doloremque nobis nesciunt provident harum eum aliquid a quibusdam. Amet, cupiditate magnam maxime id optio tempore sequi animi error? 결과 2) pre 태그 내의 작성된 내용은 그대로 브라우저에 표시된다. 코드 Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt..