A sentimental robot

비디오 하나를 실행 시키려면 모든 브라우저가 지원하는 형식에 맞게 바꾸어야 했다. 하지만 유튜브 비디오는 그럴 필요가 없어서 용이하다. 유튜브에 원하는 비디오를 업로드한다. 비디오 아이디를 알아둔다. 내 웹 페이지에 태그를 선언한다. iframe 태그를 이용하는 것을 권장한다. src 속성 값을 내가 유튜브에 업로드한 비디오 주소값으로 한다. 너비와 높이를 설정한다. url 의 파라미터 값에 autoplay속성값이 1일 때 비디오가 로드 되었을 때 자동 재생한다. 기본 값은 0이다. loop =1 이면 비디오가 반복재생한다. 기본 값은 0이며 한번 재생한다. controls=0이면 비디오 설정이 나타나지 않는다. 기본 값은 1이다. *,태그도 유튜브 비디오를 담아둘 수 있었지만 이제 그렇게 쓰지 않는다...

플러그인은 브라우서의 확장성을 높인다. 그래서 Helper application이라고도 불린다. 플러그인은 지도를 보여준다거나 바이러스 검사, 은행 보안 시스템 등 다양한 곳에서 사용된다. .sfw 형식 뿐 아니라 .html, .jpeg 도 담을 수도 있다. 태그 태그와 같은 동작을 한다. 태그를 닫지 않는다.

HTML5 이전에 브라우저에서 비디오를 실행시키기 위해서는 flash같은 플러그인을 설치해야했다. HTML5에서는 비디오 태그로 웹 페이지안에서 비디오를 공식적으로 지원한다. 비디오 태그를 지원하는 브라우저로는 chrome 4.0 , explorer edge 9.0, firefox 3.5 , safari 4.0, opera 10.5가 있다. 태그 사용하기 Your browser does not support the video tag. Your browser does not support the audio element. 비디오/오디오 태그 안에 있는 controls 속성은 비디오 재생,중지,소리조절 같은 설정 기능을 조작할 수 있게 한다. 또한 비디오 태그에 너비와 높이를 설정해 두는 게 좋다. 너비와 ..

웹에서 사용되는 멀티미디어로는 소리, 음악, 영상, 애니메이션 등이 있다. 그럼 웹에서 멀티미디어를 어떻게 사용할 수 있는지 알아보도록 하자! 초기 웹 브라우저는 텍스트만 지원했지만, 요즘은 다양한 형태의 멀티 미디어를 지원한다. 하지만 어떤 미디어는 프로그램(plug-in)을 설치해야 사용자가 이용할 수 있기 때문에 유의해야한다. 멀티미디어 타입은 파일 확장자에 나타나 있다. 비디오 형식 MP4 (.mp4) : 인터넷 비디오의 새로운 형식이다. 유튜브에서 권장되며 Flash Players와 HTML5에서 지원한다. MPEG (.mpg) 모든 브라우저에서 지원하지만 HTML5에서는 지원하지 않는다. AVI (.avi) : 마이크로 소프트에서 개발, 비디오 카메라나 티비, 윈도우 컴퓨터에서는 작동하지만 웹..

HTML5에서 문자 인코딩 설정하기 HTML5에서 기본 문자 인코딩은 UTF-8이다. 문자 인코딩은 메타 데이터에서 정의할 수 있다. 스타일 시트에서 문자 인코딩을 정의할 때는 @charset "UTF-8"; URL 이란? URL(uniform resource locator)은 웹 주소이다. URL은 도메인이거나 ip주소이다. 브라우저는 url를 사용해 웹 서버에게 웹페이지를 요청한다. 웹 주소는 규칙을 따른다. scheme://prefix.domain:port/path/filename scheme - 인터넷 서비스의 타입을 정한다. 프로토콜;통신 규약 (http or https)을 뜻하며 HyperText Transfer Protocol , Secure HyperText Transfer Protocol..

태그는 사용자의 입력을 표현한다. 태그는 컴퓨터 시스템의 출력을 표현한다. 태그는 단편적인 컴퓨터 코드를 정의한다. 세 태그 모두 브라우저에서 monospace font로 보여준다. 태그는 변수를 정의한다. 수학적 표현이나 프로그래밍 코드에서의 변수를 표현하고 싶을때 쓸 것 같다.... (솔직히 이 태그 안쓰일듯)

반응형 웹을 만들기 위한 기초 다기지! 크기를 퍼센트로? 이미지의 너비를 100%로 준다면 이미지는 유연하게 된다. 뷰포트의 너비까지 맞춘다는 뜻. 그렇게 때문에 이미지가 원래의 크기보다 더 커질 수도 있다는 점을 주의해야 한다. 대신에 max-width를 100%로 주면 이미지 너비를 최대100%로 잡겠다라는 뜻. 이미지가 원래의 크기보다는 커질 일이 없다. 폰트 사이즈 단위로 vw (viewport width) 폰트 사이즈가 뷰포트의 너비에 따라 움직인다. 1vm는 뷰포트 너비의 1%, 뷰포트의 너비가 50cm라면 1vm은 0.5cm가 된다. 미디어 쿼리 미디어 쿼리를 사용하면 다양한 브라우저 사이즈에 따라 다른 스타일을 적용할 수 있다. 뷰포트의 너비가 800픽셀 이하일때는 각 요소의 너비가 100..

웹 페이지를 구성할 때 요소들에게 자신이 태어난 이유에 걸맞는 역할을 부여해야 한다. (semantic) 이 얼마나 존재론적인가! HTML태그들도 다 태어난 이유가 있다고! 말이 semantic이지 별거 없다. 그냥 헤더 태그는 문서의 헤더 역할을 하려고 탄생했으니까 문서의 헤더를 정의해야 할때는 헤더 태그를 써라, 이거다. 태그 문서의 맨 윗부분에 위치한다. 웹 사이트의 이름, 글로벌 링크 - 로그인, 회원가입, 언어 선택 등 웹 사이트의 어떤 페이지에서도 사용할 수 있는 링크를 포함한다. 태그나 태그의 제목으로도 사용한다. 태그는 navigation bar 즉 ,링크들의 리스트를 담는 컨테이너를 정의한다. 페이지의 메뉴를 표현한다. 태그를 사용한다. 태그는 페이지 내용의 구조와 흐름을 만든다. 페이지..