HTML11 [HTML] HTML video 태그 HTML의 video 태그에 대해서 알아보겠습니다. 이 전에 배웠던 태그와 비슷하게 사용하면 됩니다. HTML5가 등장하기 전에는 비디오를 올리는 표준화된 방법이 없었습니다. 비디오는 기본적으로 오랜시간 동안 브라우저가 제공하지 않았습니다. 플래시라는 프로그램을 이용하여 비디오를 보여주었습니다. 브라우저마다 브라우저가 진행하는 포맷(코덱)이 다릅니다. 파이어폭스의 경우에는 ogv, 크롬 같은경우에는 mp4. 코드 처럼 작성하면 가장 선호하는 형식을 웹브라우저가 선택해서 보여줍니다. 따라서 source를 여러개 써 넣어놔도 상관이 없습니다. 그리고 동영상 컨트롤을 위해서 video 태그안에 controls를 써줍니다. autoplay 속성같은경우에는 동영상이 자동으로 실행되게 해줍니다. 그때 그때 필요한 .. 2019. 5. 23. [HTML] 외부문서삽입(iframe) iframe iframe의 등장시기는 html 4.01입니다. 웹 페이지에 다른 웹 페이지를 삽입하는 방법인 아이프레임은 참 편리하면서도 위험한 방법입니다. 왜냐면 신뢰할 수 없는 사이트에서 악성코드 같은 것을 포함하고 있다면 삽입된 외부소스에서 악성코드가 실행될 수 있기 때문이죠. 이런 문제를 해소하기 위해서 HTML의 최신 버전인 HTML5에서는 샌드박스라는 것을 도입했습니다. 아이프레임으로 삽입된 웹 페이지에서 자바스크립트 등이 실행되지 않도록 하는 방법입니다. 다음 코드는 http://opentutorials.org 를 iframe에 가져오는 소스입니다. 가로, 세로 높이를 지정해 줄 수 있습니다. 이 iframe은 외부의 콘텐츠를 내 사이트로 가지고 올 때 많이 사용합니다. Iframe에 san.. 2019. 5. 12. [HTML] View Port 만든 웹페이지를 모바일이나 태블릿에서 볼만하게 만들어주는 방법을 알아 보겠습니다. HTML 기술소개 기본문법 하이퍼텍스트와 속성 리스트와 태그의 중첩 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 크롬 웹브라우저에서 F12버튼을 눌러 개발자 도구를 실행합니다. 그 후 위의 사각형 버튼을 누릅니다. 그러면 Responsive를 클릭 후 원하는 기기를 선택합니다. 그러면 그 기기에서 나타나는 화면을 볼 수 있습니다. 2019. 5. 8. [HTML] 정보로서의 html 1. 글꼴 - font (퇴출) font태그는 쓰지 말라고 알려드리는 태그입니다. 이 font 태그가 퇴출됨으로써 html이 정보로서 중요하다라는 이야기를 하고 싶습니다. 하지만 이미 많은 곳에서 쓰고 있는 태그입니다. Size는 1~7까지 있고 기본 값은 3입니다. 그리고 color라는 속성을 통해 글자색을 지정할 수 있습니다. 여기서 생기는 문제는 font라는 것은 아무런 의미를 가지고 있지 않습니다. 시각적인 디자인일 뿐이지 이 Hello라는 정보에 대해서 어떠한 설명도 하지 않습니다. Html전체에서 디자인과 관련된 코드와 어떠한 의미를 가지고 있는(h1, li 등) 코드가 혼재되면서 이 웹 페이지를 해석하기가, 정보로서 가지는 가치가 떨어지는 문제를 갖습니다. 이 문제를 해결하기 위해서 font.. 2019. 5. 8. [HTML] <form> 태그 1. 태그 사용자가 입력한 데이터를 서버로 데이터를 전송할 때 사용하는 태그입니다. 태그를 통해 사용자가 데이터를 입력 받을 수 있습니다. Type에 text, pass word를 통해 속성값을 지정해 줄 수 있으며, 서버로 전송할 떄 사용하는 버튼은 submit버튼으로 input태그의 type에 submit을 지정하여 서버로 데이터를 전송합니다. 우리가 입력한 정보가 어디에 있는 서버로, 어디에 전송을 할껀지 지정하는 태그가 form태그입니다. 이러한 정보를 form태그의 action 속성값에 지정합니다. 또한 각각의 컨트롤(필드)를 구별하기 위해 이름을 지정해줍니다. 예제는 action 속성값에 서버로 전송하는 부분이 있지만 이부분은 무시하고 html 코드만 보겠습니다. 아이디 : 비밀번호 : 주소 .. 2019. 5. 8. [HTML] html table 1. 태그 웹페이지에 표를 넣는 방법에 대해서 알아보겠습니다. table의 data는 로 표현을 하고 표의 각각의 실제 데이터를 의미합니다. 이름, 성별, 주소가 하나의 행이되고, 최진혁, 남, 청주는 밑으로 내려가야합니다. table row의 약자인 태그를 통해 각각의 행들을 그룹핑 해줍니다. 그리고 이 태그들은 이라는 태그로 묶어주어야 합니다. 그리고 table의 속성에 border값을 설정하여 테두리를 설정합니다. 이름 성별 주소 최진혁 남 청주 최유빈 여 청주 2. 테이블의 정보를 가치있게 만들기 밑의 예제는 위의 예제와는 시각적으로 차이가 없습니다. 테이블의 데이터를 보면 성격이 다릅니다. 태그는 정보를 정의하는 녀석입니다. 어떤 웹페이지에 있는 정보를 좀 더 가치있게 만들려면 좀 더 구조화하는.. 2019. 5. 8. 이전 1 2 다음
