본문 바로가기

HTML+CSS+Javascript30

5. 미디어 삽입 기존 버전의 HTML과 다르게 HTML5에서는 별도의 플러그인 없이 오디오와 비디오를 재생할 수 있게 되었다. 이를 가능하게 해주는 것이 와 태그이다. -태그 비디오 플레이 브라우저가 video태그를 지원하지 않습니다. (controls 속성에 의해 비디오 제어 버튼이 출력되고, autoplay 속성에 의해 비디오는 바로 재생된다.) video 내부에 입력한 텍스트는 이 태그를 지원하지 않는 브라우저일 시 출력된다. video 태그에 이용되는 속성은 다음과 같다. width, height : 너비와 높이를 조절하는 속성. 생략하면 비디오 원본 크기로 재생된다. controls : 비디오 제어 버튼을 출력하는 장치 autoplay : 비디오 로딩 즉시 재생 loop : 반복 재생 muted : 오디오를 끌.. 2020. 3. 4.
4. 인라인 프레임 -태그 태그는 HTML페이지 내에 내장 윈도우를 만들고 다른 HTML 페이지를 출력할 수 있도록 하는 태그이다. 이렇게 태그를 이용해서 내장된 윈도우를 인라인 프레임이라고 한다. 인라인 프레임의 간단한 예시는 다음과 같다. 두 개의 iframe을 추가 태그 역시 웹서버와 연결되어있어야 한다. 속의 src 속성에 url을 입력하면 다른 사이트와 연결이 가능하다. (iframe으로 연결되지 않는 사이트도 있다.) 2개의 IT전문 사이트 가져오기 iframe에 name 속성을 이용해서 이름을 지칭하는 것도 가능하다. 이 name 속성과 태그를 학습할때 이용한 target 속성을 이용하면 두 개의 인라인 프레임을 이용하여, 왼쪽에서 링크를, 오른쪽에서 링크에 해당하는 페이지를 출력하는 것도 가능하다. -윈도우 .. 2020. 3. 3.
3. 하이퍼링크 - 태그 하이퍼링크로 이동하는 HTML 페이지의 url은 a태그의 href속성으로 지정한다. 화면상에는 와 사이의 텍스트 혹은 이미지가 출력된다. 하이퍼링크 만들기 네이버 -target속성 a에 사용할 수 있는 속성 중에서 target 속성에 따라 브라우저의 열리는 형식이 달라진다. _blank : 새 윈도우 _self : 현재 윈도우 _parent : 부모 윈도우 _top : 전체 브라우저 윈도우 네이버 구글 유튜브 페이스북 - 앵커 본문에서 id 속성을 부여해 앵커 이름을 지정하면, 그 부분에 앵커가 만들어진다. 이 앵커는 #앵커이름 형식으로 연결해서 하이퍼링크를 만들 수 있다. a 태그의 앵커이동 만들기 Love me tender Can't help falling in love It''s now o.. 2020. 3. 3.
2. 고급 문서 만들기 1. 태그 태그는 html 문서 내에 이미지를 참조하는 태그이다. 이 때, 이미지를 지정하는 속성은 src로, 이미지의 경로를 지정하여 이미지를 참조한다. alt 속성은 이미지가 보이지 않을때, 보이지 않는 이미지를 텍스트로써 설명해주는 속성이다. 앨비스 프레슬리의 사진입니다. 이미지의 경로를 지정하는 방식은 크게 세가지(상대경로, 절대경로, url)로 나뉜다. 상대경로는 해당 html파일이 있는 위치를 기준으로 경로를 지칭하는 방식, url 방식은 인터넷에 있는 이미지 파일의 경로를 가져오는 방식(마우스 오른쪽 클릭 -> 이미지 주소 복사로 링크 가능) 절대경로는 html 파일의 위치와 관계없이, 이미지의 경로를 전부 기입하는 방식이다. 이미지의 상대경로,url&절대경로 상대경로: URL 방식: 절대경.. 2020. 3. 3.
반응형

티스토리툴바